Introduction:

Its important to know how JS compares primitives and objectscomparison

Optimization:

The 4 reasons to explain why react components Rerenders:

1) State Changes

2) Parent Changes

3) Context Changes

4) Hooks Changes

Rerender Issues:

Creating components in render function

Prevent Rerender:

Composition - Encapsulate state in smaller components Composition - children as props Composition - components as props

Component Optimization:

React.memo Components with props Component as props or children

Memoization Techniques:

Problem: Not memoized components will always rerenders when props changes

Solution: Memoization using useCallback and useMemo. Examples From this page

Prevent re-renders caused by context - memoize provider

Prevent re-renders caused by context -split data and API

Prevent re-renders caused by context - context selectors