Performance optimization in react

Performance optimization is an important aspect of building React applications, as it can help improve the user experience and reduce load times. Here are some performance optimization techniques that can be used in React:

1. Memoization:

   React provides the React.memo() higher-order component (HOC) to memoize functional components, which means that the component will only re-render if its props have changed. This can significantly reduce the number of unnecessary re-renders in your application, especially for components that have expensive calculations or depend on external data sources.

    import React, { memo } from 'react';
   
    const MyComponent = memo(({ propA, propB }) => {
      // expensive calculation
      const result = propA + propB * 2;
   
      return (
        <div>{result}</div>
      );
    });
   

   In this example, the MyComponent will only re-render if either propA or propB has changed.

2. Code Splitting:

   React provides a built-in React.lazy() and Suspense API that allows you to lazy load components on-demand. This can improve the initial load time of your application by reducing the amount of JavaScript that needs to be downloaded.

    import React, { lazy, Suspense } from 'react';
   
    const MyLazyComponent = lazy(() => import('./MyLazyComponent'));
   
    function App() {
      return (
        <div>
          <Suspense fallback={<div>Loading...</div>}>
            <MyLazyComponent />
          </Suspense>
        </div>
      );
    }
   

   In this example, the MyLazyComponent will only be loaded when it's needed, and the fallback component will be displayed while the component is being loaded.

3. Virtualization:

   React provides several virtualization libraries, such as react-window and react-virtualized, that can be used to render large lists or grids more efficiently by only rendering the visible items.

    import React from 'react'.
    import { FixedSizeList } from 'react-window';
   
    function MyList(props) {
      const { items } = props;
   
      const Row = ({ index, style }) => (
        <div style={style}>{items[index]}</div>
      );
   
      return (
        <FixedSizeList height={500} width={500} itemCount=   {items.length} itemSize={50}>
          {Row}
        </FixedSizeList>
      );
    }
   

   In this example, the MyList component will only render the visible items in the list, improving the performance of rendering large lists.

4. Use the React Profiler:

   The React Profiler is a tool that can help you identify performance bottlenecks in your application. It can show you which components are taking the most time to render and which parts of your code are causing unnecessary re-renders. You can use this information to optimize your code and improve the performance of your application.

    import { Profiler } from 'react';
   
    function App() {
      function onRenderCallback(
        id, // the "id" prop of the Profiler tree that has just committed
        phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
        actualDuration, // time spent rendering the committed update
        baseDuration, // estimated time to render the entire subtree without memoization
        startTime, // when React began rendering this update
        commitTime, // when React committed this update
        interactions // the Set of interactions belonging to this update
      ) {
        console.log(`[React Profiler] ${id} ${phase} took ${actualDuration}ms`);
      }
   
      return (
        <Profiler id="App" onRender={onRenderCallback}>
          {/* your app code goes here */}
        </Profiler>
      );
    }
   

5. useMemo() is a hook that you can use to memoize the result of a function. This can be useful when you have a complex calculation that you only want to run when its dependencies change.

    import React, { useMemo } from 'react';
   
    const MyComponent = ({ data }) => {
      const result = useMemo(() => {
        // complex calculation
      }, [data]);
   
      // render component
    };
   

6. useCallback() is a hook that you can use to memoize a function. This can be useful when you have a function that is passed as a prop to a child component, and you want to prevent unnecessary re-renders.

    const MyComponent = ({ onClick }) => {
      const handleClick = useCallback(() => {
        onClick();
      }, [onClick]);
   
      // render component
    };
   

   for more detail you can refer : this blog