Entendiendo useCallback en Reactjs

En React, una función declarada dentro de un componente se vuelve a crear en cada renderizado con una referencia diferente, lo que provoca problemas con useEffect y los componentes hijos. Un useEffect dependiente de esta función se ejecutará de nuevo en cada renderizado. De manera similar, los componentes hijos se volverán a renderizar innecesariamente. Para prevenir esto, podemos utilizar React.memo para cachear el componente hijo y asegurarnos de que solo se vuelva a renderizar si sus props cambian. Sin embargo, al pasar funciones como props, el componente hijo todavía se volverá a renderizar incluso si sus props no cambian. Esto se debe a que la referencia de la función cambia en cada renderizado, lo que hace que el componente hijo se vuelva a renderizar. Para solucionar esto, podemos utilizar el hook useCallback para cachear la referencia de la función entre renderizados. useCallback toma una función y un array de dependencias como argumentos, y devuelve una función cachada que solo cambia cuando las dependencias cambian. Al utilizar useCallback, podemos asegurarnos de que la función tenga una referencia estable y prevenir renderizados innecesarios. Debemos utilizar useCallback cuando tenemos manejadores de eventos, funciones llamadas dentro de useEffect o hooks personalizados que devuelven funciones.