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)