# 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)