Discussion on: Persisting your React state in 9 lines

[yinonhever]

Hey, can I use this code in a class-based component? Or can it only be used in a functional component whose state is managed with Hooks?

[selbekk]

Hi! Hooks unfortunately require function components to work, but you could recreate the same functionality with either a HOC or just directly in your class component. In your componentDidUpdate, add a line that serializes and saves your state to local storage.

componentDidUpdate() {
  window.localStorage.setItem(
    ‘my state key’,
    JSON.stringify(this.state)
  );
}

When you initialize the state, you need to do the reverse:

constructor(props) {
  this.state = JSON.parse(
    window.localStorage.getItem(‘my state key’)
  ) || { fallback: value };
}

Hope that helps!