Guías Técnicas

Componentes con Efectos en React Native: Uso de useEffect

  ¿Qué es useEffect y para qué se usa en React Native?

El hook useEffect en React Native se utiliza para manejar efectos secundarios, como la actualización de datos, suscripción a eventos, o manipulaciones del DOM después de que un componente se haya renderizado o actualizado.

Estructura Básica de useEffect

El hook useEffect acepta dos parámetros:

  1. Una función de efecto (efecto secundario) que se ejecutará después de cada renderizado.
  2. Un array de dependencias opcional, que determina cuándo se debe ejecutar el efecto.
jsx 
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';

function Temporizador() {
  const [tiempo, setTiempo] = useState(0);

  // Efecto que se ejecuta cuando el componente se renderiza
  useEffect(() => {
  const interval = setInterval(() => {
      setTiempo(prevTime => prevTime + 1);
  }, 1000);

  // Limpiar el intervalo cuando el componente se desmonte
  return () => clearInterval(interval);
  }, []); // El array vacío [] indica que el efecto solo se ejecuta una vez

  return (
  <View style={ styles.container}>
      <Text style={ styles.title}>Tiempo en segundo es: </Text>
      <Text style={ styles.time}>{tiempo}</Text>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
  },
  title: {
      fontSize: 18,
      marginBottom: 20,
      fontWeight: 'bold',
  },
  time: {
      fontSize: 50,
      color: "orange",
      marginBottom: 20,
      fontWeight: 'bold',
  },
});

export default Temporizador;

useEffect en React Native con Temporizador

A continuación, el hook useEffect se utiliza para iniciar un temporizador que actualiza el estado tiempo cada segundo. La función de efecto se ejecuta una sola vez cuando el componente se monta, y se limpia cuando el componente se desmonta para evitar que el intervalo siga ejecutándose.


useEffect en React Native con Contador

Este fragmento de código ilustra como usar el hook useEffect en React Native para detectar y responder a cambios en una variable de estado.

  Importante

Si aún tienes dudas sobre cómo trabajar con el hook useEffect, te recomiendo revisar el recurso adicional Ejemplos de Hooks, donde encontrarás ejemplos prácticos que te ayudarán a dominarlo correctamente.

  Resumen

El hook useEffect es esencial en React Native para manejar efectos secundarios como la actualización de datos, la suscripción a eventos o cualquier operación que necesite ejecutarse después de un renderizado. Es crucial para manejar tareas como peticiones a APIs, temporizadores y efectos de limpieza.

Recuerda que el segundo parámetro, el array de dependencias, controla cuándo se ejecuta el efecto, y si está vacío ([]), el efecto solo se ejecutará una vez, al montar el componente.