React

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

 

 

React - Testing

1.png

2.png

3.png

4.png

React - HOC (Higher Order Component)

import React, {ReactElement} from 'react';

const withAds = (Component: React.ComponentType) => {
  return (props): ReactElement => {
    
    // Write logic here.....
    
    return <Component {...props} />;
  };
};

export default withAds;