React: Parent component re-renders all children, even those that haven’t changed on state change

by

If a parent component is updated, does React always update all the direct children within that component?

No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won’t actually update unless something changed, lowering the impact).

To prevent your sub-component from re-rendering unnecessarily, you need to implement the shouldComponentUpdate method in such a way that it only returns true when the data has actually changed. If this.props.messages is always the same array, it could be as simple as this:

shouldComponentUpdate(nextProps) {
    return (this.props.messages !== nextProps.messages);
}

You may also want to do some sort of deep comparison or comparison of the message IDs or something, it depends on your requirements.

EDIT: After a few years many people are using functional components. If that’s the case for you then you’ll want to check out React.memo. By default functional components will re-render every time just like the default behavior of class components. To modify that behavior you can use React.memo() and optionally provide an areEqual() function.

More Related Contents:

  1. React setState not Updating Immediately
  2. What is mapDispatchToProps?
  3. What is the best way to access redux store outside a react component?
  4. why do you need to bind a function in a constructor
  5. What is use of curly braces in an ES6 import statement?
  6. How can I persist redux state tree on refresh?
  7. Attach Authorization header for all axios requests
  8. What is the best way to redirect a page using React Router? [closed]
  9. Can I dispatch an action in reducer?
  10. Handling async request with React, Redux and Axios?
  11. React – Display loading screen while DOM is rendering?
  12. When do I choose React state Vs Redux Store
  13. Use Connect or pass data as props to children
  14. Axios get in url works but with second parameter as object it doesn’t
  15. Redux: Why is avoiding mutations such a fundamental part of using it?
  16. ReactJS lifecycle method inside a function Component
  17. Element type is invalid: expected a string (for built-in components) or a class/function
  18. Use history.push in action creator with react-router-v4?
  19. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  20. How does connect work without mapDispatchToProps
  21. Trace why a React component is re-rendering
  22. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  23. Jest setup “SyntaxError: Unexpected token export”
  24. How to fix 431 Request Header Fields Too Large in React-Redux app
  25. how to set initial state in redux
  26. My Redux state has changed, why doesn’t React trigger a re-render?
  27. How do I see state when logging to the console instead of Proxy object inside reducer action?
  28. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  29. Property ‘value’ does not exist on type ‘Readonly’
  30. Cleaner/shorter way to update nested state in Redux?

Leave a Comment