This repo demonstrate how small changes in react code can have tremendous effect on the app.
After playing with this repo I strongly recommend to run why-did-you-update on your projects, it's easy and free 😛. Check it out here, I promise that you won't be disappointed.
- Go over the description of the show case app
- Open your dev tools and check out the bad card example here
- Open your dev tools and check out the good card example here
- Look at the bad card code
- Look at the good card code
- Read about the differences and why do they matter
- Play with this project on your machine
The app consists of an array of 100 cards (nothing crazy). The card's components layout shown below. At the top of the app there's a counter for the number of cards who have some text in their input field.
It all boils down to one line and one line only, and that line is:
//bad-card.js#30
handleChange={({index, text}) => this.handleChange({index, text})}
//vs
//good-card.js#31
handleChange={this.handleChange}Why?
when any of the input changes we call the root component. This is a common pattern. We have one component who monitor
and manage data from several children component. However in our case, every time handleChange is called we set the new value
of the card, calculate the total number of cards with values and then call setState with the new values.
In good-card the call to setState doesn't really matter. Only the value property of the card that its value was changed is changed
and so it triggers a re-render for that card only.
In bad-card however on every call to handleChange we build the card array again but this time each card has a new handleChange reference
because we used an anonymous function.
Note:
It doesn't matter that Card is a PureComponent. It still get a new prop handleChange reference which is different than
the previous handleChange reference.
npm install- in one terminal
npm run watch - in another one
npm run start - open
http://localhost:3000/good/andhttp://localhost:3000/bad/