No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Custom Hooks

14/34
Recursos

Aportes 25

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

馃數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

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.

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.

Hay un momento en el curso en el que el profesor de le acab贸 la did谩ctica y pedagog铆a jaja solo va describiendo lo que va haciendo sin detenerse. Hasta se queda sin aire de lo r谩pido que va en varias ocasiones, al final solo estamos copiando c贸digo sin entender con claridad, se necesita m谩s empat铆a con las personas a las que se les est谩 tratando de ense帽ar.

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!

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 鈥渦se鈥 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!

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 馃槖馃

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.

A mi me ayudo mucho verlo en esta clase del buen Midudev
https://www.youtube.com/watch?v=K4vCTeKKCkU

Hola comunidad Platzi, me gust贸 la explicaci贸n sobre si todo si se complementa con un poco de teor铆a. Les dejo mi aporte, un pdf con apuntes que hice, un poco de teor铆a y trat茅 de explicar paso a paso todo el proceso, incluida la abstracci贸n de lo espec铆fico del 鈥淭ODOS_V1鈥 a lo general como un 铆tem del localStorage.
Aqu铆 el enlace: https://drive.google.com/file/d/1_l5g3JuSNjX5e-KSWkDGHBzKIyEAriE5/view?usp=sharing
Espero les sea de utilidad.

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

Profe o los que ya dominen React鈥ejen en comentarios como uno aprende toda la l贸gica de una nueva tecnolog铆a como por ejemplo React鈥iento que aprendo pero luego se me olvida.

Necesito una explicacion mas conceptual ):

馃煥 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!

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
    }
}

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鈥檚 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鈥檚 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.

Aprend铆 que puedo usar con un hook y que la otra l贸gica, pueden ser usada 煤nicamente utilizando esa variable y ser llamada sincrear otro State.

Me acabo de dar cuenta que hasta el final de esta seccion del curso es que se hace la creacion de TODO鈥檚 y el manejo del modal, y yo por desesperado lo hice desde hace dos clases.
Seguramente me tocara borrar y cambiar codigo para hacerlo mas eficiente.
La paciencia realmente es una virtud

esta bastante interesante el curso pero creo que deberia ser mas conceptual a este tema

En efecto no entend铆

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];
}

Hola a todos, espero se encuentren genial!!
.
Hace unos d铆as publiqu茅 una duda que tenia acerca del customHook de localStorage y crei viable tratar de crear una soluci贸n diferente debido a que segun lo que entiendo en este caso si dejamos localStorage tal cual como la clase ya no podr铆amos usarlo para otras cosas solo para guardar todos.
.
Entonces modifique algunas cosas y en vez de usarlo como customHook lo use como una fucnion normal, les comparto el codigo para que me den retroalimentaci贸n si es una buena idea hacer la soluci贸n que hice o si estoy haciendo algo mal.
.
Cabe aclarar que realice la app algo diferente a la del curso.
.
Se aceptan todo tipo de criticas constructivas!! 馃槂
.
Codigo de LocalStorage

function setLocalStorage(itemName, itemData) {
    localStorage.setItem(itemName, JSON.stringify(itemData));
}

function getLocalStorage(itemName) {
    let localStorageItem = JSON.parse(localStorage.getItem(itemName));
    
    if(!localStorageItem) {
        return false;
    }else {
        return localStorageItem;
    }
}

export { 
    setLocalStorage,
    getLocalStorage
}

Codigo de App

// React State used for DEFAULT TODOS
  const defaultTodos = getLocalStorage('TODO_APP') || [];
  const [todos, setTodos] = React.useState(defaultTodos);

  const saveTodos = (updatedTodos) => {
    setTodos(updatedTodos);
    setLocalStorage('TODO_APP', updatedTodos);
  }

  // React State used for input in TodoSearch Component
  const [searchValue, setSearchValue] = React.useState('');

  // Derivative States
  const completedTodos = todos.filter(todo => todo.completed).length;
  const totalTodos = todos.length;

  const todosSearched = todos.filter(
    (todo) => {
      const todoText = todo.text.toLowerCase();
      const searchText = searchValue.toLowerCase();

      return todoText.includes(searchText);
    }
  );

  const toggleTodoComplete = (todoId, completed) => {
    const updatedTodos = [...todos];
    const todoItemIndex = updatedTodos.findIndex(todoItem => todoItem.id === todoId);
    
    updatedTodos[todoItemIndex].completed = completed;
    saveTodos(updatedTodos);
  }

  const deleteTodo = (todoId) => {
    const updatedTodos = [...todos];
    const todoItemIndex = updatedTodos.findIndex(todoItem => todoItem.id === todoId);

    updatedTodos.splice(todoItemIndex, 1);
    saveTodos(updatedTodos);
  } 

Como hago para ponerle mas de 5 estrellas al curso 馃槀

let鈥檚 Go!!