https://github.com/ryanccollins/memoization-workshop

Memoization sample code for a workshop
https://github.com/ryanccollins/memoization-workshop

memoization react

Last synced: about 2 months ago
JSON representation

Memoization sample code for a workshop

• Host: GitHub
• URL: https://github.com/ryanccollins/memoization-workshop
• Owner: RyanCCollins
• License: mit
• Created: 2022-09-02T18:54:32.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-05T14:58:17.000Z (about 2 years ago)
• Last Synced: 2024-04-13T18:22:59.266Z (9 months ago)
• Topics: memoization, react
• Language: TypeScript
• Homepage: https://medium.com/p/6ac93c00418c
• Size: 74 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://medium.com/p/6ac93c00418c).

## Getting Started

1. Clone the repo

1. Run `yarn` to install the dependencies

1. Run `yarn start` to start the development server.

1. Install the React Devtools browser plugin in your main browser.

1. Enable "Highlight updates on re-renders". See: this document for instructions.

1. Edit a catch phrase on a brokerage card with memoization disabled, notice how slow it is!

1. Edit a catch phrase on a brokerage card with memoization enabled and notice the difference in performance.

1. 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.