Hooks

Clase 35 de 37 • Curso de React.js 2019

Resumen

Las funciones no tienen un estado propio que manejar como ciclos de vida a los que deben suscribirse, mientras tanto las clases sí cuentan con ello.

React tiene un feature llamado Hooks que permite que las funciones también tengan features que solamente tienen las clases.

Hooks: Permiten a los componentes funcionales tener características que solo las clases tienen:

useState: Para manejo de estado.
useEffect: Para suscribir el componente a su ciclo de vida.
useReducer: Ejecutar un efecto basado en una acción.

Custom Hooks: Usamos los hooks fundamentales para crear nuevos hooks custom. Estos hooks irán en su propia función y su nombre comenzará con la palabra use. Otra de sus características es que no pueden ser ejecutados condicionalmente (if).

useState regresa un arreglo de dos argumentos.

Cristian Córdova

student•

Me hubiese encantado ver a Richard manejando estados con hooks y sobre todo enfocándose más en crear componentes con programación funcional. Espero que cuando hagan el update de este curso sea Richard también el profesor. Este curso y el son impresionantes😄

Bernardo Aguayo Ortega

student•

Daniel Saldarriaga

student•

yo creo que soy afortunado porque empecé a aprender React este año, entonces pasé muy rápido por componentes de clase y fui directamente a Hooks, que me parecen más simples y limpios.

Les dejo el repositorio de mi código para este curso, que fue hecho 100% con Hooks a modo de práctica:

https://github.com/danyel117/platzi-badges

Quedo atento a recomendaciones de buenas prácticas! aún me falta mucho por aprender!

Alfonso Camp

student•

0.5x Richarda esta ebrio :O !

Isaí Ramírez

student•

jajajaja XD

Cristhian Laurente López

student•

y yo viendolo de 1.75 todo el curso jajaja

Manuel Rivera

student•

No entendí bien la función de los Hooks, así que dejo un video que me ayudo mucho URL: https://www.youtube.com/watch?v=ISGCTngdp8c

Willy David Da Conceicao Lozada

student•

si amigo ricardo macario explica super bien

Grace Nikole Avarado

student•

Muchas gracias por compartir el video :3

Cristihan Albarran

student•

Por aqui les dejo un custom hook para que puedan manejar el state y onChange en los inputs!

import { useState } from 'react';

const useInput = defaultValues => {
  const [values, setValues] = useState(defaultValues);

  const onChangeHandler = e => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  return { values, onChangeHandler };
};

export default useInput;

/// use case

/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable jsx-a11y/label-has-associated-control */
import React from 'react';

import useInput from '../../hooks/useInput';
import Input from '../Input/Input';
import './BadgeForm.css';

const BadgeForm = () => {
  const { values, onChangeHandler } = useInput({
    name: '',
    lastName: '',
    email: '',
    jobTitle: '',
    twitter: '',
  });

  return (
    <div className="Badge__form">
      <h3 className="Badge__form-title">New attendant</h3>
      <form className="Badge__form-container" onSubmit={onSubmitHandler}>
        <div className="Badge__container-group">
          <label>First Name</label>
          <Input
            type="text"
            name="name"
            value={values.name}
            change={onChangeHandler}
          />
        </div>
        <div className="Badge__container-group">
          <label>Last Name</label>
          <Input
            type="text"
            name="lastName"
            value={values.lastName}
            change={onChangeHandler}
          />
        </div>
        <div className="Badge__container-group">
          <label>Email</label>
          <Input
            type="email"
            name="email"
            value={values.email}
            change={onChangeHandler}
          />
        </div>
        <div className="Badge__container-group">
          <label>Email</label>
          <Input
            type="text"
            name="jobTitle"
            value={values.jobTitle}
            change={onChangeHandler}
          />
        </div>
        <div className="Badge__container-group">
          <label>Twitter</label>
          <Input
            type="text"
            name="twitter"
            value={values.twitter}
            change={onChangeHandler}
          />
        </div>
        <button type="submit">Register</button>
      </form>
    </div>
  );
};

export default BadgeForm;

Henry Corredor

student•

el profe Richard es que tiene como 1000 sacos con diferentes iconos o son medallitas intercambiables?? o_0

Willy David Da Conceicao Lozada

student•

Yo creo que no son intercambiables...

Iván Darío Sánchez Jiménez

student•

Como ya vimos los hooks los utilizamos para darle estado a un componente funcional.

Viendo el ejemplo de la clase me quedó la duda del customHook que se creó ya que este pareciera que inicializa la variable cada vez que se ejecuta lo que debería dar siempre cero para este caso. Revisando la documentación oficial de React me parece importante las siguientes notas:

Normalmente, las variables “desaparecen” cuando se sale de la función, pero las variables de estado son conservadas por React
El único argumento para el Hook useState() es el estado inicial. Al contrario que en las clases, el estado no tiene porque ser un objeto. Podemos usar números o strings si es todo lo que necesitamos
El estado solamente se crea la primera vez que nuestro componente se renderiza. Durante los siguientes renderizados, useState nos da el estado actual.

Tomado de Usando el Hook de estado

Jhon Valderrama

student•

Buen aporte

Matías Wasiak

student•

Gracias por el aporte!

ANGEL DAVID SULBARAN CALDERON

student•

Hooks

Hasta ahora todos los componentes que hemos desarrollado son de dos tipos o son clases o son funciones, cuando son funciones es porque ese componente no tiene un estado propio que manejar no tiene ciclos de vida a los que se tiene que suscribir mientras que las clases si, cuando queremos hacer una petición a un api tal vez la comenzamos desde el componentDidMount también cambiamos estados de loading a true, lo apagamos cuando tenemos los datos los guardamos en el estado o si hubo un error también lo guardamos.

React tiene un feature que se llama hooks y va a permitir que las funciones también tengan features que solo tienen las clases a través de estas funciones llamadas hooks; Por ejemplo;

-useState: esta función la vamos a llamar cuando nuestro componente funcional quiera cambiar su estado.

-useEffect: nos va a permitir suscribirnos al ciclo de vida, queremos que algo ocurra cuando el componente se presenta por primera vez, lo tenemos, cuando haga el unmount, cuando se actualice. Todo eso.

-useReducer: nos va a permitir tomar acciones basados en otras acciones.

Estos son un conjunto limitado de todos los hooks que react tiene.

Los que no tiene, nosotros los inventamos y son llamados custom hooks. Hay una regla para usar los custom hooks y es que cualquier hook que nosotros escribamos, en su nombre, en el nombre de esta función también tiene que comenzar con la palabra “use” y la regla numero dos es que nunca lo pondemos ejecutar condicionalmente, esto quiere decir que no podemos hacer algo como “if” una condición, cierta o falsa y adentro en ese bloque hay un hook, no podemos, siempre que sigamos esas reglas todo bien.

Para probar realizaremos un contador dentro de los badgeDetails, sera un botón que se desplegara y cada vez que demos click aumentara el contador;

&lt;button onClick={()=&gt;{}}
className=&quot;btn btn-primary mr-4&quot;&gt;
                    Increase Count: {count}
                &lt;/button&gt;

Pare ello iniciamos con el botón el botón tendrá un función onClick que definiremos ahora mismo y tendrá un texto con un contador dentro;

