Custom Hooks

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 “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!

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 “TODOS_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…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.

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’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.

Me acabo de dar cuenta que hasta el final de esta seccion del curso es que se hace la creacion de TODO’s 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’s Go!!