# Update localStorage after setState - React

**URL:** <https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754>\
**Category:** General\
**Created:** [January 9, 2018, 4:43pm UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754 "2018-01-09T16:43:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anastasyya](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anastasyya/32/14819_2.png) [@Anastasyya](https://forum.freecodecamp.org/u/Anastasyya)\
**Post date:** [January 9, 2018, 4:43pm UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/1 "2018-01-09T16:43:55Z")

</div>

I am trying to set localStorage equal to current state after it is updated. Unfortunately, I notice that localStorage set to prevState value. Is there any way to make sure localStorage updates after setState?

```auto
markDone (i){
        var array = this.state.tasks;
        array[i].done = true;
        this.setState((prevState) => {
          return {tasks: array,
          completedCount: prevState.completedCount + 1};
        });
   localStorage.setItem('doneTasks', JSON.stringify(this.state.completedCount));
      }

```

Thank you for any help!

---

<div class="post-metadata">

**Author:** ![moT01](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mot01/32/417588_2.png) [@moT01](https://forum.freecodecamp.org/u/moT01)\
**Post date:** [January 9, 2018, 4:54pm UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/2 "2018-01-09T16:54:58Z")

</div>

setState is async i believe - maybe try something like this…

```auto
        this.setState((prevState) => {
          return {tasks: array,
          completedCount: prevState.completedCount + 1};
        }).then(() => {
          localStorage.setItem('doneTasks', JSON.stringify(this.state.completedCount));
      });

```

not sure

---

<div class="post-metadata">

**Author:** ![ejas94](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ejas94/32/75383_2.png) [@ejas94](https://forum.freecodecamp.org/u/ejas94)\
**Post date:** [January 9, 2018, 5:31pm UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/3 "2018-01-09T17:31:53Z")

</div>

I have some months without working with React but if a remember good, the setState method is asynchronous so you have to wait until the component is updated. That’s why the React component class have life cycle methods.

In this case I guess you can do this:

```auto
markDone (i){
  var array = this.state.tasks;
  array[i].done = true;
  this.setState((prevState) => {
    localStorage.setItem('doneTasks', JSON.stringify(prevState.completedCount + 1));
    return {
      tasks: array,
      completedCount: prevState.completedCount + 1;
    }
  });
}

```

---

<div class="post-metadata">

**Author:** ![GeeLie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/geelie/32/103901_2.png) [@GeeLie](https://forum.freecodecamp.org/u/GeeLie)\
**Post date:** [January 10, 2018, 1:31am UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/4 "2018-01-10T01:31:14Z")

</div>

I think the best method for this is using the built in componentDidUpdate method. Does as the method is named, when your component renders from a prop/state change it’s going to be called.

Here’s an example from the react course I’ve been doing.

```auto
 componentDidUpdate(prevProps, prevState) {
    if (prevState.options.length !== this.state.options.length) {
      const json = JSON.stringify(this.state.options);
      localStorage.setItem("options", json);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![Marmiz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marmiz/32/74845_2.png) [@Marmiz](https://forum.freecodecamp.org/u/Marmiz)\
**Post date:** [January 10, 2018, 2:39am UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/5 "2018-01-10T02:39:49Z")

</div>

As everyone else here said, `setState` is asynchronous, but luckily for us the function accept a callback

from [react documentation](https://reactjs.org/docs/react-component.html#setstate):

```auto
setState(updater[, callback])

```

This means that you can simply write your function as:

```auto
this.setState(
{ someSate: obj}, //updater
() => { localStorage.setItem('...') } // callback
);

```

---

<div class="post-metadata">

**Author:** ![Anastasyya](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anastasyya/32/14819_2.png) [@Anastasyya](https://forum.freecodecamp.org/u/Anastasyya)\
**Post date:** [January 11, 2018, 5:12am UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/6 "2018-01-11T05:12:50Z")

</div>

@moT01, @ejas94, @GeeLie, @Marmiz thank you very much for your help and solutions! Problem is solved 🙂

---

<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:** [January 16, 2021, 11:33am UTC](https://forum.freecodecamp.org/t/update-localstorage-after-setstate-react/167754/7 "2021-01-16T11:33:39Z")

</div>