Início / coding / Perguntas / 77554858
Accepted
DecPK
Asked: 2023-11-27 14:20:09 +0800 CST

Qual é a diferença entre useMemo e useCallback no caso de memorizar uma função

  • 772

Como sabemos, isso useMemoé usado para memorizar um valor e useCallbackpara memorizar uma função. Quando se trata de todos os valores, exceto função, então eu uso useMemoelse useCallback, mas me pergunto e se o valor for uma função, então memorizaria uma função usando useCallbacke useMemosão iguais ou não.

CODESANDBOX

function Diff(props) {
  const { value } = props;

  const memoizedFnUsingMemo = useMemo(() => () => value + value, [value]);
  const memoizedFnUsingCallback = useCallback(() => value + value, [value]);
  return (
    <>
      <h1>{memoizedFnUsingMemo()}</h1>
      <h1>{memoizedFnUsingCallback()}</h1>
    </>
  );
}

export default function App() {
  const [counter, setCounter] = useState(0);

  function changeCounter(change) {
    setCounter((c) => c + change);
  }

  return (
    <div>
      <h1>counter: {counter}</h1>
      <button onClick={() => changeCounter(1)}> increment </button>
      <button onClick={() => changeCounter(-1)}> decrement </button>

      <Diff value={counter} />
    </div>
  );
}
javascript

1 respostas

  1. Best Answer

    A documentação é bastante clara sobre isso. Ambos são equivalentes. Com useCallbackvocê não precisa escrever um wrapper extra e isso apenas fornece mais legibilidade do código.

    Dos documentos:

    Memoizar funções é comum o suficiente para que o React tenha um Hook integrado especificamente para isso. Coloque suas funções em useCallback em vez de useMemo para evitar ter que escrever uma função aninhada extra. Os dois exemplos acima são completamente equivalentes. O único benefício de useCallback é que ele permite evitar escrever uma função extra aninhada dentro dele. Não faz mais nada.

    Link

    • 1

relate perguntas