Context provides a way to pass data through the component tree without having to pass props down manually at every level.
- React Documentation
If you ever find yourself needing to pass props down a few levels (no more than 5 or 6) and it is considered "global" data, Context may be right for you!
React Refs
Refs provide a way to access DOM nodes or React elements created in the render method.
React refs should be used when you want to target or manipulate a DOM node
React memo
If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result..
- React Documentation
If you have a functional component that receives props, it will rerender even if the props are the same. Enter React.memo. This will do a shallow comparison to see if the props are the same. If they are, no rerendering.
React Lazy and Suspense
The React.lazy function lets you render a dynamic import as a regular component.
- React Documentation
Suspense is a component created by React that will display something until our other components are ready
Lazy and Suspense are often used together but don't have to be
React Hooks
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
