Custom Hooks

Jorman Urbina

student•

Siento que es una explicacion de como hiciste la aplicacion en vez de enfocarse en los conceptos y usos de react. creo que varias de las clases van enfocadas a la app TODOs y no a react como tal. asi va hasta ahora para mi. espero que no sea asi para todos.

Yenny Paola Porras Rueda

student•

El curso anterior https://platzi.com/cursos/react/ te complementa mejor los conceptos, mas que seguir un paso a paso como en este curso pasa aveces.

Jorman Urbina

student•

ese enlace me llevo al mismo curso, igual juan es un profesor increible, solo que en mi caso estaria interesante tener un curso conceptual de vez en cuando, se entiende que los practicos suman , pero los conceptos son bases importantes. al menos para mi , juan te quiero, multiplicate por 1000.

Christopher Andrés Guano Valencia

student•

🔵Evita las dependencias dentro de tus componentes con Custom Hooks

Cuando estás utilizando paquetes dentro de React, por ejemplo, el paquete inventado QueryPlatzi, evita importarlo en cada componente, a menos que sea necesario.

import { useQueryPlatzi } from 'query-platzi'

function Component () {	
	const query = useQueryPlatzi()
	
	return ...
}

. En su lugar, crea un custom Hook para abstraer la funcionalidad del paquete. .

// archivo-> hooks/useQueryApp.js
import { useQueryPlatzi } from 'query-platzi'

export function useQueryApp () {	
	return useQueryPlatzi
}

. Aunque parezca algo insignificante, es realmente poderoso, ya que, si en un futuro necesitas cambiar el paquete QueryPlatzi por otro, solo lo harás en un solo sitio. De esta forma el componente se mantiene lo más declarativo posible. .

import { useQueryApp } from '@hooks/useQueryApp'

function Component () {	
	const query = useQueryApp() 
	//Solo realizo una función, utilizar la query
	
	return ...
}

. Finalmente, según la documentación de React, si observas un useEffect muy usado o con mucha lógica, lo más seguro es que puedas abstraerlo en un custom Hook. . Fuente: Reutilización de lógica utlizando Hooks personalizados

JUAN JOSE HERNANDEZ MUÑOZ

student•

HOOKS

Los hooks son funciones que puedes llamar dentro de componentes funcionales para agregar y manipular características de React, como el estado, el ciclo de vida y los efectos secundarios. Los hooks más comunes son useState, useEffect y useContext, pero también puedes crear tus propios hooks personalizados.

Los Hooks son más restrictivos que las funciones regulares. Solo puedes llamar a los Hooks en el primer nivel de tus componentes (u otros Hooks). Si quisieras utilizar useState en una condicional o en un bucle, extrae un nuevo componente y ponlo ahí.

CUSTOM HOOKS

React viene con varios Hooks integrados como useState, useContext y useEffect. A veces, desearás que haya un Hook para algún propósito más específico: por ejemplo, para obtener datos, para mantener un seguimiento de si un usuario está conectado o para conectarse a una sala de chat. Es posible que no encuentres estos Hooks en React, pero puedes crear tus propios Hooks para las necesidades de tu aplicación.

Permite: compartir logica entre componentes y tener el codigo del componente como tal mucho mas limpio
Al abstraer usando Hooks nos facilita la lectura del codigo, teniendo las partes que le competen al componente en una seccion y las partes de la funcionalidad del hook en otra diferente.
Cuando vale la pena implementarlo? Bajo nuestro criterio cuando veamos necesario abstraer una logica.

Jonathan Guidi

student•

Comprendo la utilidad de Custom Hooks para encapsular codigo y hacer más legible nuestra app.. . Pero me resulto super enredado y confuso, sobre que parámetros pasar, como pasarlos y demás.. Espero que con practica lo entienda mas fácilmente!

Yago Mateos

student•

a mi lo mismo super confuso , tendre que verlo varias veces

Horus Sinhue Camacho Avila

student•

Un pequeño detalle con los Hooks personalizados que estoy casi seguro mencionó Juan David pero que me parece que es muy necesario recordar, cuando exportamos los valores que queramos de nuestro Hook si lo hacemo como un array[] podremos al momento de ejecutar el hook dentro del componente renombrar los valores que vienen, sin embargo también se pueden exportar en un objeto{} sin embargo eso le quita dinamismo que en el caso de nuestro Hook para manipular localStorage no sería idóneo ya que si por ejemplo queremos persistir el estado de un usuario que hizo login por ejemplo tendríamos que hacerlo siempre con el nombre de la variable item como se exporto (si se hubiese exportado como objeto y no como array) . Es por eso que al exportarlo como Array y permitir renombrar los elementos podemos hacerlo coincidir más explícitamente lo que estamos guardando en localStorage. Tal vez sea un comentario muy resbucado pero de verdad esa pequeña diferencia puede hacer un gran cambio en como entendemos la lógica de negocio de nuestros componentes.

