useReducerWithLocalStorage, yet another custom React hook

Mattia Richetto
1 min readMay 1, 2020

I’ve built useReducerWithLocalStorage, a React hook that adds local storage support to the useReducer hook.

It could be useful if you need to persist locally (part of) the state of your React application.

Working on Tweries, which is basically a form, I realized that it would be a very poor user experience if upon refreshing the page all the content created was gone.

the Tweries application’s main form

I’ve decided to take advantage of the local storage to save the written content.

The way the useReducerWithLocalStorage hook works is that it enhances the useReducer hook with the persistence of the state to the local storage.

In doing this, the application’s initial state is rehydrated with what has been saved locally in the browser.

The hook uses under the hood useLocalStorage to read and write from the local storage.

In a nutshell, its job is orchestrating useReducer and useLocalStorage and that’s why I’ve decided to name it useReducerWithLocalStorage.

You can take a look at the source code or install it from NPM.

What do you think? Feedback’s always welcome!

Resources

--

--

Mattia Richetto

Engineering Leadership at GitHub, Running, and Yoga (alphabetical order)