Deep equal vs. Shallow equal on React's shouldComponentUpdate
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
Environment:
Deep Equal (JSON.stringify(prevProps) === JSON.stringify(nextProps)
):
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
Shallow Equal(Use shallow-equal-props)
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