dskelton-r7 / react-optimizations

Various optimizations of a list of cards in React

Summary

Check out the demo

This repository hosts the code for a video series on optimizing react applications.

In this series we walk through:

• Hooking up the app to local state using useReducer
• Using React.memo to avoid extra re-renders
• Implementing immer to make our code more readable and avoid completely rewriting the entire state
• Hoisting state into a context to avoid prop-drilling and separate the dispatch from the state
• Adding recoil to separate our state tree from our view tree and subscribe only to the necessary components

Disclaimer

This is only a demo. The application in this repository is not meant to reflect the complexity of an actual application. It is written is such a way to highlight specific performance bottlenecks developers might encounter using React, and propose different solutions to those problems.

As with every tutorial, blog, or video series, take every suggestion with a grain of salt, try out the techniques demonstrated, and learn not only how to apply these lessons, but also when to.

Outline

The following is the outline of topics with the corresponding video and branch

• Intro
• Simple state - before/after code
  • Part 1
  • Part 2
• Memoization - before/after code
• Immer - before/after code
• React Context - before/after code
• Adding Recoil - before/after code
  • Part 1
  • Part 2
• Refactoring with Recoil Selectors - before/after code

History of this repository

This is the repository for a video series I'm working on showing different optimization strategies in React

This is a fork of another repository I used for a demo of the library immer at Austin Downtown React Meetup for the August, 2019 meetup.

You can view the original repo here

Bootstraped with create-react-app

Questions?

If you have any questions, suggestions, or edits, feel free to reach out to me on twitter, or just leave an issue in this repo.