Question 213582 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to take,delete,update data realtime from localStorage in reactjs?

so i want to make a page that render a data from localStorage, i want to make it realtime, so if i wanti to delete some data from localStorage the UI of deleted data removed realtime

This is my code, but it does not realtime, i need to reload to look the changes

const [favoritesPkg, setFavoritesPkg] = useState([]);

useEffect(() => {
    let a = JSON.parse(localStorage.getItem("savedPkg"));
    setFavoritesPkg(a);
}, []);

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
};

return (...)

I also try this code, i show what i expected but there is an error: maximum depth render

enter image description here

const [favoritesPkg, setFavoritesPkg] = useState([]);
useEffect(() => {
    let a = JSON.parse(localStorage.getItem("savedPkg"));
    setFavoritesPkg(a);
}, [favoritesPkg]);

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
}

so in my component there is an action button like edit, and delete…i want if i delete single component from data in localStorage will disappear realtime, so i do not need refresh my page to see that changes

Tags:

2

Answers


  1. 0

    For fixing this you need to update handleRemoveAll function. In this function you are only removing the item from localstorage. You are not updating the state. Please update the function as follow.

    const handleRemoveAll = () => {
localStorage.removeItem("savedPkg");
setFavoritesPkg(null);

}

    And also update the useEffect to this

     useEffect(() => {
    
}, [favoritesPkg]);

    This will surely update the UI in realtime.

    Login or Signup to reply.
  2. 0

    First you need to understand one thing: React only rerenders when you update a stateful variable.

    Stateful variables are those created with useState, useReducer or an external library such as Redux, Jotai, Mobx, etc…

    Second thing is, if you have a useEffect where you update a variable and you look for the variable inside the dependency array, you will end up in a loop.

    So NEVER do something like you are doing in your seconde code example

    To achieve the result, you want change your code adding a setFavoritesPkg inside the handleRemoveAll function.

    Your code should look like this:

    const [favoritesPkg, setFavoritesPkg] = useState([]);
useEffect(() => {
/* Notice the addition of a conditional to check for the localStorage item,
if you don't do that, you can end up crashing your application when trying the
JSON.parse() */
    const storedPackages = localStorage.getItem("savedPkg")
    if(storedPackages){
      let a = JSON.parse();
      setFavoritesPkg(a);      
    }
}, []); // removed favoritesPkg from the dependency array so you don't fall into an eternal loop

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
    setFavoritesPkg([]) // reseting favoritesPkg to empty array
}

    If you want to update something in the screen (trigger a re-render) update the state variable, localStorage is not observed by react to update the dom.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search