20. Jakie są różnice między hookami `useCallback` i `useMemo` w React?

Hooki useCallback i useMemo w React są używane do optymalizacji wydajności komponentów funkcyjnych poprzez pamiętanie wartości między renderowaniami.

useCallback: Zwraca zapamiętaną wersję funkcji, która jest zmieniana tylko wtedy, gdy zmieniają się zależności. Jest używany do optymalizacji przekazywania funkcji do komponentów potomnych.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

useMemo: Zwraca zapamiętaną wartość, która jest ponownie obliczana tylko wtedy, gdy zmieniają się zależności. Jest używany do optymalizacji kosztownych obliczeń.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Różnice:

1. Zastosowanie: useCallback jest używany do zapamiętywania funkcji, podczas gdy useMemo jest używany do zapamiętywania wartości.
2. Składnia: useCallback(fn, deps) zwraca zapamiętaną wersję funkcji fn, useMemo(fn, deps) zwraca zapamiętaną wartość zwracaną przez funkcję fn.
3. Optymalizacja: useCallback pomaga zapobiegać ponownemu tworzeniu funkcji przy każdym renderowaniu, co jest przydatne przy przekazywaniu funkcji jako propsów. useMemo pomaga zapobiegać kosztownym obliczeniom przy każdym renderowaniu.

Przykład użycia obu hooków:

function MyComponent({ a, b }) {
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  return (
    <div>
      <ChildComponent onClick={memoizedCallback} value={memoizedValue} />
    </div>
  );
}