Search code examples
reactjsreact-reduxreselect

React, how to stop re-render of the application with reselect?

Here is the code: codepen. The problem is, when I add a new to-do or change to-do state to completed, other to-dos will re-render as well?

Is that any way to stop this?

Solution

  • If you are using functional components, then use React.memo and if using class based components, use React.PureComponent

    React.memo: https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control

    React.PureComponent: https://ozmoroz.com/2018/09/what-is-purecomponent/

    The idea behind these is to check the props of a component and only re-render if the props are changed. These components use the lifecycle method shouldComponentUpdate internally and based on prop changes, decide whether or not to re-render the component.

    There is one catch though, React only performs a shallow check of objects with nested properties and arrays with nested object, so re-renders may or may not occur.