4Geeks logo
Sobre Nosotros

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Regresar a lecciones
Editar en Github

Hooks de React

¿Por qué hooks?

¿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, React Counter with Hooks Edita el contador usando useState y react hooks

  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, Construyendo un temporizador con react hooks Edita el reloj con React js

  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", Input controlado Edita el input controlado

  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, Modal usando react hooks Edita el componente de la Modal con hooks.

  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:

useEffect hook en el ciclo de vida del componente

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í