Name: Reutiliza tu Custom Hook en tu Aplicación React
Uploaded: 2020-09-08T18:36:34-05:00
Description: En este video, veremos como podemos reutilizar nuestros custom Hooks en otros componentes de nuestra Aplicación. Primero crearemos un nuevo archivo donde pegaremos nuestro hook, y hacer mas simple la importación del mismo en todos nuestros componentes. Creando tus Custom Hooks es la manera mas organizada de compartir lógica dentro de tus aplicaciones React.

En este video, veremos como podemos reutilizar nuestros custom Hooks en otros componentes de nuestra Aplicación. Primero crearemos un nuevo archivo donde pegaremos nuestro hook, y hacer mas simple la importación del mismo en todos nuestros componentes. Creando tus Custom Hooks es la manera mas organizada de compartir lógica dentro de tus aplicaciones React.

https://app.egghead.io/api/v1/lessons/react-reutiliza-tu-custom-hook-en-tu-aplicacion-react/subtitles

Reutiliza tu Custom Hook en tu Aplicación React

Horacio Herrera: [0:00] Primero cortemos nuestro custom hook del componente Settings e importemos useUser del archivo ./hooks. Nos sale un error porque el archivo hooks.js no existe, así que vamos a crearlo.

[0:17] Dentro de este archivo vamos a importar React from 'react' y pegamos nuestro custom hook. Es muy importante que exportemos esta función. Vemos que nuestro componente Settings sigue funcionando. Si cambiamos el nombre por Horacio, vemos que recibimos la información correctamente. Volvamos a poner John.

[0:37] Ahora vayamos a nuestro componente Topbar que está siendo renderizado en nuestro componente app e implementemos nuestro custom hook. Importamos { useUser } from './hooks' y cambiamos la asignación de user a la llamada a nuestro custom hook. Tenemos que devolver un objeto y vemos que ahora tenemos los valores de nuestro custom hook en el Topbar.

[1:02] Nuevamente si cambiamos el apellido vemos que se actualiza tanto en el Topbar como en nuestro componente Settings.

[1:10] En resumen, hemos copiado nuestro custom hook a un archivo nuevo que se llama hooks.js. Hemos borrado nuestro custom hook de Settings y lo hemos importado del archivo hooks.js y hemos implementado también nuestro custom hooks en el Topbar.

Reutiliza tu Custom Hook en tu Aplicación React

Share this video with your friends