Juan Castro

teacher•

Muy buen comentario Solo una pequeña aclaración También podemos cambiar el nombre de los valores que recibimos en custom hooks cuando los retornamos en forma de objetos

Por ejemplo, así se renombraría el valor item como todos viniendo de customHook:

const {
 item: todos
} = customHook();

Horus Sinhue Camacho Avila

student•

Cierto!!! Muchísimas gracias por la aclaración!!!! Y muchísimas felicidades por el curso, sirve muchísimo para reforzar desde las bases lo medular de React.

Sebastián Peña

student•

No se si soy solamente yo al que le pasa, pero el uso de los custom hooks es para extraer funcionalidades y mantener nuestros componentes más simplificados, pero siento que no es el caso en esta explicación, siento que quedo mas enredado que antes, 🙁😕 No puedo entenderlo bien.

Fernando Francisco López Mauro

student•

jejeje, creo que falto moverlo a un archivo aparte :D y asi queda mas limpio y entendible

Emiliano Kuyen Arturo Pacheco Montero

student•

Puede ser que esta aplicación en especifico no se explota muy bien, pero lo ideal sería extraerlo a otro archivo principalmente, pero por otro lado lo útil es que son reutilizables, en vez de hacer todo eso del localStorage en cada componentnte que tenga esta funcionalidad, simplemente usas el hook que ya creaste, no depende de nombres especificos y por eo son útiles.

Luis Enrique Andrino Duque

student•

Consejo sano: Ahora que estamos pasando el itemName como un argumento en el localStorage, verifiquen que esten enviando el nombre bien. No sean como yo que envio otro y estuve buscando el bug por 30 minutos 😒🤘

Carlos Esteban León Pinilla

student•

La gracia de los hooks es encapsular y abstraer en un archivo, no dejarlo en el mismo 😅, F

José Naranjo

student•

Los Hooks te permiten agregar y manejar el estado en componentes funcionales, lo cual antes solo era posible en componentes de clase utilizando el estado del constructor y los métodos del ciclo de vida. Con los Hooks, puedes usar el estado en componentes funcionales sin necesidad de convertirlos en componentes de clase.

Algunos de los Hooks más comunes en React son:

useState: Permite agregar y actualizar el estado en componentes funcionales. Recibe un valor inicial y devuelve un array con dos elementos: el estado actual y una función para actualizarlo.

useEffect: Permite ejecutar efectos secundarios en componentes funcionales. Puedes usarlo para realizar tareas como hacer llamadas a API, suscribirte a eventos o limpiar recursos. Se ejecuta después de que el componente se haya renderizado.

useContext: Permite acceder al contexto de React en componentes funcionales. Te da acceso al valor actual del contexto definido en un componente superior utilizando el componente Context.Provider.

useRef: Permite mantener una referencia mutable en componentes funcionales. Puede ser útil para acceder directamente a un elemento del DOM o para almacenar valores que persisten a través de re-renderizados.

Ahora, los Custom Hooks son funciones que te permiten reutilizar lógica entre componentes. Son funciones personalizadas que pueden contener uno o varios Hooks de React, además de lógica adicional específica para tu aplicación. Puedes crear tus propios Custom Hooks para encapsular la lógica común y reutilizarla en diferentes componentes.

Un Custom Hook es simplemente una función que empieza con el prefijo "use" y puede utilizar cualquier Hook de React. Puedes crear Custom Hooks para manejar tareas específicas, como la autenticación, el manejo de formularios o la gestión de datos. Esto te permite mantener tu código más modular, legible y reutilizable.

Por ejemplo, podrías crear un Custom Hook llamado useFetch que encapsule la lógica de realizar una llamada a una API y manejar el estado de carga y respuesta. Luego, puedes reutilizar este Custom Hook en diferentes componentes para realizar solicitudes de API de manera consistente.

Recuerda que los Hooks deben seguir ciertas reglas de uso, como solo ser llamados en el nivel superior de un componente de función y no dentro de bucles, condiciones o funciones anidadas.

Espero que esta explicación te haya ayudado a comprender los conceptos de Hooks y Custom Hooks en React. Si tienes alguna pregunta adicional, ¡estaré encantado de ayudarte!

Alan Garcia

student•

🟨 Raza! No se estresen como yo jaja en no saber los custom hooks recordemos que es a nuestro criterio cuando usarlos, ademas si son algo complicados los custom hooks, digo no por algo tiene su propio curso! Exito amigos!

Andrés Soret Chacin

student•

Mejora de la Persistencia de Datos en ReactJS con Local Storage

