Deep equal vs. Shallow equal on React's shouldComponentUpdate
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5a278a7 Feb 1, 2018
Permalink
Failed to load latest commit information.
public init Nov 26, 2017
src use shallowEqualProps Feb 1, 2018
.gitignore init Nov 26, 2017
README.md use shallowEqualProps Feb 1, 2018
package.json use shallowEqualProps Feb 1, 2018
tsconfig.json init Nov 26, 2017
tsconfig.test.json init Nov 26, 2017
tslint.json init Nov 26, 2017
yarn.lock use shallowEqualProps Feb 1, 2018

README.md

Avoid-json-stringify-on-react

React's document said that

We do not recommend doing deep equality checks or using JSON.stringify() in shouldComponentUpdate(). It is very inefficient and will harm performance. https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Related Issue

Test

Environment:

  • MacBookPro14,1
  • CPU: Intel Core i7, 2.5 GHz
  • Browser: Chrome – 6x CPU throttling

Before

Deep Equal (JSON.stringify(prevProps) === JSON.stringify(nextProps)):

image

Name: ⚛ A.shouldComponentUpdate, Duration: 0.9350000000004002

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.010000000000218279

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 1.1300000000001091

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.015000000000327418

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0.009999999999308784

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 5.364999999999782

App.tsx:32 Total shouldComponentUpdate: 7.4650000000001455
App.tsx:33 Update components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate

App.tsx:27 Name: ⚛ A.shouldComponentUpdate, Duration: 0.014999999999417923

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.004999999999199645

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 0.019999999999527063

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 5.770000000000437

App.tsx:32 Total shouldComponentUpdate: 5.81499999999869
App.tsx:33 Update components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate


App.tsx:27 Name: ⚛ A.shouldComponentUpdate, Duration: 0.015000000000327418

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0.005000000001018634

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 5.154999999999745

App.tsx:32 Total shouldComponentUpdate: 5.190000000001419
App.tsx:33 Update components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate

After

Shallow Equal(Use shallow-equal-props)

image

Name: ⚛ A.shouldComponentUpdate, Duration: 0.13999999999941792

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.010000000001127773

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 0.004999999999199645

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.010000000000218279

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0.015000000000327418

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 1.125

App.tsx:32 Total shouldComponentUpdate: 1.305000000000291
App.tsx:33 Updated components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate

App.tsx:27 Name: ⚛ A.shouldComponentUpdate, Duration: 0.009999999999308784

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.004999999999199645

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 0.009999999999308784

App.tsx:32 Total shouldComponentUpdate: 0.03999999999814463
App.tsx:33 Updated components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate

App.tsx:27 Name: ⚛ A.shouldComponentUpdate, Duration: 0.010000000000218279

App.tsx:27 Name: ⚛ B.shouldComponentUpdate, Duration: 0.004999999999199645

App.tsx:27 Name: ⚛ C.shouldComponentUpdate, Duration: 0

App.tsx:27 Name: ⚛ D.shouldComponentUpdate, Duration: 0.004999999999199645

App.tsx:27 Name: ⚛ E.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:27 Name: ⚛ List.shouldComponentUpdate, Duration: 0.005000000000109139

App.tsx:32 Total shouldComponentUpdate: 0.029999999998835847
App.tsx:33 Updated components: ⚛ A.shouldComponentUpdate, ⚛ B.shouldComponentUpdate, ⚛ C.shouldComponentUpdate, ⚛ D.shouldComponentUpdate, ⚛ E.shouldComponentUpdate, ⚛ List.shouldComponentUpdate