My team was having some discussions internally around the different patterns and anti-patterns and how they affect component re-renders, memoization, and unmounting/remounting. I wanted to look at some really simple live examples to make sure I understood things correctly, so I put together this sandbox here: https://codesandbox.io/s/cool-grass-wjxvz8
You can choose either the set of mount/unmount examples or memoization examples from the dropdown at the top, then click the button to trigger re-rendering the top level component, and use the automatically included react-render-tracker to observe how each child component updates from there. Look in MemoizationExampleApp.js
and MountUnmountExampleApp.js
to see how each example component is defined.
Please let me know if you have questions about how the code works, or suggestions for other examples that should be added. Also note that you can fork the sandbox and play around with it as much as you want to explore your own examples.