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).
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😄
x2
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:
el profe Richard es que tiene como 1000 sacos con diferentes iconos o son medallitas intercambiables?? o_0
Yo creo que no son intercambiables...
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
Buen aporte
Gracias por el aporte!
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;
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;
functionBadgeDetails(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 ;
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;
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
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.
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.
Excelente aporte
Buen aporte friend!
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
tambien puedes importar directamente useState para no usar el React.useState()
No logro ver el impacto de este tema, espero en la siguiente sección entenderlo desde un contexto diferente
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.
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.
//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.
//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
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.
Excelente clase
Hooks y reglas para custom hooks
Cuando creen componentes funcionales que usan hooks para cambiar el estado, deben de incluir memo de React, este hace lo mismo que PureComponent.
¿Cuando hacen el update de este curso, para ya no usar clases?
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!
Excelente muchas gracias
Saludos, me perdì, por que en BadgeDetails.js se usa una FUNCTION en vez de usar CLASS ?
gracias
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.
Tengo una pregunta porque se me muestra rojo en las React Developer Tools. Así 👇
