A (Mostly) Complete Guide to React Rendering Behavior
blog.isquaredsoftware.com
blog.isquaredsoftware.com
This has been one of the most popular and well-received posts I've ever written (the other being the "Redux and Context" post I wrote earlier this year [0]).
I think this one started out at about 5000 words, and I've kept adding to it over time so that it's now about 8500. I actually have several more updates I need to make, including covering some of the changes in React 18. Hopefully will get to those sometime during this holiday break.
The other deep-dive post I typically recommend is Dan Abramov's "Complete Guide to `useEffect`" [1].
I'm also happy to say that a decent chunk of this information is now part of the new React beta docs [2], which are absolutely amazing. They're not complete yet, but they're already vastly better than the previous docs, and we now routinely point new React learners to the beta docs as a starting point.
[0] https://blog.isquaredsoftware.com/2021/01/context-redux-diff...
At work we are currently exploring/POCing a migration to RTK to manage state and redux. Something we were planning on doing is converting completely to hooks. This post probably saved us some headache and made me realize that might not be the right move.
Out of curiosity, what do you mean by "converting completely to hooks" and "not being the right move"?
If you mean "sticking with `connect` for Redux usage in components", we _do_ recommend the hooks API as the default - it's a lot easier to learn and use, especially with TypeScript. Yes, that does mean you don't get the "auto-optimization of re-rendering when parents re-render" that `connect` gives you, but you can get the same result by wrapping your own components in `React.memo()` as needed (which is actually what `connect` uses internally.)