React and JavaScript: Calling setState() Only Once to Update State

Question

The calculateTotalPages function below calculates the total pages that will be displayed. Initial value for totalPages state is set to 0. Where should I call setState to update the totalPages state once the calculateTotalPages function has calculated and returned the value of total pages? I know setState is not to be called within render().

class Items extends Component {
  state = {
    items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'],
    isLoading: false,
    currentPage: 1,
    itemsPerPage: 3,
    totalPages: 0
  }

  calculateTotalPages = (items, itemsPerPage) =>{
    let getTotalPages;
    const quotient = Math.trunc(items.length / itemsPerPage);
    const remainder = items.length % itemsPerPage;

    if(remainder === 0){
      getTotalPages = quotient;
    }else{
      getTotalPages = quotient + remainder;
    }

    return getTotalPages;
  };

  
  render() {
    const{items, totalPages, currentPage, itemsPerPage} = this.state;
    const getTotalPages = this.calculateTotalPages(items, itemsPerPage)

    console.log(getTotalPages)

    return (
         <div><h1>{getTotalPages}</h1></div>
    )
  }
}

export default Items;

I'd probably do it in componentDidMount if possible, and if it only needs to be set once — Blundering Philosopher
– Blundering Philosopher, Commented Jan 15, 2021 at 20:53
This doesn't address your question directly but I want to provide a strong suggestion. Don't store derived data, like total pages, in your component state, this is also considered an anti-pattern. Thinking in React. The total pages is a simple calculation from the items and itemsPerPage state values. — Drew Reese
– Drew Reese, Commented Jan 15, 2021 at 23:51
Drew, so basically I should simply call the calculateTotalPages function within render and get the value? No need to store it in a state? — night_programmer
– night_programmer, Commented Jan 16, 2021 at 2:08
Thank you. That makes so much sense and I have corrected my code. — night_programmer
– night_programmer, Commented Jan 16, 2021 at 3:11

emkarachchi · Accepted Answer · 2021-01-15 21:25:54Z

1

render function should be pure.

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

Don't call this in render just call in componentDidmount

componentDidMount() {
this.calculateTotalPages(this.state.items, this.state.itemsPerPage)
}

From the docs

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.

Then set the state inside the function would be easier.

  calculateTotalPages = (items, itemsPerPage) =>{
    let getTotalPages;
    const quotient = Math.trunc(items.length / itemsPerPage);
    const remainder = items.length % itemsPerPage;

    if(remainder === 0){
      getTotalPages = quotient;
    }else{
      getTotalPages = quotient + remainder;
    }

    this.setState({totalPages:getTotalPages}) //set state here

    return getTotalPages;
  };

edited Jan 15, 2021 at 21:25

answered Jan 15, 2021 at 20:55

emkarachchi

8021 gold badge8 silver badges18 bronze badges

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

3 Comments

night_programmer Over a year ago

Makes sense. Thanks! Can I also use an if statement in componentDidMount to check if the state value has changed from the previous one in order avoid executing that function more than once?

emkarachchi Over a year ago

ComponentDidMount will only call once. but as we are setting the state in the ComponentDidMount method, technically render method gets called twice.

emkarachchi Over a year ago

more about componentDidMount

Imran Rafiq Rather · Accepted Answer · 2021-01-15 20:55:39Z

1

In a class based component you can do this in componentDidMount() since this is invoked only once initially after the first render.

In a functional component you can use useEffect() Hook with empty array as the second argument.

answered Jan 15, 2021 at 20:55

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

Collectives™ on Stack Overflow

React and JavaScript: Calling setState() Only Once to Update State

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related