Name: Comparte Lógica en React con un Hook Propio (Custom Hook)
Uploaded: 2020-09-06T09:57:59-05:00
Description: En este video, aprenderemos cómo compartir lógica en tu aplicación creando un custom hook. Veremos cómo movemos la lógica de estado de un componente a un hook propio (custom hook). Creando hooks propios es la mejor manera de compartir lógica entre los componentes de tu aplicación, y como son simples funciones JavaScript, nos dan mucha flexibilidad en cuanto a inputs y outputs se trata.

En este video, aprenderemos cómo compartir lógica en tu aplicación creando un custom hook. Veremos cómo movemos la lógica de estado de un componente a un hook propio (custom hook). Creando hooks propios es la mejor manera de compartir lógica entre los componentes de tu aplicación, y como son simples funciones JavaScript, nos dan mucha flexibilidad en cuanto a inputs y outputs se trata.

https://app.egghead.io/api/v1/lessons/react-comparte-logica-en-react-con-un-hook-propio-custom-hook/subtitles

Comparte Lógica en React con un Hook Propio (Custom Hook)

Horacio Herrera: [0:00] En nuestro componente settings vamos a crear una función que se llame useUser(). Cogemos toda la lógica de nuestro componente settings y la pegamos dentro de nuestra nueva función. Además de eso también vamos a devolver nuestro usuario.

[0:15] Ahora lo que tenemos que hacer es llamar a esta función en nuestro componente settings. Como vemos todo sigue como antes. Si cambiamos aquí a Pablo vemos que en nuestro componente settings actualiza con el nuevo dato.

[0:29] Hemos construido nuestro primer hook propio, o custom hook, donde hemos encapsulado lógica de nuestro componente dentro de esta función en la cual podemos utilizar en cualquier componente React en nuestra aplicación.

[0:42] En nuestro hook propio tenemos bastante libertad en lo que podamos hacer y devolver. En este caso estamos devolviendo el usuario directamente, pero podríamos devolver un objeto con el usuario y también la manera de cambiar el usuario.

[0:57] Entonces, esto tendremos que cambiarlo también nuestro componente y setUser es con u mayúscula, no minúscula. Vemos que todo sigue a su normalidad. Si volvemos a cambiar esto a John, vemos que seguimos obteniendo todos los datos de este componente settings.

[1:12] En resumen, hemos cogido toda la lógica que teníamos dentro de nuestro componente settings y la hemos puesto dentro de una función nueva que se llama useUser. De esta función, devolvemos los datos que necesitamos de esta lógica para poder utilizarlo nuevamente en nuestro componente settings. Llamando esta función nos devuelve el usuario que podemos pintar en nuestro componente.

Comparte Lógica en React con un Hook Propio (Custom Hook)

Share this video with your friends