Custom Hook para Local Storage

Clase 14 de 23 • Curso de React 17

Contenido del curso

Primeros pasos con React

Fundamentos de React: maquetación

Fundamentos de React: interacción

Fundamentos de React: escalabilidad

Modales y formularios

Retos

Próximos pasos

Tomar examen

Resumen

Cuando la lógica de persistencia y la lógica de estado conviven en un mismo componente, el código se vuelve difícil de mantener. La solución que propone React es poderosa y elegante: crear un custom React Hook que encapsule todo el trabajo con localStorage, dejando los componentes limpios y enfocados en su responsabilidad principal.

¿Por qué separar la lógica de localStorage en un custom hook?

El archivo app.js originalmente contenía dos responsabilidades mezcladas: el manejo del estado de la aplicación y la persistencia de datos en localStorage [01:00]. Cada vez que se necesitaba leer o guardar información, el componente acumulaba más líneas que no tenían relación directa con la interfaz de usuario.

Un custom React Hook permite abstraer esa lógica. Abstraer significa extraer un bloque de código hacia una función independiente para que el componente que lo consume no necesite conocer los detalles internos. En este caso, el hook se llama useLocalStorage y se encarga de:

Leer un elemento de localStorage al iniciar.
Parsear su contenido o establecer un valor inicial por defecto.
Proveer un método para actualizar tanto el estado de React como localStorage simultáneamente.

¿Cuál es la regla principal para nombrar un custom hook?

React permite crear cualquier hook personalizado con total libertad, pero existe una regla fundamental: el nombre debe comenzar con la palabra use [02:27]. Puede ser usePatito, useUnicornio o useTodos; lo importante es respetar esa convención. Esto le indica a React que esa función sigue las reglas de los hooks y puede utilizar internamente otros hooks oficiales como React.useState.

¿Cómo se estructura useLocalStorage paso a paso?

El hook recibe dos parámetros [03:45]:

itemName: el nombre con el que se guardará el elemento en localStorage (por ejemplo, 'todos_v1').
initialValue: el valor inicial que se usará si no existe nada guardado previamente.

javascript function useLocalStorage(itemName, initialValue) { const localStorageItem = localStorage.getItem(itemName); let parsedItem;

if (!localStorageItem) { localStorage.setItem(itemName, JSON.stringify(initialValue)); parsedItem = initialValue; } else { parsedItem = JSON.parse(localStorageItem); }

const [item, setItem] = React.useState(parsedItem);

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

return [item, saveItem]; }

Dentro del hook se llama a React.useState [05:48], lo cual es completamente válido. Los custom hooks pueden consumir cualquier hook oficial de React. Esto permite que el estado interno del hook provoque re-renderizados en los componentes que lo utilicen, exactamente igual que si se llamara a useState directamente en el componente.

¿Cómo se consume useLocalStorage en un componente?

El componente App queda mucho más limpio. En lugar de manejar localStorage directamente, simplemente llama al hook [03:10]:

javascript const [todos, saveTodos] = useLocalStorage('todos_v1', []);

El hook retorna un array con dos elementos: el estado actual y la función para actualizarlo. Este patrón es idéntico al que usa React.useState, lo que hace que la transición sea natural.

¿Por qué recibir initialValue como parámetro?

No todos los datos que se guardan en localStorage son arrays [06:30]. Si alguien quisiera guardar un nombre, el valor inicial debería ser un string vacío o un valor por defecto como 'Fernando'. Al parametrizar el initialValue, el hook se vuelve reutilizable para cualquier tipo de dato:

Arrays de tareas: useLocalStorage('todos_v1', []).
Un nombre de usuario: useLocalStorage('nombre_v1', 'Fernando').
Cualquier estructura que se necesite persistir.

¿Se puede usar el mismo hook para múltiples elementos?

Absolutamente. En la demostración se creó un segundo uso del hook para guardar un elemento llamado patito_v1 con el valor 'Fernando' [08:50]:

javascript const [patito, savePatito] = useLocalStorage('patito_v1', 'Fernando');

Al revisar localStorage en el navegador, aparecen ambos elementos guardados de forma independiente: los todos y el patito. Esto confirma que el hook es genérico y reutilizable, sin estar atado a una estructura de datos específica.

El resultado final es un componente app.js enfocado exclusivamente en la lógica de presentación, mientras que toda la complejidad de leer, parsear y guardar datos queda oculta dentro de useLocalStorage. Si trabajas en equipo, basta con decir: "usa este hook, recibe el estado y actualízalo; la persistencia ya está resuelta".

