React Hooks: useEffect y useState

Clase 23 de 29 • Curso Práctico de React JS 2019

Resumen

En esta clase el profesor Oscar Barajas nos enseña qué es y cómo implementar React Hooks: una característica de React disponible a partir de la versión 16.8 que nos permite agregar estado y ciclo de vida a nuestros componentes creados como funciones.

React es una librería desarrollada por Facebook que nos ayuda a construir interfaces de usuario interactivas para todo tipo de aplicaciones: páginas web, aplicaciones móviles o de escritorio, experiencias de realidad virtual, entre otras.

Mariangelica Useche

Team Platzi•

Para los que quieran usar async/await en lugar de promesas, pude hacerlo modificando el archivo .babelrc de esta manera:

{
  &quot;presets&quot;: [
    [
      &quot;@babel/preset-env&quot;,
      {
        &quot;targets&quot;: {
          &quot;esmodules&quot;: true
        }
      } 
    ],
    &quot;@babel/preset-react&quot;
  ]
}

Por otro lado, useEffect no puede recibir una función asíncrona (porque no puede devolver una promesa), pero podemos solucionarlo de así:

  useEffect(() =&gt; {
    const fetchVideos = async () =&gt; {
      try {
        const response = await fetch(&quot;http://localhost:3000/initialState&quot;);
        const data = await response.json();
        return setVideos(data);
      } catch {
        console.log(error);
      }
    };
    fetchVideos();
  }, []);

Enrique Moreno

student•

Esta bien la información pero pienso que para este caso de uso es mejor promesas ya que son menos lineas de código 😁

Juan Jiménez

student•

Muchas gracias, está más fácil 😅

Luis Gerardo López Hernández

student•

En resumen useState nos devuelve un array con dos elementos, el primero es el valor de nuesro estado, la segunda es una funcion que nos permite actualizar ese valor. El argumento que le enviamos es por defecto el valor del estado(initial state).

El hook useEffect es una funcion que nos permite ejecutar codigo cuando se monta, desmonta o actualiza un componente. El primer argumento que recibe es una funcion que se ejecutará cuando React monte o actualice el componente, esta funcion puede devolver otra funcion que se ejecuta cuando el componente se desmonte. El segundo argumento es una array donde podemos especificar que propiedades deben cambiar para que Reacr vuelva a llamar nuestro código. Por defecto, cuando no enviamos un segundo argumento, React ejecutara useEffect cada vez que el componente o componente padre se actualice, sin enviamos un array vacio la funcion solo se ejecuta al montar o desmontar el componente.

Nestor Ruben Rodriguez Caro

student•

buen aporte! me ahorraste tomar notas. gracias.

Juan Jiménez

student•

Excelente, gracias

Seba Cardoso

student•

La última parte sobra. No estamos en youtube xD

Javier Fuentes Mora

teacher•

y con el ejemplo de pokemon podremos comprender mejor el useEffect

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function PokemonInfo({ name = "pikachu" }) {
  const [pokemonInfo, setPokemonInfo] = useState(null);

  useEffect(
    () => {
      fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
        .then(res => res.json())
        .then(pikachu => {
          console.log(pikachu);
          setPokemonInfo(pikachu);
        });
    },
    [name]
  );

  return (
    pokemonInfo && (
      <span>
        La pokeId es #{pokemonInfo.id} y su nombre es {pokemonInfo.name}
      </span>
    )
  );
}

ReactDOM.render(<PokemonInfo />, document.getElementById("app"));

Juan Jose Vega

student•

Nice, una explicación así no vendría mal.

Erick Fernando Guzmán Valerio

student•

A que se refiere la parte "pokemonInfo &&" en especial las doble &???

Beatriz Pérez Santana

student•

Más información sobre:

useEffect
useState

Nathaly Stefani Riaño Bejarano

student•

Excelente aporte, muchas gracias! PD: @midudev es el profesor del curso de React Avanzado

Eleonora Lester

student•

Acá están explicados tambien por @midudev https://www.youtube.com/watch?v=Ww_eT4H_k2c

Leisy Karina Algarra Fernandez

student•

En ocasiones me frustro por no entender el proceso por completo, pero se que cuando termine el proyecto, inicie otros y pase el tiempo adquiriré la experiencia necesaria para comprender todos estos conceptos.

rusbel bermúdez rivera

student•

No entendí la primera vez, pero leí la documentación: https://developer.mozilla.org/en-US/docs/Web/API/Body/json.

Sabemos que fetch retorna una promesa, pero body.json() también retorna otra promesa, aquí la sintaxis por si no entendiste a que iba tener data como parámetro.

response.json().then(data => {
  // do something with your data
});

Adriana Gómez Hinojosa

student•

Gracias! No recordaba ese detalle

Victor Garza

student•

Muchas gracias, me ayudaste con mi error!

Ezequiel

student•

El json que compartieron en gist tiene mal escrito initialState por si les aparece vacío 😆

Johan Manuel Perez Soto

student•

A mi me parecen mas fáciles de entender las Clases que los Hooks... vengo de Java :v

Gabriel De Andrade

student•

No hay problema! Pero te invito a que intentes entender los hooks pues son una forma más funcional y declarativa de ver el código a diferencia de la forma orientada a objetos e imperativa que tienen lenguajes como Java. Curso de Programación Funcional con Scala :D

Andrés Felipe Cano Sierra

student•

También vengo de java, y entender los hooks te hace pensar que es muchísimo más trabajo pensar en mantener un código simple, sencillo y limpio. PD: Me encanta Java ;)