En la clase anterior, implementamos la persistencia de datos en nuestra aplicación usando Local Storage.
Esto permitió que los usuarios pudieran recargar la página sin perder los cambios realizados.

Complejidad del Componente App

El componente App ahora es más complejo debido a la lógica adicional para manejar la persistencia de datos con Local Storage.
La lógica para guardar el estado de los todos y la persistencia de datos está mezclada, lo que aumenta las líneas de código y la complejidad.

Uso de Custom Hooks en ReactJS

Para limpiar y reutilizar la lógica de la persistencia de datos, vamos a utilizar una herramienta de ReactJS llamada Custom Hooks.
Los Custom Hooks permiten abstraer partes de la lógica de los componentes, haciéndolos más limpios y reutilizables.
Seguimos la convención de ReactJS de nombrar los Custom Hooks con el prefijo "use", por ejemplo, useLocalStorage.

Implementación de useLocalStorage

La idea es crear una función llamada useLocalStorage que maneje todo lo relacionado con Local Storage.
Esta función se encargará de la lógica para leer y escribir en Local Storage, eliminando cualquier referencia directa a Local Storage en el componente App.
Definiremos un estado dentro del Custom Hook que representará los datos almacenados en Local Storage.

Creación del Estado y Funciones en useLocalStorage

Dentro del Custom Hook, crearemos un estado usando react.useState para manejar el ítem almacenado en Local Storage.
La función saveItem se encargará de actualizar tanto el estado interno del Custom Hook como Local Storage.
El Custom Hook recibirá dos parámetros: el nombre del ítem en Local Storage (itemName) y el valor inicial (initialValue).

Retorno de Estado y Funciones desde useLocalStorage

El Custom Hook retornará un array con el estado (item) y la función para actualizarlo (saveItem).
Esto permitirá que el componente App consuma el estado y la función de actualización sin interactuar directamente con Local Storage.

Uso de useLocalStorage en el Componente App

En el componente App, reemplazamos el uso de react.useState con el Custom Hook useLocalStorage.
Pasamos el nombre del ítem y el valor inicial al Custom Hook.
El componente App ahora solo maneja la lógica relacionada con los todos, sin preocuparse por Local Storage.

Prueba de Funcionamiento

Recargamos la aplicación para verificar que la lógica de persistencia de datos sigue funcionando correctamente.
Completamos y eliminamos tareas para asegurar que el estado local de React y Local Storage se actualizan correctamente.
La aplicación mantiene su funcionalidad para los usuarios, mientras que la legibilidad y mantenibilidad del código mejoran para los desarrolladores.

Consideraciones sobre el Uso de Custom Hooks

Decidir cuándo implementar Custom Hooks depende del criterio y la experiencia del desarrollador.
La abstracción de lógica compleja en Custom Hooks puede facilitar el mantenimiento y la legibilidad del código.
La práctica y la experimentación son esenciales para desarrollar un buen criterio sobre cuándo y cómo usar Custom Hooks.

Próximos Pasos

En la próxima clase, continuaremos mejorando la organización y legibilidad de nuestra aplicación.
Aprenderemos a trabajar con archivos y carpetas en ReactJS.
Mientras tanto, sigue practicando y explorando más sobre Custom Hooks y su uso en diferentes proyectos de ReactJS.

Joshua Espindola

student•

Necesito una explicacion mas conceptual ):

Luis Miguel Rodriguez

student•

https://www.youtube.com/watch?v=xutmKvLsbKM https://www.youtube.com/watch?v=cBkl5jiHuXk

Alexander Flores Rayme

student•

HELLO!! 😎 Me pareció una clase muy interesante, la verdad entendí gran parte de esta clase y deban saber que si bien el profe hablo mucho de mover lógica y código y de nuestra aplicación TODO's podría ser cualquier otra App,debemos pensar como programadores y que esto de los Custom Hooks es más común en entrevistas de react ya que permite saber como manejas tu código/ lógica, y lo que todas las empresas quieren es que el código que hagas sea escalable y reutilizable en el tiempo, que cuando se necesite hacer otra aplicación o algún cambio en nuestra app TODO's solo cambiemos cierta parte del código, pero no toda la lógica, ya que esta debe persistir en el tiempo. Si llegas hacer un custom hook en una entrevista de trabajo seguro que será un plus muy importante ya que es una de las muchas cosas que nos permite hacer React, no soy muy avanzado en React apenas estoy empezando pero creo que esta clase por mas confusa que parezca es muy importante que entendamos.

Carlos Javier Contreras Miquilena

student•

Si estan usando React Vite + Typescript como yo los abstraje de la siguiente manera:

useLocalStorage.ts: Se define el tipo <T,> como propiedad para indicarle que puede ser cualquier cosa ,ya que Any no esta permitido

const useLocalStorage = <T,>(itemName: string, initialValue: T) => {
  const localStorageItem: string | null = localStorage.getItem(itemName);
  const initialItem: T = localStorageItem ? (JSON.parse(localStorageItem) as T) : initialValue;

  const [item, setItem] = useState<T>(initialItem);

  const saveItem = (newItem: T) => {
    localStorage.setItem(itemName, JSON.stringify(newItem));
    setItem(newItem);
  };

  return [item, saveItem] as const;
};
```interface IToDos {    text:string,    completed:boolean,}`App.tsx`: se envi el valor inicial como un Arreglo de la interface IToDos
```js
const [toDos, handleSaveToDos] = useLocalStorage('TODOS_V1', [] as IToDos[])
```IToDos.ts: es la interface que define el objeto
```js
interface IToDos {
    text:string,
    completed:boolean,
}

Alejandro Calderón

student•

Este es mi custom hook para trabajar con localStorage:

function useLocalStorage(itemName, initialValue) {
  const [itemsList, setItemsList] = useState(
    () => JSON.parse(localStorage.getItem(itemName)) || initialValue
  );

  const saveLocalStorage = (actualizedList) => {
    setItemsList(actualizedList);
    let tasksListString = JSON.stringify(actualizedList);
    localStorage.setItem(itemName, tasksListString);
  };

  return [itemsList, saveLocalStorage];
}

Ricardo Alfonso Chavez Vilcapoma

student•

Profe o los que ya dominen React...dejen en comentarios como uno aprende toda la lógica de una nueva tecnología como por ejemplo React...siento que aprendo pero luego se me olvida.

Alejandro Calderón

student•

Practica y paciencia, ese problema se vera mucho mas facil despues de una caminata o incluso mañana.

Misael Gomez

student•

Solo práctica la primera vez que tome el curso, su primera versión no entendí nada aunque lo vi 3 veces, pero despues parece magia y todo va cobrando más sentido

Christian Ramirez

student•

Hola a todos, estuvo interesante ese custom hook, pero como dicen algunos comentarios, le falta algo de escalabilidad, hice algo para poder crear una variable de una forma más global:

Lo siento, estoy haciendo esto con TypeScript también

src/hooks/LocalStorageHook.tsx

import { useState } from "react"

import { valueToString, valueTransform } from "../utils/valueConversion";

export const useLocalStorage = (localStorageItemName: string, initialValue: any ) => {
    const [localStorageInfo, setLocalStorageInfo] = useState(initialValue);
    const localStorageValue: string | null = localStorage.getItem(localStorageItemName)
    if (localStorageValue) {
        const convertedLocalStorage = valueTransform(localStorageValue)
        setLocalStorageInfo(convertedLocalStorage)
    } else {
        const localStorageValue:string = valueToString(initialValue)
        localStorage.setItem(localStorageItemName, localStorageValue)
        setLocalStorageInfo(initialValue)
    }

    const saveLocalStorageInfo = (newItem:any) => {
        localStorage.setItem(localStorageItemName, valueToString(newItem))
    }

    return [localStorageInfo, saveLocalStorageInfo]
}

src/utils/valueConversion.ts

export const valueToString = (value:any) => ((typeof(value) === "object") ? JSON.stringify(value) : String(value))

export const valueTransform = (value:string) => {
    try {        
        return JSON.parse(value)
    }
    catch { 
        return value
    }
}

Gonzalo Gutiérrez Castillo

student•

Van a sacar un nuevo curso de React Hooks?, el anterior ya no existe.

Platzi

student•

Es posible que ya exista un curso sobre React Hooks, te recomendaría revisar la sección de recursos para verificar si está disponible. Si no, te animo a dejar una calificación de cinco estrellas para que sepan que hay interés en un nuevo curso de React.js.

Lucia Rodriguez

student•

Hola, me da este error al modificar todo: Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.useLocalStorage is not a function or its return value is not iterable

Alguna solucion?

Marcelo Vinicio Chavarría Ugalde

student•

Hola Lucia todo bien?? No se si ya resolviste el problema; si no manda foto de tú código para ver que puede ser el problema. Porque parece que estas tratando de iterar sobre algo que no puede ser iterado, es decir que no es un array. Según lo que dice jaja xd

Ricardo Alfonso Chavez Vilcapoma

student•

¿Crear estados en un custom Hook es indispensable o también es criterio del developer?

Juan Castro

teacher•

Cómo crearías un custom hook sin crear nuevos estados?

Gonzalo Gutiérrez Castillo

student•

Si es indispensable. Si no tuviera useState u otros hooks de React dentro del Custom Hook, seria una función normal, no un Custom Hook.