Skip to main content

React - Optimize Performance

Case 1

Create new object reference before delete a key.

new-object-reference-before-delete.png

Class

class.png

Function

function1.png

function2.png

 

Case 2

Class

pure.png

Function

Before

before.png

useCallback.png

After

after.png

 

Caching Expensive Operation Results

usememo.png

 

Lazy Loading Components

 

lazy1.png

Component:

lazy2.png

Fallback:

lazy3.png

lazy4.png