Understanding React Rendering

Question

It seems that React components always run their render method when their parent component renders, even if no state or props changed for the child component, even if the child component has no state or props.

Is this supposed to be? Is there any inefficiency in this? Switching the child component to a PureComponent fixes this, and the child component will not reRender. Should I favor PureComponents over regular Components?

PureComponents are more bug-prone. The general recommendation by the react docs is to use Component everywhere and use PureComponent only when solving an actual performance problem and only when its usage actually improves performance. I can't find a link to the source right now. — Stefan Dragnev
– Stefan Dragnev, Commented Jan 16, 2017 at 17:27
From the PureComponent docs: "If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases." The "If" is whats interesting to me... Is the render function supposed to run when everything is the same? Or should dumb components with no state or props ever not re-render when using regular components. How do regular components decide when to render? — Leo Fabrikant
– Leo Fabrikant, Commented Jan 16, 2017 at 19:03
Any Changes in parent component render the children first and then parent component. If you think parent component state or props should not affect in child component, use shouldComponentUpdate function. Pure Component is useful if you do not need local state for the component. — Khalid Azam
– Khalid Azam, Commented Jan 17, 2017 at 7:04

finalfreq · Accepted Answer · 2017-01-16 16:58:45Z

1

If you are wanting to control what makes a component rerender then you should be using shouldComponentUpdate which can be used on all react components unless they are stateless functional components. The PureComponent basically uses a shouldComponentUpdate automatically and does a shallow check on past and current props/state and if there was a change it will rerender.

Sometimes you might be dealing with more complex data structures and want to be in control of the shouldComponentUpdate yourself, in that case just follow the life cycle method instructions here.

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

Here is also the info for PureComponent

https://facebook.github.io/react/docs/react-api.html#react.purecomponent

answered Jan 16, 2017 at 16:58

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leo Fabrikant Over a year ago

Thanks, I understand that functionality, im just trying to understand if I should bother controlling rerendering? Should I get into the habbit of trying to minimize rerendering of components that dont need to rerender?

finalfreq Over a year ago

It really depends on your use case and application. If performance isn't an issue and you don't have a very complex UI it might not be worth the time investment. If you have a complex UI with components that can potentially render a lot of DOM elements its definitely worth taking the time and protecting against useless rerenders. Where I work, we only really use it on problematic components and dont take the time on the smaller components to implement it but i'm sure there are others who put it on everything its just depends on your use case

Leo Fabrikant Over a year ago

Thanks, thats helpful. I just read some docs that clarified that the render method doesn't actually imply a rerender of the actual DOM. React still compares the rendered vritual DOM element to the real thing to determine if it needs to render in the UI.

Collectives™ on Stack Overflow

Understanding React Rendering

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related