function BadgeDetails(props) {
    const count = 3;

Alli arriba definimos count como 3 y verificamos en nuestro botón que este todo en orden, luego haremos al implementación de los hooks por lo que si queremos usarla, solo debemos usar React.useState(), esta función nos va a regresar 2 argumentos que los vamos a recibir dentro de 2 brackets cuadrados, es como si fuese un arreglo porque useState nos regresa exactamente eso, un arreglo ;

function BadgeDetails(props) {
    const [ count, setCount] = React.useState(0);
    const count = 3;

Si te fijas en los arreglos, estos básicamente son state y setState solo que cambian los nombres y el estado lo podemos inicializar de 0. Ahora nos dirigimos nuevamente al botón;

                &lt;button onClick={()=&gt;{
                    setCount(1);
                }} className=&quot;btn btn-primary mr-4&quot;&gt;
                    Increase Count: {count}
                &lt;/button&gt;

Creamos la función que se activara al dar click la cual tendrá un método setCount() el cual aumentara a 1 el count, probamos en nuestra webApp y por lo que podremos apreciar que el count sube a 1 al clickear el botón, pero esto no es lo que queremos. Realmente lo que buscamos es hacer un contador que cuando demos click, sume un numero mas por lo que realizaremos lo siguiente, colocaremos nuestra variable count y le diremos que aumentar +1

                &lt;button onClick={()=&gt;{
                    setCount(count + 1);
                }} className=&quot;btn btn-primary mr-4&quot;&gt;
                    Increase Count: {count}
                &lt;/button&gt;

De momento no estamos usando el setState de la clase sino que estamos usando el setState del Hook de useState, hagamos nuestro propio customHook;

function useIncreaseCount(max){
    const [ count, setCount ] = React.useState(0);

    if (count &gt; max){
        setCount(0);
    }

    return[count, setCount];

}

function BadgeDetails(props) {
    const [ count, setCount] = useIncreaseCount(4);

A nuestra función le pasamos un parámetro que sera el numero máximo y la vamos a usar desde nuestra constante abajo, a la cual le psamos como parámetro un máximo de 4.

function useIncreaseCount(max){
    const [ count, setCount ] = React.useState(0);

Recuperamos Tambien el count y setCount del useState y siempre lo inicializaremos en 0 y por ultimo en nuestra función también esta incluido que ;


    if (count &gt; max){
        setCount(0);
    }

    return[count, setCount];

}

Si el conteo es mayor que el máximo, vamos a regresar el valor a 0, pero vamos a terminar regresando siempre el arreglo de los valores de count y setCount y listo. Ya esta hecho nuestro contador.

Pilar Camargo Márquez

student•

Excelente aporte

Wandy Rafael Santana Evangelista

student•

Buen aporte friend!

Daniel Páez

student•

Los hooks permiten a los componentes funcionales tener caracterisitcas que solo las clases tienen además de encapsular lógica

Por ejemplo usar el estado (useState)

¡Los Hooks que no existan lo podemos crear nosotros!

Principios para programar un Hook

Debe nombrarlo con el prefijo use "useMyHook"
Un Hook nunca lo podemos ejecutar condicionalmente

Sintaxis para el Hook UseState


const [state, setState] = React.useState(initialState)

La documentación oficial que aún no he leido full pero quiero profundixar es esta:

https://reactjs.org/docs/hooks-intro.html

Yeinmy Daniela Morales Barrera

student•

tambien puedes importar directamente useState para no usar el React.useState()

Alejandro González Reyes

student•

No logro ver el impacto de este tema, espero en la siguiente sección entenderlo desde un contexto diferente

Julián Cipagauta

student•

Más arriba un estudiante explica la funcion de los hooks. Pero los mismos desarrolladores agregan que los implementaron para facilitar su funcionalidad. Puesto que a muchas personas se les dificultaba utilizar el sistema de clases. Principalmente a la hora de bind métodos. Por lo que, con los hooks buscan hacerlo más intuitivo y vaya que si lo logran. Los hooks vuelven a React mucho más facil.

Jimmy Buriticá Londoño

student•

Platzi tiene un curso exclusivo para Hooks, el cual espero tomar próximamente. https://platzi.com/clases/react-hooks/

Miguel Angel Morales Larriega

student•

Lo que hace a los hooks mejores es que pueden ser usados en funcional components y staless functional components cosa que antes no se podía. con su sintaxis de useState y useEffect puede traer estados y ciclo de vida respectivamente en componentes que no son class component, caso que no sucedía con la versión anterior.

UseState reemplazaría a lo que se conoce como estado y useEffect reemplazaría a componentDidMount y componentDidUdate a la vez.

Miguel Angel Morales Larriega

student•

//Para explicar un poco más sobre los hooks: //Lo primero que al igual que Fragment y Component se puede importar al //momento de importar React:

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

function BadgeDetails(props){ const [state, setState] = useState(' '); }

//Como vieron ya no era necesario escribir React.useState, si huberan 5 o más de esos hooks sería mucho más código. //Lo segundo y más importante es explicar porque le di esos valores: const [state, setState] = useState(' '); // el primer valor del corchete vendría a ser el state que todos conocemos, el //segundo es el cambio en el state como tambien lo conocemos con el //nombre de setState, y en el otro miembro está el state inicializado como //vacio: InitialState la cual se llama useState y toma en ese caso un string //vacío.

//Ahora o podría hacerlo así para no confundirme:

const [nombre, guardarNombre]= useState(' '); const [apellido, guardarApellido]= useState(' '); const [edad, guardarEdad]= useState(' '); const [datos, guardarDatos]= useState([ ]); const [salon guardarSalon]= useState({ }); const [error, guardarError]= useState(false);

//como verán inicializo cada uno de mis states como vacio en caso de los string, como arreglo vacio en caso de un arreglo, como array vacio en caso de arrays y como false en caso de errores.

//Si quisiera cambiar los valores de cada uno de ellos tomaría los valores del setState como siempre:

guardarNombre('juan'); guardarError(true);

//etc. //Espero haberlos ayudado

Mateo Santiago Zapata Maldonado

student•

Ademas veo una ventaja en rendimiento, ya que cuando extendemos una clase heredamos muchas cosas que aveces no necesitamos, con esto yo solo hare un pick de lo que necesite y punto.

Johan García Trejo

student•

Excelente clase

Pablo Coronel

student•

Hooks y reglas para custom hooks

Andrés Mauricio Montoya Sánchez

student•

Cuando creen componentes funcionales que usan hooks para cambiar el estado, deben de incluir memo de React, este hace lo mismo que PureComponent.

Vane Sora

student•

Puedes desarrollarlo más porfavor

Andrés Mauricio Montoya Sánchez

student•

@vanesora en la documentación lo mencionan https://reactjs.org/docs/react-api.html#components

Aaron Contreras Garibay

student•

¿Cuando hacen el update de este curso, para ya no usar clases?

Francisco Ponce

student•

Hola Aaron,

Me parece que este es un curso de introducción de lo que se solía utilizar en React cuando salió, aunque a mi tampoco me gustan las clases, creo que es necesario entenderlas para poder leer código ajeno al nuestro.

Tenemos un curso que hace el salto para utilizar componentes funcionales de React, y ese es el Curso Profesional de React Hooks, es muy completo, incluso integramos una tienda en línea con la API de Paypal y la de Google Maps!

Aaron Contreras Garibay

student•

Excelente muchas gracias

Johan Quijano

student•

Saludos, me perdì, por que en BadgeDetails.js se usa una FUNCTION en vez de usar CLASS ? gracias

Kevin J. Zea Alvarado

student•

En la clase en la que se crea App.js, en el minuto 2:40, menciona porqué.

Dice que es útil usar function() para hacer los componentes cuando no hay otro método más que render() o cuando no tiene State.

Willy David Da Conceicao Lozada

student•

Tengo una pregunta porque se me muestra rojo en las React Developer Tools. Así 👇 ![](

Manuel Ojeda

student•

Se muestra con tres diferentes etapas:

Rojo: La página está en modo desarrollo
Amarillo: Está en producción usando una build desactualizada
Azul: Cuando es de producción con una build actualizada.

Willy David Da Conceicao Lozada

student•

Ok amigo muchas gracias por la info como hago para cambiar de etapas?

Javier Romero

student•

la verdad no se como voy a aprender a programar con tanto código que el profesor hace en su curso, yo vengo haciendo cursos básicos de Js y los fundamentos y aun así no entiendo toda esa lógica, es muy difícil programar así, me siento frustrado

Platzi Team

student•

Si es bastante info la que nos da en este curso, pero no te desanimes compañero practica con los ejemplos y lee la documentacion entederas mas facil lo que hizo el profe 💪💪

Pedro Alejandro Silva Perez

student•

¡Hola! les comparto el resumen de la clase que hice, espero que a alguien lo ayude. Estuvo genial la clase pero igual tuve que verla un par de veces mas xD. Hooks - notion

Hooks

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión