Introducción

Los hooks son una característica introducida en React 16.8 que permiten usar el estado y otras características de React sin escribir una clase. En React Native, los hooks son igualmente poderosos y permiten manejar el estado, los efectos secundarios y otros aspectos de los componentes de manera más sencilla y funcional.

Objetivos del Módulo

  • Comprender qué son los hooks y por qué son útiles.
  • Aprender a usar los hooks más comunes: useState, useEffect, useContext.
  • Implementar hooks personalizados para reutilizar lógica de estado.

¿Qué son los Hooks?

Los hooks son funciones que te permiten "enganchar" características de React como el estado y el ciclo de vida en componentes funcionales. Los hooks más comunes son:

  • useState: Permite agregar estado local a un componente funcional.
  • useEffect: Permite realizar efectos secundarios en componentes funcionales.
  • useContext: Permite acceder al contexto en componentes funcionales.

useState

El hook useState permite agregar estado local a un componente funcional. Aquí hay un ejemplo básico:

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

Explicación del Código

  1. Importación de useState: Importamos useState desde React.
  2. Declaración del Estado: const [count, setCount] = useState(0); inicializa el estado count a 0 y proporciona una función setCount para actualizarlo.
  3. Uso del Estado: count se muestra en un componente Text y se actualiza cuando se presiona el botón.

useEffect

El hook useEffect permite realizar efectos secundarios en componentes funcionales, como la obtención de datos, la suscripción a eventos o la manipulación del DOM.

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <View>
      <Text>Seconds: {seconds}</Text>
    </View>
  );
};

export default Timer;

Explicación del Código

  1. Importación de useEffect: Importamos useEffect desde React.
  2. Uso de useEffect: useEffect se ejecuta después de que el componente se monta. En este caso, establece un intervalo que incrementa seconds cada segundo.
  3. Limpieza: La función de limpieza return () => clearInterval(interval); se ejecuta cuando el componente se desmonta para limpiar el intervalo.

useContext

El hook useContext permite acceder al contexto en componentes funcionales. Aquí hay un ejemplo básico:

import React, { useContext } from 'react';
import { View, Text } from 'react-native';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return (
    <View>
      <Text>Current Theme: {theme}</Text>
    </View>
  );
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

export default App;

Explicación del Código

  1. Creación del Contexto: const ThemeContext = React.createContext('light'); crea un contexto con un valor predeterminado de 'light'.
  2. Uso de useContext: const theme = useContext(ThemeContext); obtiene el valor del contexto.
  3. Provisión del Contexto: ThemeContext.Provider proporciona el valor 'dark' al contexto.

Hooks Personalizados

Los hooks personalizados permiten encapsular y reutilizar lógica de estado. Aquí hay un ejemplo de un hook personalizado para manejar un contador:

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};

export default useCounter;

Uso del Hook Personalizado

import React from 'react';
import { View, Text, Button } from 'react-native';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
      <Button title="Reset" onPress={reset} />
    </View>
  );
};

export default CounterComponent;

Explicación del Código

  1. Creación del Hook Personalizado: useCounter encapsula la lógica del contador.
  2. Uso del Hook Personalizado: const { count, increment, decrement, reset } = useCounter(10); utiliza el hook personalizado en un componente funcional.

Ejercicios Prácticos

Ejercicio 1: Contador con useState

Instrucciones: Crea un componente que tenga dos botones, uno para incrementar y otro para decrementar un contador. Usa el hook useState.

Solución:

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
    </View>
  );
};

export default Counter;

Ejercicio 2: Temporizador con useEffect

Instrucciones: Crea un componente que muestre un temporizador que se incremente cada segundo. Usa el hook useEffect.

Solución:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <View>
      <Text>Seconds: {seconds}</Text>
    </View>
  );
};

export default Timer;

Ejercicio 3: Tema con useContext

Instrucciones: Crea un componente que use un contexto para cambiar el tema entre 'light' y 'dark'. Usa el hook useContext.

Solución:

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return (
    <View>
      <Text>Current Theme: {theme}</Text>
    </View>
  );
};

const App = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedComponent />
      <Button title="Toggle Theme" onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
    </ThemeContext.Provider>
  );
};

export default App;

Conclusión

En esta sección, hemos aprendido sobre los hooks en React Native, incluyendo useState, useEffect, y useContext. También hemos visto cómo crear hooks personalizados para encapsular y reutilizar lógica de estado. Los hooks son una herramienta poderosa que simplifica la gestión del estado y los efectos secundarios en componentes funcionales, haciendo que el código sea más limpio y fácil de entender.

Próximos Pasos

En el siguiente módulo, exploraremos la optimización del rendimiento en React Native, donde aprenderemos técnicas y estrategias para hacer que nuestras aplicaciones sean más rápidas y eficientes.

© Copyright 2024. Todos los derechos reservados