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

Horacio Herrera
InstructorHoracio Herrera
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 14 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today