A few days ago I came across this awesome article about React rendering behaviour by Mark Erikson. It's pretty deep and covers things that you won't find in the official docs and I think even on Overreacted. I had problems with some rendering behaviours when building react-easy-flip and the article was very helpful.
For example, I didn't know that not everything re-renders when context value changes: under certain conditions (like when the child of the context provider is memoized with React.memo) only the providing component and the component that uses the context with useContext are re-rendered. Sometimes we really want a re-render even when props do not change, because we need to trigger some effect with useEffect or useLayoutEffect. If you notice that effect is not triggered for some reason, make sure the component is actually rendered by React.
Cheatsheeted version
However, it is a BIG article so I decided to create a visual aid to it: with pictures and live Codesandbox examples that you can play with.
I thought that making it into an independent page is better so here's the link when you can see it:
Top comments (0)