David Salomon Baena Rubio

student•

Una de las ventajas que encontré es que el código es más mantenible y fácil de leer. Me encanta la idea de que un componente sea una función con un return. Eso me parece poderoso.

Alejandro González Reyes

student•

Si algo he aprendido es a experimentar. Retiré el arreglo vacío en el segundo parámetro de la función useEffect y en efecto, comenzó un ciclo infinito de peticiones asíncronas.

Cesar Augusto Barco de Gouveia

student•

Es lo mejor que puedes hacer, experimentar y probar cosas nuevas es lo que fortalecerá tu experiencia.

Angei Portuges

student•

Como hago para consultar que versión de React tengo instalado?

Cristofher Jumbo Jimenez

student•

Pimero dirigete a tu archivo "package.json" y en "Dependencies" o "DevDependencies", depende de como hallas instalado React, te aparecera React y su version. Si lo que quieres es cambiar de version entonces realizas el comando:

$ npm i react@16.8.0

Como ejemplo.

Leonardo de los angeles Espinoza Hernandez

student•

Hola @angei

Puedes ver el package.json de el proyecto que estas realizando y sale la versión junto el nombre de la dependencia.

Saludos :D

Sebastian Gutierrez Orjuela

student•

Hola, ¿Qué tecnología utilizaba react antes del react hooks?

Juan Pablo Celiz

student•

¡Hola! Se utilizaban componentes statefull, es decir, componentes tipo clases, de esa forma puedes tener el estado, acceder al lifecycle y todas las características que hoy utilizamos mediante hooks 💪

Eleazar Carreón Álvarez

student•

Usaba clases de javascript y hacia uso de los metodos de los ciclos de vida para dar instrucciones con el comportamiento del componente

Andrea Méndez Díaz

student•

Para saber cuál es su versión de React, en su package.json en la zona de "dependencies", está ->"react". y ahí pueden ver su versión.

Nicolás Cabrera

student•

React Hooks:

Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes de función. Los hooks no funcionan dentro de las clases — te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres).

React proporciona algunos Hooks incorporados como useState. También puedes crear tus propios Hooks para reutilizar el comportamiento con estado entre diferentes componentes. Primero veremos los Hooks incorporados.

Maria Elizabeth Minero Alvarenga

student•

UseState: Manejamos el estado. UseEffect: Se hace las transmisiones es decir, peticiones de una API

Karen Paola Diaz Duarte

student•

practica: no me aparece el obj como en el video y ya mire un poco en el array, hay muchas cosas en ingles, debería aprenderlo. Gracias!!

Steveen Echeverri Silva

student•

Los primeros mensajes que te aparecen en consola son simples advertencias de chrome, el error es que no se puede conectar atravez de fetch a tu fake API, verifica el nombre del JSON initialState

http://localhost:3000/initialState

Manuel Rivera

student•

Entonces React Hooks reemplaza a redux cuando se refiere a pasar props a componentes lejanos o mejor dicho manejar estado ?

Gabriel De Andrade

student•

Nope, React Hooks es solo una manera de agregarle el ciclo de vida y diferentes funcionalidades de componentes de clases, a componentes funcionales. Checa este blog: https://platzi.com/blog/redux-no-esta-muerto/ :D

Manuel Rivera

student•

Muchas gracias por la lectura, esta genial, toda la razón, por eso nunca paramos de aprender 🚀

Carlos Hernández Méndez

student•

Para ser honesto no entendí el porqué de muchas cosas en esta clase. Les recomiendo visitar la página oficial de React, ahí entendí cómo se usan los React Hooks.

Gabriel De Andrade

student•

En el Curso de React.js y en el Curso de React Avanzado se explican mucho mejor estos conceptos :D

Eleonora Lester

student•

Empieza a explicar hooks

React Hooks: useEffect y useState

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue