How to Use Local Storage with React State

Syncing local storage to useState seems to cause a lot of confusion for people new to React. With some of the questions I've seen around it, it makes me think it's a fantastic interview question to see if someone really understands the basics of React hooks and lifecycles. To explain what I mean let's look at a very common mistake.

This code will cause the value in local storage to reset to empty every time you refresh the page:

1const [todos, setTodos] = useState<string[]>(() => {
2  console.info('Set Initial State');
3  return [];
4});
5const [newTodo, setNewTodo] = useState<string>('');
6
7useEffect(() => {
8  console.info('Get Initial Todos from Local Storage');
9
10  const localTodos = localStorage.getItem('todos');
11
12  if (localTodos !== null) {
13    const parsed = JSON.parse(localTodos) as string[];
14    setTodos(parsed);
15  }
16}, []);
17
18useEffect(() => {
19  console.info('Synchronize todos with local storage.');
20  localStorage.setItem('todos', JSON.stringify(todos));
21}, [todos]);
22
23const addTodo = (event: FormEvent): void => {
24  event.preventDefault();
25
26  setTodos(todos => {
27    return [...todos, newTodo];
28  });
29};

If you look at console log you will see messages in this order:

Set Initial State
Get Initial todos from local storage
Synchronize todos with local storage
Get initial todos from local storage
Synchronize todos with local storage

Yikes, bit of a mess right? No wonder we're not getting the results we want, what's going on here?

The todos are initially set to an empty array. The first useEffect runs and sets todos in local storage to that initial empty value. The third useEffect is run and sets the todos to that same initial value again from useState (which is an empty array). This all triggers the third useEffect one more time which causes a rerender and we override those todos once more.

...All we want to do is synchronize state to local storage, how do we clean this up?

The first thing to understand is that useState initial value is set on the initial render. This sounds obvious, but it's an underused tool. Often I see people always putting in a default empty value just to satisfy a type error, or just leave it empty.

useState's initial value is going to reset on every render whether you use an effect or not. So using an effect to achieve that goal is just creating a redundancy and running code twice. So we can get rid of the first useEffect and move the logic to useState. I'm using NextJS in this example so I need to check if window is defined.

1const [todos, setTodos] = useState<string[]>(() => {
2  if (typeof window === 'undefined') {
3    return [];
4  }
5
6  console.info('Set Initial State');
7  const localTodos = localStorage.getItem('todos');
8  if (localTodos === null) {
9    return [];
10  }
11
12  return JSON.parse(localTodos) as string[];
13});
14const [newTodo, setNewTodo] = useState<string>('');
15
16useEffect(() => {
17  console.info('Synchronize todos with local storage.');
18  localStorage.setItem('todos', JSON.stringify(todos));
19}, [todos]);
20
21const addTodo = (event: FormEvent): void => {
22  event.preventDefault();
23
24  setTodos(todos => {
25    return [...todos, newTodo];
26  });
27};

Now our todos are properly synchronizing with state, if we refresh the page, the values are still there. But we still have a problem. This is what our console logs look like now:

Set initial state
Synchronize todos with local storage

Our last useEffect is running on initial render when really we don't want it to. The flow is something like this:

Get todos from local storage
Synchronize todos to local storage

Why do we need to synchronize immediately after we get todos the from local storage? Instead we can get rid of the useEffect altogether and only update after a todo is added.

1const [todos, setTodos] = useState<string[]>(() => {
2  if (typeof window === 'undefined') {
3    return [];
4  }
5
6  console.info('Set Initial State');
7  const localTodos = localStorage.getItem('todos');
8  if (localTodos === null) {
9    return [];
10  }
11
12  return JSON.parse(localTodos) as string[];
13});
14const [newTodo, setNewTodo] = useState<string>('');
15
16const addTodo = (event: FormEvent): void => {
17  event.preventDefault();
18
19  console.info('Synchronize todos with local storage.');
20  localStorage.setItem('todos', JSON.stringify(todos));
21  setTodos(todos => {
22    return [...todos, newTodo];
23  });
24};
25

Now we are properly synchronizing state of local storage and we should only have one console log on initial render:

Set initial state

And as a bonus we've gotten rid of all useEffects. Which is always a win. By the React documentation, useEffect is an escape hatch, and you shouldn't use it if you don't absolutely need to. React is already reactive without the help of effects. React is driven by changes in props and events, not by side effects.

To get a better understanding of this I highly recommend this page from the docs. But if you're working with React, you really should read every page on this site.

EthanG

How to Use Local Storage with React State