Prevent renders when updated state is same as previous

Question

Is there a react lifecycle method that we can use to perform a re-render only when the updated state is different from the previous state. For example, in the following code:

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: "abcd"
    };
  }

  handlePress = () => {
    this.setState({ value: "abcd" });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>{this.state.value}</h1>
        <button onClick={this.handlePress}>Press</button>
      </div>
    );
  }
}

You can see that on pressing the button, even though the state is the same as the previous, it will still lead to the render() function running.

I know that we can use shouldComponentUpdate() or PureComponent to prevent that but are there other ways/lifecycle methods that can achieve this?

I have also created a sandbox/playground of the above code here.

Audun Hilden · Answer 1 · 2023-07-28T12:43:46.400

1

If you are using functional components, you can use React.memo to achieve this.

import React, { useState, memo } from 'react';

const App = () => {
  const [value, setValue] = useState("abcd");

  const handlePress = () => {
    setValue("abcd");
  };

  console.log("render");

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={handlePress}>Press</button>
    </div>
  );
};

export default memo(App);

For class components, you can use shouldComponentUpdate, but you'd have to manually compare the changes.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.value !== this.state.value;
}

Edit

React.memo only tracks the props, not state.

Thanks @Oktay Yuzcan for pointing it out.

edited Jul 28 '23 at 12:43

answered Jul 28 '23 at 11:15

Audun Hilden

330
3
13

Is it possible to use any lifecycle method other than `shouldComponentUpdate` for this? – De-J Jul 28 '23 at 11:36
React memo does not prevent rerender after state change. It prevents rerender when the props are unchanged. – Oktay Yuzcan Jul 28 '23 at 11:42
@OktayYuzcan that's exactly what the OP requested – Audun Hilden Jul 28 '23 at 11:45
The OP asks how to prevent rerender when state changes. How memo does that? – Oktay Yuzcan Jul 28 '23 at 11:53
OP wants to perform a re-render only when the updated state is different from the previous state – Audun Hilden Jul 28 '23 at 11:55
Exactly. React memo tracks props, not state – Oktay Yuzcan Jul 28 '23 at 12:00
yea you're right good catch – Audun Hilden Jul 28 '23 at 12:42

Prevent renders when updated state is same as previous

1 Answers1

Edit