El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

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

Importación de useState: Importamos useState desde React.
Declaración del Estado: const [count, setCount] = useState(0); inicializa el estado count a 0 y proporciona una función setCount para actualizarlo.
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

Importación de useEffect: Importamos useEffect desde React.
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.
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

Creación del Contexto: const ThemeContext = React.createContext('light'); crea un contexto con un valor predeterminado de 'light'.
Uso de useContext: const theme = useContext(ThemeContext); obtiene el valor del contexto.
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

Creación del Hook Personalizado: useCounter encapsula la lógica del contador.
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.

Hooks en React Native

Introducción

Objetivos del Módulo

¿Qué son los Hooks?

useState

Explicación del Código

useEffect

Explicación del Código

useContext

Explicación del Código

Hooks Personalizados

Uso del Hook Personalizado

Explicación del Código

Ejercicios Prácticos

Ejercicio 1: Contador con useState

Ejercicio 2: Temporizador con useEffect

Ejercicio 3: Tema con useContext

Conclusión

Próximos Pasos

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real