ReactJS – Does render get called any time “setState” is called?

by

Does React re-render all components and sub-components every time setState is called?

By default – yes.

There is a method boolean shouldComponentUpdate(object nextProps, object nextState), each component has this method and it’s responsible to determine “should component update (run render function)?” every time you change state or pass new props from parent component.

You can write your own implementation of shouldComponentUpdate method for your component, but default implementation always returns true – meaning always re-run render function.

Quote from official docs http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

By default, shouldComponentUpdate always returns true to prevent
subtle bugs when the state is mutated in place, but if you are careful to
always treat the state as immutable and to read-only from props and state
in render() then you can override shouldComponentUpdate with an
implementation that compares the old props and state to their
replacements.

Next part of your question:

If so, why? I thought the idea was that React only rendered as little as needed – when the state changed.

There are two steps of what we may call “render”:

  1. Virtual DOM renders: when render method is called it returns a new virtual dom structure of the component. As I mentioned before, this render method is called always when you call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimization here in React.

  2. Native DOM renders: React changes real DOM nodes in your browser only if they were changed in the Virtual DOM and as little as needed – this is that great React’s feature which optimizes real DOM mutation and makes React fast.

More Related Contents:

  1. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  2. React: how to update state.item[1] in state using setState?
  3. Invalid hook call. Hooks can only be called inside of the body of a function component
  4. ReactJS – Lifting state up vs keeping a local state
  5. TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
  6. How to call an async function inside a UseEffect() in React?
  7. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  8. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  9. Github – unexpected disconnect while reading sideband packet
  10. How do you pass data when using the navigate function in react router v6
  11. How do I access store state in React Redux?
  12. Read Store’s Initial State in Redux Reducer
  13. onClick works but onDoubleClick is ignored on React component
  14. Is componentDidMount of parent called after all componentDidMount of children?
  15. Error “Error: A is only ever to be used as the child of element”
  16. ReactJS – Get Height of an element
  17. Retrieving value from with multiple option in React
  18. Images not loading when relative path is used in React
  19. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  20. Can’t call setState on a component that is not yet mounted
  21. Redux Presentational Components Vs Container Component
  22. stop dragging after a limit has reached
  23. Equivalent to componentDidUpdate using React hooks
  24. reactjs event listener beforeunload added but not removed
  25. React – Dynamically Import Components
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. passing data from child to parent component – react – via callback function
  29. FastAPI is not returning cookies to React frontend
  30. How to set iframe content of a react component

Leave a Comment