React Reusability and Performance

React Reusability

In order to DRY, 4 design patterns have emerged in React:

1. Components with props
2. Children
3. Higher Order Components
4. Render props

React Performance

In order to prevent React from rendering the entire tree when a branch doesn't have its props and state changed, React has 3 ways:

1. shouldComponentUpdate(): The oldest, replaced by PureComponent
2. PureComponent: For class components
3. memo(): for functional components

Avoid premature optimization.