Few techniques to optimize React performance.

Using useMemo( )

• It is a React hook that is used for caching CPU-Expensive functions.
• Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering.
  useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.

Maintaining State Colocation

• This is a process of moving the state as close to where you need it as possible.
• Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.
• It is better to shift states which are less valuable to the parent component, to a separate component.

Lazy Loading

• It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performances to a minimum.