Introducción a los Hooks

Los Hooks son una característica relativamente nueva en React (introducida en la versión 16.8) que permite usar el estado y otras características de React sin escribir una clase. Los Hooks son funciones que permiten "engancharse" a las características de React desde componentes funcionales.

¿Por qué usar Hooks?

Simplicidad: Los componentes funcionales son más simples y fáciles de entender que los componentes de clase.
Reutilización de lógica de estado: Los Hooks permiten reutilizar la lógica de estado entre componentes sin cambiar la jerarquía de componentes.
Separación de preocupaciones: Los Hooks permiten separar la lógica relacionada con el estado y los efectos secundarios de la lógica de renderizado.

Reglas de los Hooks

Antes de profundizar en los Hooks, es importante conocer las reglas básicas que deben seguirse:

Llamar Hooks solo en el nivel superior: No llames Hooks dentro de bucles, condiciones o funciones anidadas. Siempre usa Hooks en el nivel superior de tu función React.
Llamar Hooks solo desde funciones de React: Llama Hooks solo desde componentes funcionales de React o desde tus propios Hooks personalizados.

Hook useState

El Hook useState es el más básico y se utiliza para añadir estado a un componente funcional.

Ejemplo Básico

import React, { useState } from 'react';

function Contador() {
  // Declara una nueva variable de estado, que llamaremos "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

export default Contador;

Explicación del Código

Importación de useState: useState se importa desde React.
Declaración del estado: const [count, setCount] = useState(0); declara una variable de estado count y una función para actualizarla setCount. useState(0) inicializa el estado con el valor 0.
Uso del estado: count se usa en el JSX para mostrar el número de clics.
Actualización del estado: setCount(count + 1) se llama cuando se hace clic en el botón, incrementando el valor de count.

Hook useEffect

El Hook useEffect se utiliza para manejar efectos secundarios en componentes funcionales, como la obtención de datos, la suscripción a servicios o la manipulación del DOM.

Ejemplo Básico

import React, { useState, useEffect } from 'react';

function EjemploUseEffect() {
  const [count, setCount] = useState(0);

  // Similar a componentDidMount y componentDidUpdate:
  useEffect(() => {
    // Actualiza el título del documento usando la API del navegador
    document.title = `Has hecho clic ${count} veces`;
  });

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

export default EjemploUseEffect;

Explicación del Código

Importación de useEffect: useEffect se importa desde React.
Uso de useEffect: useEffect se llama dentro del componente funcional. La función pasada a useEffect se ejecuta después de que el renderizado se haya completado.
Efecto secundario: En este caso, el efecto secundario es actualizar el título del documento cada vez que count cambia.

Ejercicio Práctico

Ejercicio

Crea un componente funcional llamado Reloj que muestre la hora actual y se actualice cada segundo.

Solución

import React, { useState, useEffect } from 'react';

function Reloj() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timerID);
  }, []);

  return (
    <div>
      <h2>La hora actual es {time.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Reloj;

Explicación del Código

Estado inicial: const [time, setTime] = useState(new Date()); inicializa el estado con la hora actual.
Efecto secundario: useEffect se usa para configurar un intervalo que actualiza la hora cada segundo.
Limpieza: La función de limpieza return () => clearInterval(timerID); se asegura de que el intervalo se limpie cuando el componente se desmonte.

Conclusión

En esta sección, hemos introducido los Hooks useState y useEffect, que son fundamentales para manejar el estado y los efectos secundarios en componentes funcionales de React. Estos Hooks permiten escribir componentes más simples y reutilizables. En el próximo módulo, profundizaremos en otros Hooks importantes y cómo pueden mejorar aún más tus aplicaciones React.

Hooks: Introducción y Uso Básico

Introducción a los Hooks

¿Por qué usar Hooks?

Reglas de los Hooks

Hook useState

Ejemplo Básico

Explicación del Código

Hook useEffect

Ejemplo Básico

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

Explicación del Código

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa