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:
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:
A medida que tengas más experiencia, comprenderás mejor cuándo usar Hooks. Si no los necesitas, ¡NO los uses! ¡Cuanto menos mejor!
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 :)
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>
useState
Contador: Mostrar el número de Likes en la pantalla y poder aumentarlos o disminuirlos cuando el usuario haga clic,
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,
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",
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,
.
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
.
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.
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.
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.
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}
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í