In this article, I provide some tips that can optimize or I can say improve the performance of your react app. Many times we got so many components on the same screen and eventually, that will take a lot of time to render.

Mostly I use pagination or virtualization for most apps. Pagination provides a good user experience and that’s the most needed thing while developing an app, but what if you have a case where you need to render many components on the same screen plus not giving up on the UX and app’s performance. Check this preview of the app. It has an App component and a Square component.

// App.jsx
import React, { useState } from "react";

import Card from "./components/square/square";

const data = Array(30000)
  .fill()
  .map((val, index) => {
    return { id: index, key: `square-${index}` };
  });

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      {data.map(({ key }) => (
        <Card
          key={key}
          onClick={() => {
            setCount(val => val + 1);
          }}
        />
      ))}
    </div>
  );
};

export default App;
// Square.jsx
import React from "react";

import "./square.css";

const Square = ({ onClick }) => {
  return <div className="square" onClick={onClick} />;
};

export default Square;

#programming #reactjs #coding #javascript