¿Has creado tus propios custom hooks? Comparte en los comentarios qué lógica has abstraído y cómo te ha simplificado el código.

Ariel Ezequiel Biazzo Genua

student•

Custom Hook para Local Storage:

Una de las primeras reglas al usar customHooks es que empiecen por use ej: usePatito

Cuando hacemos un customHook, no hacemos el react.usePatito, sino que lo ponemos de una, como si fuera una funcion:

const [bla,bla] = usePatito()

Lo interesante de los customhooks es que no devuleven solo un return o un item, sino mas biem devuelven todo lo que este ahi adentro, todo eso, lo pueden devolver!

Dentro de nuestros customHooks podemos llavar a los reactHooks oficiales

y asi se veria toda la app cambiada con el nuevo local storage y el nuevo hook:

const defaultItem = [
  {text: 'Cortar ceboolla', completed: false},
  {text: 'Cortar mate con limon', completed: false},
  {text: 'Escuchar a devrockkk', completed: false}

] 

function useLocalStorage(itemName,initalValue) {

  const localStorageItem = localStorage.getItem(itemName);
  let parsedItem;

  //Este if sirve para ver si el usuario entra por primera vez  o no y ya hay datos guardadtos en localStorage...
  if(!localStorageItem) {
    localStorage.setItem(itemName,JSON.stringify(initalValue));
    parsedItem = initalValue;

  } else {
    parsedItem = JSON.parse(localStorageItem)
  }

  const [item, setItem] = React.useState(parsedItem)

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

   return [
     item,
     saveItem,
   ]; //se devuelve el array porque asi es la estructura base de reacthooks

}

function App() {
//Fijate como ahora el todos,saveTodos trabajan con 2 parametros diferentes en la funcion localStorage
  const [todos, saveTodos] = useLocalStorage('TODOS_V1', []);
  const [searchValue, setSearchValue] = React.useState('');

  const completedTodos = todos.filter(todo => !!todo.completed).length;
  const totalTodos = todos.length;

  let searchedTodos = [];

  if (!searchValue.length >= 1) {
    searchedTodos = todos;
  } else {
    searchedTodos = todos.filter(todo => {
      const todoText = todo.text.toLowerCase();
      const searchText = searchValue.toLowerCase();
      return todoText.includes(searchText);
    });
  }

  const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    saveTodos(newTodos);
  };

  const deleteTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos.splice(todoIndex, 1);
    saveTodos(newTodos);
  };
  
  return [
    <p>{patito}</p>,
    <AppUI
      totalTodos={totalTodos}
      completedTodos={completedTodos}
      searchValue={searchValue}
      setSearchValue={setSearchValue}
      searchedTodos={searchedTodos}
      completeTodo={completeTodo}
      deleteTodo={deleteTodo}
    />,
  ];
}

export default App;

Las cookies son información que se comparte entre navegador y servidor para compartir información (por ejemplo, de autenticación). LocalStorage en cambio solo vive en el navegador y nos permite guardar información (por nada del mundo cosas relacionadas a autenticación).

Dato interesante:

El custom hook useLocalStorage (en este punto del curso) retorna un array, en el cuál el primer elemento del array es el estado, y el segundo pues es la función que no modifica (por nombrarla así). entonces si yo llamo a la función useLocalStorage y la ejecuto (porque como ves esta utilizando parentesis) esto me retorna ese array:

const myArr = useLocalStorage('TODOS_V1', [])

En ES6 tenemos algo que se llama Destructuring o desestructuración, que nos permite desempacar valores de arreglos o propiedades de objetos en distintas variables.¿para que esto?

pues para ahorrarnos las siguientes lineas de codigo:

const myArr = useLocalStorage('TODOS_V1', [])

const item = myArr[0]
const saveItem = myArr[1]

Entonces con Desestructuración podemos hacer eso en una sola línea:

const [item, saveItem] = useLocalStorage('TODOS_V1', [])

Algo que debes tener en cuenta es que la destructuring de arrays nos permite darle el nombre que queremos de una a la variable segun la posición que tenga en el array. Lo que en destructuring de objetos no, estos deben tener el mismo nombre, por eso se llaman nombrados.

Dato interesante 2:

Siempre es buena idea tener los custom hooks separados en archivos independientes, a veces incluso creando una carpeta hooks/ donde los guardan todos.

Ahora veamos mas de cerca esta complejidad:

Para explicar esto, toamre solo la data que me importe


