Skip to content

Instantly share code, notes, and snippets.

@butaud
Created September 16, 2022 21:57
Show Gist options
  • Save butaud/4ae785cd10bfcea80f3878b8ce75ca01 to your computer and use it in GitHub Desktop.
Save butaud/4ae785cd10bfcea80f3878b8ce75ca01 to your computer and use it in GitHub Desktop.
Sandbox with examples for mount/unmount and memoization

Sandbox with examples for mount/unmount and memoization

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 screenshot of sandbox

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment