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