# 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](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/lxLVVfHh23HrHcGi-new-object-reference-before-delete.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/lxLVVfHh23HrHcGi-new-object-reference-before-delete.png)

##### Class

[![class.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/46yW0tqbsY1zVyWR-class.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/46yW0tqbsY1zVyWR-class.png)

##### Function

[![function1.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/gq5SQOpN2gfWxZlY-function1.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/gq5SQOpN2gfWxZlY-function1.png)

[![function2.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/9jzjG8d42LQc7YLC-function2.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/9jzjG8d42LQc7YLC-function2.png)

####  

#### Case 2 - Preventing Wasted Renders in a Simple Component

##### Class

[![pure.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/xYMJVtFsYU498Lfp-pure.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/xYMJVtFsYU498Lfp-pure.png)

##### Function

Before

[![before.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/WVKakOyPMB8FCsMV-before.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/WVKakOyPMB8FCsMV-before.png)

[![useCallback.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/XPZl1PLuDQpJ2ARv-useCallback.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/XPZl1PLuDQpJ2ARv-useCallback.png)

After

[![after.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/Z1rW5GOKydMJnOsT-after.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/Z1rW5GOKydMJnOsT-after.png)

#### Caching Expensive Operation Results

[![usememo.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/UM2h4mBQqc91IJoO-usememo.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/UM2h4mBQqc91IJoO-usememo.png)

#### Lazy Loading Components

[![lazy1.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/ygzMXaOO7RciX9g6-lazy1.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/ygzMXaOO7RciX9g6-lazy1.png)

Component:

[![lazy2.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/r7blPLOGSrp8VMI7-lazy2.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/r7blPLOGSrp8VMI7-lazy2.png)

Fallback:

[![lazy3.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/cLPKSigAazN878wc-lazy3.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/cLPKSigAazN878wc-lazy3.png)

[![lazy4.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/EC9xOBEB3sOeMrEM-lazy4.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/EC9xOBEB3sOeMrEM-lazy4.png)

# React - Testing

[![1.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/3ljIKr6Vkr07CJyQ-1.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/3ljIKr6Vkr07CJyQ-1.png)

[![2.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/jBt7eccfc8QHN4lU-2.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/jBt7eccfc8QHN4lU-2.png)

[![3.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/fAeThgwKeVqQSH2B-3.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/fAeThgwKeVqQSH2B-3.png)

[![4.png](https://books.juannavas.dev/uploads/images/gallery/2021-03/scaled-840-/GekTwTznpIla1WtD-4.png)](https://books.juannavas.dev/uploads/images/gallery/2021-03/GekTwTznpIla1WtD-4.png)

# React - HOC (Higher Order Component)

```JavaScript
import React, {ReactElement} from 'react';

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

export default withAds;
```