useCallback

El hook useCallback de React es útil para evitar que una función se vuelva a crear en cada renderizado. Esto es especialmente importante cuando se pasa una función como prop a un componente hijo, ya que si la función se crea en cada renderizado, el componente hijo se volverá a renderizar innecesariamente.

La sintaxis básica de useCallback es la siguiente:

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

Donde doSomething es la función que queremos memoizar y [a, b] es un arreglo de dependencias. Si alguna de las dependencias cambia, doSomething se volverá a crear. Si no cambian, se usará la versión memoizada de la función.

Aca tenes dos ejemplos sencillos de como usar useCallback con otros hooks:

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

En este ejemplo, la función increment y decrement se memoizan con useCallback y se les pasa como prop a los botones. Si no se memoizaran, se volverían a crear en cada renderizado.

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [text, setText] = useState('');

  const handleChange = useCallback((event) => {
    setText(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

En este ejemplo, la función handleChange se memoiza con useCallback y se le pasa como prop al input. Si no se memoizara, se volvería a crear en cada cambio de texto.

ATENTI

El useCallback es muy parecido al useMemo y de hecho los dos pueden funcionar en cualquiera de los ejemplos que estan aca. Sin embargo, useCallback se utiliza cuando tenemos que memoizar funciones, mientras que para cualquier otra cosa usamos useMemo.