Clarification needed with "React: Optimize Re-Renders with shouldComponentUpdate" chapter

JavaScript
1

In this chapter it says

So far, if any component receives new state or new props , it re-renders itself and all its children. This is usually okay

but I searched on this topic and it says component only get re-rendered only when state changes

Please clarify if this is mistake in the chapter ?

2

Functional component rerenders on state and props change.
Class based - only on state change.

3

Can you please point me to official documentation on this topic ?

4

@jenovs some more research from my side

( https://reactjs.org/docs/react-component.html#shouldcomponentupdate )

here it says

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

Here 1st sentence says state or props but 2nd sentence says every state change, which one is correct ?

5

https://reactjs.org/docs/components-and-props.html#function-and-class-components
Functional component is just a pure JS function - you give it an argument and get the result. If argument changes result changes.

shouldComponentUpdate takes nextProps and nextState as parameters and you can decide if the component should rerender (e.g. if props are changed) or should not (e.g. if state is changed, but for some reason you don’t want rerender). The default behavior is to rerender only on state changes.

1 Like