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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!