Skip to content

React performance code tutorial: implementing shouldComponentUpdate, PureComponent, why-did-you-update, etc.

Notifications You must be signed in to change notification settings

vabruzzo/react-perf-code-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

React performance code tutorial

Objectives:

  1. Explain React performance pitfalls
  2. Implement shouldComponentUpdate
  3. Implement PureComponent
  4. Understand why component methods should be bound in constructor
  5. Utilize why-did-you-update
  6. Understand the use and necessity of immutability

The code is commented out, refer there for explanations. Feel free to open a pull request to add additional comments, etc.

Notice right now that if you toggle the pointless state, List.jsx is re-rendered unnecessarily. why-did-you-update warns us about this in the console. The point of this tutorial is to implement either shouldComponentUpdate or PureComponent to avoid that re-render. Immutability is an important component of that.

About

React performance code tutorial: implementing shouldComponentUpdate, PureComponent, why-did-you-update, etc.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published