UseCallbackExample

useCallbackExample.tsx

// demo https://codesandbox.io/s/divine-sunset-tppu7o

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

const Button = ({ onClick }: { onClick: () => void }) => {
  useEffect(() => {
    console.log("FILHO: mudou");
  });

  useEffect(() => {
    console.log("FILHO: FUNÇÃO mudou");
  }, [onClick]);

  return <button onClick={onClick}>Mudar</button>;
};

export default function UseCallbackExample() {
  const [count, setCount] = useState(0);

  /**
   * Quando algum estado muda efetua um Rerender no componente
   * todas as funções e children são recriadas em memoria
   * O useCallback mantém a referência da função, mesmo com tem rerender
   */
  const onClick = useCallback(() => {
    setCount((oldState) => oldState + 1);
  }, []);

  useEffect(() => {
    console.log("PAI: mudou");
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{count}</h2>
      <Button onClick={onClick} />
    </div>
  );
}