useEffect21.js

function App() {
  const [index, setIndex] = useState(0);
  const notMemoized = () => {
    console.log("Rendered no callback");
  };

  const memoized = useCallback(() => console.log("Rendered callback"), []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <DemoEffect dep={notMemoized} />
      <DemoEffect dep={memoized} />
      <button onClick={() => setIndex(index + 1)}>Rerender</button>
    </div>
  );
}

function DemoEffect({ dep }) {
  useEffect(() => dep(), [dep]);
  return <div>Demo Effect</div>;
}