DEV Community

Lucky Jain
Lucky Jain

Posted on

1 1 1 1 1

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay