I have a React component called StatusBadge that I’m using in a large DataTable. This component accepts a status prop and updates its background color based on the value of status using useState and useEffect. Here is a simplified version of the component:

import { FC, useEffect, useState } from "react";

const StatusBadge:FC = ({ status }) => {
  const [BackgroundColor, setBackgroundColor] = useState("bg-white");

  useEffect(() => {
    switch (status) {
      case IN_PROGRESS:
        setBackgroundColor("bg-yellow-500");
        break;
      case VALIDATED:
        setBackgroundColor("bg-lime-500");
        break;
      case TO_REVIEW:
        setBackgroundColor("bg-orange-500");
    }
  }, [status]);

  return (
    <div
      className={BackgroundColor}
    >
      {status}
    </div>
  );
};

export default StatusBadge;

I am concerned about the performance implications when rendering a large number of these badges in a DataTable. Specifically:

How often will this component re-render? Given that the status prop may change, I’m worried about unnecessary re-renders impacting performance.

Is using useState and useEffect a good approach here? Would there be a more efficient way to handle this component, especially to minimize re-renders? Should I consider a different pattern or optimization technique for better performance?

Any advice or best practices on optimizing this component would be greatly appreciated!