React re-renders
When a component is re-renders?
1 State change
When the state of a component changes (using useState or this.setState), the component and its children will re-render.
const [count, setCount] = useState(0);
setCount(count + 1);2 A prop changes
When the props passed to a component change, the component will re-render.
<MyNewComponen newProp={newValue} />3 Parent Component Re-renders
If a parent component re-renders, its child components will also re-render by default, unless they are optimized (e.g., using useMemo)
<father>
<child1 />
<child2 />
</father>This happens no matter if their child use father props or no using any prop But this not happens in the opposite way. If a child component re renders, their father don’t have to re-renders
4 Context change
If the component is consuming context (e.g. using useContext) it will re-render when the context value changes. Even if the component don’t consume the property that changes, but other context property changes
5 Key prop change
If the key prop of a component changes, React will treat it as a new component and re-render it.
Thanks so much!