Smarter way of counting values in object (JS, React)

Question

Taking a look at the code below, is there a better way of getting the count of items that contain a certain key/value pair inside of a react state?

This method seems like it could cause a bottleneck once the list that I'm going through becomes large.

Here's a simplified example of the question at hand:

class App extends React.Component {
  constructor() {
    super();
    
    this.state = {
      animals: [
        {type: 'cat'},
        {type: 'dog'},
        {type: 'cat'},
      ]
    };
  }

  render() {
    return(
      <div className="app">
        <Categories state={this.state} />
      </div>
    );
  }
}

class Categories extends React.Component {
  constructor() {
    super();

    this.countItems = this.countItems.bind(this);
  }

  countItems(type) {
    var count = 0;
  
    for(var i = 0; i < this.props.state.animals.length; i++) {
      if(this.props.state.animals[i].type === type) {
        count++;
      }
    }
    
    return count;
  }

  render() {
    return(
      <div className="categories">
        <div>Total animals: {this.props.state.animals.length}</div>
        <div>Cats: {this.countItems('cat')}</div>
        <div>Dogs: {this.countItems('dog')}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

trincot · Accepted Answer · 2016-10-09 17:56:51Z

1

When this is a method you would call often, then it might be useful to index your data (animals) by type, and keep that updated whenever you make changes.

For instance:

In the App constructor you would create another property animalsPerType:

  constructor() {
    super();

    this.state = {
      animals: [
        {type: 'cat'},
        {type: 'dog'},
        {type: 'cat'},
      ]
    };
    this.state.animalsPerType = this.state.animals.reduce(function(acc, animal) {
        return acc.set(animal.type, (acc.get(animal.type) || []).concat(animal));
    }, new Map());
  }

Then your countItems method becomes trivial:

  countItems(type) {
    return this.props.state.animalsPerType.get(type).length;
  }

edited Oct 9, 2016 at 17:56

answered Oct 8, 2016 at 19:41

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davin Tryon · Accepted Answer · 2016-10-08 19:10:26Z

1

If you do not change the structure of your state, then you must do some sort of loop through and count by type.

A more expressive approach might be to use reduce:

countItems(type) {  
    return this.props.state.animals.reduce((acc, next) => {
        return next.type == type ? acc + 1 : acc)
    }, 0);
  }

However, if performance is a problem:

You could keep the count in state and calculate once each time animals change
You could split each type of animal into a separate array in state and then use length on each.
Changing your state to something like this might help:

this.state = { animals: { dogs: [], cats: [] } }

edited Oct 8, 2016 at 19:10

answered Oct 8, 2016 at 18:59

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Collectives™ on Stack Overflow

Smarter way of counting values in object (JS, React)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related