function useLocalStorage(itemName,initalValue) {

  const localStorageItem = localStorage.getItem(itemName);
  let parsedItem;

  //Este if sirve para ver si el usuario entra por primera vez  o no y ya hay datos guardadtos en localStorage...
  if(!localStorageItem) {
    localStorage.setItem(itemName,JSON.stringify(initalValue));
    parsedItem = initalValue;

  } else {
    parsedItem = JSON.parse(localStorageItem)
  }

  const [item, setItem] = React.useState(parsedItem) //el (parsedItem es el elemento que se ha guardado en el localStorage, por eso lo usamos como elemento por defecto con useState, y este mismo, es decir, todos los elementos que el usaurio puede ver porque el los manipulo, son los que exportamos como item,

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

   return [
     item,
     saveItem,
   ]; //se devuelve el array porque asi es la estructura base de reacthooks

}

const [todos, saveTodos] = useLocalStorage('TODOS_V1', []);

const totalTodos = todos.length;

Yo necesito de todos para calcular su longitud entonces lo pido... const totalTodos = todos.length;
todos, esta en un elemento de react el cual se basa en tener a los todos actuales, tanto como almacenar nuevos todos: [todos, saveTodos]
pero ojo, estos estan unidos a mi hook que cree yo con 2 datos iniciales: = useLocalStorage('TODOS_V1', []);
estos dos van a llamar a mi funcion:useLocalStorage. Van a probocar 2 cosas, 1) el almacenamiento de la informacion en el localstorage y 2 van a llegar a trabajar con los todos!!! como? con el const [todos, saveTodos] donde el todos, es la informacion que ha yentgo y saveTodos es la informacion nueva que yo desee cargar al hacer ej:

const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    **saveTodos(newTodos);**
  };

pero... y como es la funcion que trabaja con saveTodos? esta! mira:

**const saveItem = (newItem) => {**
    const stringifiedItem = JSON.stringify(newItem)
    localStorage.setItem(itemName,stringifiedItem)
    setItem(newItem)
   }

Por lo tanto... saveItem=saveTodos, es decir, no es igual pero saveTodos necesita de saveItems para que funcione la nueva actualizacion de datos!

5.Ahora, como despues de todo esto yo quiero seguir trabajando con todos, como hago para trabajar con estos? bien, la respuesat des sencilla, luego de operara con la data en localstorage ej: const [item, setItem] = React.useState(parsedItem) necesito que me la devuelva, entonces:

return [
     item,
     saveItem,
   ];

Asi... item conecta con todos, y saveItem conecta con saveTodos!

Gracias a esto... en conclusion, podemos decir que al crear un hook, trabajremos de la siguiente forma:

Necesitamos de 2 datos iniciales, mi data actual y mi nueva data:[todos, saveTodos]
('TODOS_V1', []); estos son algunos parametros pueden haber mas o menos
El uso de mi data(todos) y el retorno de esta ya modificada(item) gracias a lo que hara en un futuro el cambio de estado de en cuyoCaso (saveTodos):

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

   return [
     item,
     saveItem,
   ];

Gonzalo Vidal

Luís Hernández

Sebastian Moreno Olivera

Xamir E Rojas

Reinaldo Mendoza

Rodrigo Ramos Xochiteotzin

Yancarlo Urdaneta

Willy Emanuel Antunez Gonzales

Seba Cardoso

Ingenea SRL

Luis Sánchez M

David Castellanos Zayas

Libian María Hernández Gil

Fredy Daniel Flores Lemus

Juan Castro

teacher•

Dimas Antonio Mendoza Lozano

Joaquin Segovia

Nicolas Vezzali Dussio

Luis Fernando Rodriguez Boett

Jhoana España Urresty

Eduardo Diaz

Carlos Andrés Pupiales Córdoba

Jairo Campos Ruiz

Germán Arevalo Jerez

Damián Gastón Barera Lorenzo

Luis Lozada

Elías Aguilar

Alejandro Ivan Mendieta

rodrigo roque

Angel David Contreras Barrios

Gustavo Gonzalez Montero

Gabriel Hernández Valdez

Héctor Eduardo López Carballo

Irungaray Agustin

Jherom Chacon

Julio Hidalgo Jara

Custom Hook para Local Storage

Primeros pasos con React

Cómo aprender React.js

Cuándo usar React.js

Cambios en React 18: ReactDOM.createRoot

Instalación con Create React App

Fundamentos de React: maquetación

Componentes de TODO Machine

JSX: componentes vs. elementos (y props vs. atributos)

CSS en React

Fundamentos de React: interacción

Manejo de eventos

Manejo del estado

Contando y buscando TODOs

Completando y eliminando TODOs

Fundamentos de React: escalabilidad

Organización de archivos y carpetas

Persistencia de datos con Local Storage