Hooks de React

¿Por qué hooks?

Los componentes funcionales que pasan props son sorprendentes porque son simples, tienen un rendimiento rápido y requieren de poco código, pero intentar mantener todos los componentes encapsulados puede volverse un infierno. Por otro lado, los componentes de clase a menudo son confusos, tanto para los humanos como para la máquinas, y no suelen entregar una experiencia positiva al desarrollador. Los Hooks proveen una forma para usar los métodos del state y del ciclo de vida con muy poco código, entregándole super poderes a tus componentes:

¿Mis componentes necesitan superpoderes?

En general, las props son suficiente para crear un componente sorprendente, pero a veces es necesario más. Estos son algunos ejemplos realmente útiles para saber cuándo usar hooks:

1. Si quieres abrir o cerrar un modal o diálogo, usa el hook useState.
2. Si quieres obtener algunos datos solo al comienzo de la ejecución del programa, usa el hook useEffect.
3. Si quieres compartir información dentro de todos los componentes, usa el hook useContext.

A medida que tengas más experiencia, comprenderás mejor cuándo usar Hooks. Si no los necesitas, ¡NO los uses! ¡Cuanto menos mejor!

Todas las aplicaciones necesitan al menos un useState y un useEffect. Para usar hooks, PRIMERO DEBEMOS IMPORTARLOS al inicio de nuestro archivo. Por ejemplo si necesitáramos usar un useState, haríamos lo siguiente:

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

Y si quisieramos usar también el useEffect, lo incluiríamos así:

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

Ahora aprendamos a utilizarlos :)

El hook useState:

El hook más importante, ¡casi inevitable! El useState te ayuda a inicializar una variable y cambiar su valor con el tiempo sin recurrir a los componentes padres.

1//      Nombre de variable      setter name            valor inicial (cualquier valor)
2const [ mySuperVariable, mySuperFunction ] = useState(          null        );

Básicamente, mySuperVariable se inicializa con null y luego tu podrás restablecer su valor llamando a mySuperFunction de esta forma:

1// aqui estamos restableciendo el valor de mySuperVariable = 'hello' cuando el usuario hace clic en un botón
2<button onClick={() => mySuperFunction('hello')}></button>

Posible usos para el hook useState

1. Contador: Mostrar el número de Likes en la pantalla y poder aumentarlos o disminuirlos cuando el usuario haga clic,

2. Temporizador/Reloj: Tú puedes usar la hora del sistema para mostrar la hora actual en la pantalla, pero como la hora cambia todo el tiempo, la guardamos en una variable del state,

3. Mostrar una entrada en la pantalla: La mejor práctica para obtener el contenido de cualquier entrada es almacenarla en una variable del state, esto se denomina "Entrada controlada",

4. Apertura/cierre (mostrar / ocultar): un caso típico es tener un diálogo que hace una pregunta o tal vez algún formulario de suscripción a un boletín, .

5. Miles de otras posibles aplicaciones.

Vamos a explicar este hook con una pequeña ventana modal de ejemplo, aquí está el código:

Para implementar un "Ventana Modal", hemos decidido crear una variable hook llamada opened que es true si la ventana modal debe mostrarse en pantalla.

Si una persona hace clic en "close", simplemente usamos la función hook setOpened para cambiar el valor de opened a false.

El hook useEffect:

El UseEffect es otro hook increíble que probablemente tendrás que usar en casi todas las aplicaciones de React cuando el componente se renderice.

1) Después de que el componente se procesa por primera vez (como el antiguo componentDidMount).

1const MyComponent = () => {
2    useEffect(() =>
3
4        // el código que pongas aquí se ejecutará solo después de la primera vez que el componente se renderice
5
6    , []);// <------ AQUI HAY UN ARRAY VACÏO
7    return <Some HTML>;
8}

☝️ Considera al [] como el segundo parámetro de useEffect.

2) Cada vez (o algunas veces) después de que el componente se vuelva a renderizar.

1const MyComponent = () => {
2    useEffect(() =>
3        // esto se ejecutará cada vez que el componente se vuelva a renderizar
4        if(some_condition){
5            //esto solo de ejecutará si some_condition es true
6        }
7    );// <------ ¡TEN EN CUENTA QUE EL ARRAY VACÍO SE HA IDO!
8
9    return <Some HTML>;
10}

☝️ Este useEffect no tiene un array vacío [] como segundo parámetro.

3) Cuando el componente se de o dejará de renderizarse (como la buena y vieja función componentWillUnmount).

1const MyComponent = () => {
2    useEffect(() =>
3        // esto se ejecutará solo la primera vez que el componente se renderice.
4        return () => {
5            // esto se ejecutará justo antes de que el componente se desmonte
6        }
7    ,[]);// <------ ¡TEN EN CUENTA EL ARREGLO VACÍO!
8
9    return <Some HTML>;
10}

Construyendo un Todo's List Usando solo los Hooks useState y useEffect

Por ejemplo, digamos que estamos construyendo una lista de tareas y tenemos que cargar la lista de tareas desde una API. Tendremos que buscar (fetch) la información, justo después de que el componente se renderice por primera vez:

1const Todos = (props) => {
2    //inicializa la variable de tareas en un array vacío y enlázala a la función setTasks
3    const [ tasks, setTasks] = useState([]);
4
5    //Esta función useEffect se ejecutará solo una vez, cuando el componente finalmente se cargue por primera vez.
6    useEffect(() =>
7        // aquí busco mis todos de la API
8        fetch('https://assets.breatheco.de/apis/fake/todos/user/alesanchezr')
9            .then(r => r.json())
10            .then(data => setTasks(data)) // aqui reseteo la variable tasks con los datos entrantes.
11    , []);
12
13    return <ul>{tasks.map(t => <li>{t.label}</li>)}</ul>;
14}

☝️ Revisa el código en profundidad y la demo en vivo haciendo clic aquí