ReactJS - Does render get called any time setState is called

Question

Does React re-render all components and sub components every time setState   is called  If so  why  I thought the idea was that React only rendered as little as needed - when state changed  In the following simple example  both classes render again when the text is clicked  despite the fact that the state doesn t change on subsequent clicks  as the onClick handler always sets the state to the same value  this setState   test   me      I would ve expected that renders would only happen if state data had changed  Here s the code of the example  as a JS Fiddle  and embedded snippet   x000D   x000D  var TimeInChild   React createClass       render  function             var t   new Date   getTime             return                lt p gt Time in child  t  lt  p gt                        var Main   React createClass       onTest  function             this setState   test   me                 render  function             var currentTime   new Date   getTime             return                lt div onClick  this onTest  gt               lt p gt Time in main  currentTime  lt  p gt               lt p gt Click me to update time lt  p gt               lt TimeInChild  gt               lt  div gt                        ReactDOM render  lt Main  gt   document body   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 0 react-dom min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Even though it s stated in many of the other answers here  the component should either    implement shouldComponentUpdate to render only when state or properties change switch to extending a PureComponent  which already implements a shouldComponentUpdate method internally for shallow comparisons    Here s an example that uses shouldComponentUpdate  which works only for this simple use case and demonstration purposes  When this is used  the component no longer re-renders itself on each click  and is rendered when first displayed  and after it s been clicked once    x000D   x000D  var TimeInChild   React createClass   x000D      render  function     x000D          var t   new Date   getTime    x000D   x000D          return   x000D               lt p gt Time in child  t  lt  p gt  x000D             x000D        x000D      x000D   x000D  var Main   React createClass   x000D      onTest  function     x000D          this setState   test   me     x000D         x000D   x000D      shouldComponentUpdate  function nextProps  nextState    x000D        if  this state    null  x000D          return true  x000D     x000D        if  this state test    nextState test  x000D          return false  x000D           x000D        return true  x000D       x000D   x000D      render  function     x000D          var currentTime   new Date   getTime    x000D   x000D          return   x000D               lt div onClick  this onTest  gt  x000D               lt p gt Time in main  currentTime  lt  p gt  x000D               lt p gt Click me to update time lt  p gt  x000D               lt TimeInChild  gt  x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  ReactDOM render  lt Main  gt   document body   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 0 0 react-dom min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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     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  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

User · Answer

Another reason for  lost update  can be the next    If the static getDerivedStateFromProps is defined then it is rerun in every update process according to official documentation https   reactjs org docs react-component html updating  so if that state value comes from props at the beginning it is overwrite in every update    If it is the problem then U can avoid setting the state during update  you should check the state parameter value like this  static getDerivedStateFromProps props  TimeCorrectionProps  state  TimeCorrectionState   TimeCorrectionState      return state   state    disable  false  timeCorrection  props timeCorrection       Another solution is add a initialized property to state  and set it up in the first time  if the state is initialized to non null value

User · Answer

Not All Components   the state in component looks like the source of the waterfall of state of the whole APP   So the change happens from where the setState called  The tree of renders then get called from there  If you ve used pure component  the render will be skipped

User · Answer

No  React doesn t render everything when the state changes    Whenever a component is dirty  its state changed   that component and its children are re-rendered  This  to some extent  is to re-render as little as possible  The only time when render isn t called is when some branch is moved to another root  where theoretically we don t need to re-render anything  In your example  TimeInChild is a child component of Main  so it also gets re-rendered when the state of Main changes  React doesn t compare state data  When setState is called  it marks the component as dirty  which means it needs to be re-rendered   The important thing to note is that although render method of the component is called  the real DOM is only updated if the output is different from the current DOM tree  a k a diffing between the Virtual DOM tree and document s DOM tree   In your example  even though the state data hasn t changed  the time of last change did  making Virtual DOM different from the document s DOM  hence why the HTML is updated

User · Answer

Yes  It calls the render   method every time we call setState only except when  quot shouldComponentUpdate quot  returns false

User · Answer

It seems that the accepted answers are no longer the case when using React hooks  You can see in this code sandbox that the class component is rerendered when the state is set to the same value  while in the function component  setting the state to the same value doesn t cause a rerender  https   codesandbox io s still-wave-wouk2 file  src App js

[javascript] ReactJS - Does render get called any time "setState" is called?

Examples related to javascript

Examples related to reactjs