Memoization Workshop

This code base offers as an example to learn more about React's memoization tools & APIs and was written to accompany this article.

Getting Started

1. Clone the repo
2. Run yarn to install the dependencies
3. Run yarn start to start the development server.
4. Install the React Devtools browser plugin in your main browser.
5. Enable "Highlight updates on re-renders". See: this document for instructions.
6. Edit a catch phrase on a brokerage card with memoization disabled, notice how slow it is!
7. Edit a catch phrase on a brokerage card with memoization enabled and notice the difference in performance.
8. Open your console to see the Profiler data. Play around with the code by adding and removing useCallbacks, useMemo and React.memo to see how it affects the rendering performance.