Tips to make your React apps 10X faster!

Hi pals, in this blog I am gonna show you how to make your react apps much much faster than you'll ever think of. By following these practices, you can significantly enhance the performance of your React applications while ensuring scalability and maintainability. So let's dive straight onto some of the finest methods used in enterprises:

The magic of React.memo

Wrap functional components with React.memo to prevent unnecessary re-renders when props do not change.

import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Rendered Child');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount((p) => p + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
};

State management the right way✅

Lift State Up: Place state only where it is needed, avoiding redundant state in deeply nested components.

const Child = ({ onIncrement }) => (
  <button onClick={onIncrement}>Increment</button>
);

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount((p) => p + 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Child onIncrement={increment} />
    </div>
  );
};

Suspense with React.lazy, the code splitting

Dynamically import components to load them only when needed, reducing the initial bundle size.

import React, { Suspense } from 'react';
import Loader from './Loader';

const ProductsList = React.lazy(() => import('./ProductsList'));

const App = () => (
  <Suspense fallback={<Loader/>}>
    <ProductsList />
  </Suspense>
);

key is KEY!

Help React identify changes by making all the rendered array elements unique.

const ProductsList = ({ products }) => (
  <ul>
    {products.map((p) => (
      <li key={p.id}>{p.name}</li>
    ))}
  </ul>
);

Virtualization is your BIG friend

Whenever there is a case of rendering large amount of data, use virtulalization.

import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const Row = ({ index, style }) => (
  <div style={style}>Row {items[index]}</div>
);

const App = () => (
  <List
    height={200}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

Using above mentioned methods, your react app will become superfast and you'll stand out of the crowd, grabbing great opportunities. Thanks for reading. Do like this post if it helped you.