Skip to main content

React - Optimize Performance

Case 1 - Preventing Wasted Renders with Complex Props

Create new object reference before delete a key.

new-object-reference-before-delete.png

Class

class.png

Function

function1.png

function2.png

 

Case 2 - Preventing Wasted Renders in a Simple Component

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

 

 

Back to top