useCallback en React Native: Memoriza Funciones

¿Qué es useCallback y como usarlo en React Native?

El hook useCallback memoriza una función y la devuelve solo si las dependencias han cambiado, evitando que se recree en cada render. Es especialmente útil al pasar funciones como props a componentes hijos optimizados con React.memo, ya que ayuda a prevenir renders innecesarios.

⚙️ Sintaxis básica

Aquí tienes la estructura básica de useCallback:

jsx

const funcionMemorizada = useCallback(() => {
// lógica aquí
}, [dependencias]);

💡 Ejemplo básico

En este caso, se demuestra cómo usar useCallback para evitar la recreación de una función en cada renderizado.

jsx

import React, { useState, useCallback } from 'react';
import { View, Button, StyleSheet } from 'react-native';

const Contador = () => {
const [contador, setContador] = useState(0);

const incrementar = useCallback(() => {
  setContador(c => c + 1);
}, []);

return (
  <View style={styles.container}>
    <View style={styles.buttonWrapper}>
      <Button title={`Contador: ${contador}`} onPress={incrementar} color="#6200EE" />
    </View>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonWrapper: {
    width: 200,
    margin: 10,
    borderRadius: 5,
    overflow: 'hidden',
  },
});

export default Contador;

En la siguiente demostración, se utiliza el hook useCallback para memorizar la función incrementar, evitando su recreación en cada render. Es útil cuando se pasa la función a componentes hijos optimizados o para mejorar el rendimiento.

🎯 ¿Por qué usar `useCallback`?

useCallback es útil para evitar la recreación de funciones en cada renderizado, lo que puede ser costoso en términos de rendimiento, especialmente si pasas funciones a componentes hijos que dependen de ellas.

Evita renderizados innecesarios

Cuando pasas funciones a componentes hijos, cada vez que el componente padre se renderiza, las funciones se recrean. Esto puede causar que los componentes hijos también se rendericen innecesariamente. Esto es especialmente cierto si los componentes hijos están optimizados con React.memo, ya que React.memo solo evita el renderizado si las props no han cambiado.

🧠 Ejemplo con componente hijo

Aquí tienes un ejemplo donde useCallback se utiliza para evitar la recreación de una función que se pasa como prop a un componente hijo.

jsx

import React, { useCallback, useState, memo } from 'react';
import { View, Button, Text } from 'react-native';

const BotonMemo = memo(({ onPress }) => {
console.log('Render BotonMemo');
return <Button title="Click aquí" onPress={onPress} />;
});

const App = () => {
const [contador, setContador] = useState(0);

const handleClick = useCallback(() => {
  setContador(c => c + 1);
}, []);

return (
  <View>
    <Text>Contador: {contador}</Text>
    <BotonMemo onPress={handleClick} />
  </View>
);
};

export default App;

Cuándo usar el hook useCallback

Cuando pasas funciones como props a componentes hijos optimizados.
Si una función depende de valores específicos ([valor1, valor2]).
Cuando ves renderizados innecesarios en la app.

Cuándo NO usarlo

Si la función no se pasa como prop.
Si el rendimiento no está siendo afectado.
No lo uses “por si acaso”, solo si lo necesitas.

Tip

Combina useCallback con React.memo para crear componentes hijos ultra eficientes que solo se renderizan cuando es realmente necesario.