# Persisting data in react using local storage

**URL:** <https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781>\
**Category:** General\
**Created:** [September 3, 2020, 5:12pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781 "2020-09-03T17:12:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nibble](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nibble/32/123681_2.png) [@nibble](https://forum.freecodecamp.org/u/nibble)\
**Post date:** [September 3, 2020, 5:12pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/1 "2020-09-03T17:12:48Z")

</div>

Hi campers,

I have been wondering about use of `localstorage` in react for some time. I understand you don’t need to store data which don’t change as users interact with your app in state. In one of the tutorials, the instructor advises one to make use of the local storage.

Let us say i want to fetch data once from an API after a component is mounted from `useEffect` and re-render the component without using state. I still don’t understand how that is achievable. I have the following in mind but the code doesn’t make sense. I want to use `localStorage` without using state any where in the component.

```auto
import React, { useEffect } from "react";
const url = "https://jsonplaceholder.typicode.com/todos/";

export default function App() {
  let todoList = [];
  useEffect(() => {
    const todos = JSON.parse(localStorage.getItem("todos"));
    if (todos) {
      todoList.concat(todos);
      
    }
    async function fetchTodos() {
      const todos = await fetch(url).then((response) => response.json());
      todoList.concat(todos);
      localStorage.setItem('todos', JSON.stringify(todos))
    }
    fetchTodos();
  }, []);
  return (
    <div className="App">
      <ul>
        {todoList.map((todo) => {
          return <li key={todo.id}> {todo.title} </li>;
        })}
      </ul>
    </div>
  );
}

```

Clearly what i am doing doesn’t make sense because the component will not re-render and besides i need to pass `todoList` as a dependency which will cause an infinite loop. Is there a way of using `localStorage` without necessarily using `state` for the above example?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [September 3, 2020, 5:27pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/2 "2020-09-03T17:27:42Z")

</div>

Why do you not want to use state? Normally you would fetch or get the data from LocalStorage and put it in state.

If the component has no state, or no data that is changing, how will it know to re-render? That is besides doing a [forced update/re-render](https://www.google.com/search?q=react+forceupdate+functional+component).

---

<div class="post-metadata">

**Author:** ![nibble](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nibble/32/123681_2.png) [@nibble](https://forum.freecodecamp.org/u/nibble)\
**Post date:** [September 3, 2020, 5:44pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/3 "2020-09-03T17:44:19Z")

</div>

> [@lasjorg](#):
>
> Why do you not want to use state? Normally you would fetch or get the data from LocalStorage and put it in state.

It is something i came across in an article. The article states that data which don’t change as users interact with your app don’t belong in state. I have no practical application of this but i have just been wondering if it is really possible to do it without using state.

> [@lasjorg](#):
>
> That is besides doing a [forced update/re-render](https://www.google.com/search?q=react+forceupdate+functional+component).

Isn’t `forceUpdate` only applicable in class components?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [September 3, 2020, 5:50pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/4 "2020-09-03T17:50:08Z")

</div>

> [@nibble](#):
>
> It is something i came across in an article. The article states that data which don’t change as users interact with your app don’t belong in state.

But how does this apply to a todo app?

> [@nibble](#):
>
> Isn’t `forceUpdate` only applicable in class components?

The [forceUpdate()](https://reactjs.org/docs/react-component.html#forceupdate) method yes, but that is why I linked to the search I did. If you look there are ways to force update a function component. But having to force re-render is usually just a sign that something isn’t right.

---

<div class="post-metadata">

**Author:** ![nibble](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nibble/32/123681_2.png) [@nibble](https://forum.freecodecamp.org/u/nibble)\
**Post date:** [September 3, 2020, 5:58pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/5 "2020-09-03T17:58:24Z")

</div>

I guess i just need to take it that it is impossible to achieve what i am thinking about.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [September 3, 2020, 6:02pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/6 "2020-09-03T18:02:23Z")

</div>

Not sure it’s impossible, but just because something is possible doesn’t mean you should do it. I would at least suggest you come up with a good reason why first.

I don’t understand what it is you are trying to achieve here?

---

<div class="post-metadata">

**Author:** ![nibble](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nibble/32/123681_2.png) [@nibble](https://forum.freecodecamp.org/u/nibble)\
**Post date:** [September 3, 2020, 6:20pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/7 "2020-09-03T18:20:42Z")

</div>

> [@lasjorg](#):
>
> just because something is possible doesn’t mean you should do it. I would at least suggest you come up with a good reason why first.

I have no intention of using it in a project. My interest is to find out whether it is possible or not.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:41pm UTC](https://forum.freecodecamp.org/t/persisting-data-in-react-using-local-storage/418781/8 "2021-06-01T18:41:32Z")

</div>