useCallback_usecase.js

import "./styles.css";
import { useCallback, useEffect, useState } from "react";

const SubComponent = ({ handleClick, isRed }) => {
  useEffect(() => {
    const interval = setInterval(() => {
      handleClick(!isRed);
    }, 1000);

    return () => clearInterval(interval);
  }, [handleClick, isRed]);

  return (
    <button style={{ backgroundColor: isRed && "red" }} onClick={handleClick}>
      Change my colour
    </button>
  );
};

const ParentComponent = () => {
  const [red, setRed] = useState(false);
  const [counter, setCount] = useState(0);

  const handleClick = useCallback((isRed) => setRed(isRed), [setRed]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(counter + 1);
    }, 100);

    return () => clearInterval(interval);
  }, [setCount, counter]);

  return (
    <div>
      {counter}
      <SubComponent isRed={red} handleClick={handleClick} />;
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <ParentComponent />
    </div>
  );
}