Performance optimization techniques for React

Performance plays a vital role in developing modern React applications. React by default is developed by keeping performance in mind, it offers virtual DOM, efficient reconciliation, and a component-based architecture. But as application grows, we start facing performance issues. This blog will help you with some performance optimization tips to consider before release.

1. memo to Prevent Unnecessary Re-renders:

React.memo is a build in component memorization technic. When we wrap a component within React.memo, it shallowly compares previous and current props to avoid unnecessary re-renders. Since this comparison has a cost, it should be applied selectively rather than to every component.

Example:

const getEmployeeId= React.memo(({emp}) => {
  return 
{emp.empId }
;
});

Bonus Tip: Make use of useCallback (memorizes a function reference) and useMemo (memorizes a expensive computed value) hooks to prevent unnecessary re-renderings.

2. lazy to load component on demand:

React.lazy is to load component only on ...