Must initializer functions for useState/useReducer be pure?

Question

Hier is an example of a problem I encountered:

import ReactDOM from "react-dom/client";
import React, { useState, useEffect } from "react";

const App = () => {
  // problematic
  const [radio, setRadio] = useState(1);
  useEffect(() => {
    const localRadio = localStorage.getItem('radio');
    if (localRadio) {
      setRadio(+localRadio);
    }
  }, []);

  // My "solution" using an initializer to read from localStorage
  // const [radio, setRadio] = useState(() => {
  //   const localRadio = localStorage.getItem('radio');
  //   return localRadio ? +localRadio : 1;
  // });

  useEffect(() => {
    localStorage.setItem('radio', radio);
  }, [radio]);
  const radioChangeHandler = (event) => {
    setRadio(+event.target.value);
  };
  return (
    <div>
      <h1>useState initializer demo</h1>
      <div className="radio-group" onChange={radioChangeHandler}>
        <input
          type="radio"
          value="1"
          checked={radio === 1}
          id="language1"
          name="languageChoice"
        />
        <label htmlFor="language1">Javascript</label>
        <input
          type="radio"
          value="2"
          checked={radio === 2}
          id="language2"
          name="languageChoice"
        />
        <label htmlFor="language2">HTML</label>
        <input
          type="radio"
          value="3"
          checked={radio === 3}
          id="language3"
          name="languageChoice"
        />
        <label htmlFor="language3">CSS</label>
      </div>
    </div>
  );
};

const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The idea is to write into localStorage everytime radio changes. And when I open/refresh the site, it should read from the localStorage and set the value. But then I got the problem that the useEffect with [radio] always overwrites the other one, so I always get 1 as value for radio regardless of what's written in localStorage at the beginning.

(I just found out that the code actually works if I remove StrictMode, I thought I've tested it before... but react wants that the app also works if it renders twice anyway.)

My solution was to use an initializer function to read from localStorage (the commented out code). It works fine, and I was proud of me. Then I read on https://beta.reactjs.org/apis/react/useState#parameters

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type.

Also on https://beta.reactjs.org/apis/react/useReducer#my-reducer-or-initializer-function-runs-twice

Only component, initializer, and reducer functions need to be pure.

Does it mean that I shouldn't read from localStorage (or fetch data from API) in initializer? And what's the right way to do it?

Answer 1

No. The documentation mentions that it should be pure.

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type.

The main idea is that with concurrent React coming into the picture, the rendering process is broken into pieces and done in parts, pausing and resuming at times. So React methods might be called more than once, and this can lead to invalid app state. (Eg: In first render localStorage has value 5, but in next it has mangoes :D). To detect these kind of issues React runs a lot of code twice: function passed to useState being one of them.

So one way to do this if you want to follow the above rule is, to read from localStorage in componentDidMount or useEffect(() => { ... },[]);. You can find relevant code in other answers.

You can have a ref variable which you update in this useEffect callback which indicates if this is the first render or not. You can have some null value for your state variable to let you know that you do not have the correct value for radio input. There are multiple options.

Answer 2

Try this approach:

const radioState = useState(-1);
const [radio, setRadio] = [radioState[0], (radioValue)=>{
    // Set local storage item
    radioState[1](radioValue);
}]

First you initialize the state and assign it to radioState. So doing radioState[0] will return the current state and radioState[1] (val) will set the state to val (Similar to [radio, setRadio]

Then write a custom array and de-structure it into [radio, setRadio] with setRadio being a custom function that takes a radioValue parameter and set the local storage and update the real state in the react component.

The idea is to write into localStorage everytime radio changes

This requirement will be satsified.

Applying this in your case

const radioState = useState(-1);
const [radio, setRadio] = [radioState[0], (radioValue)=>{
    localStorage.setItem('radio', radioValue);
    radioState[1](radioValue);
}]

Maybe you can also write a custom hook that sets the local storage every time its set function is called. This will be the most "elegant react" solution probably

And for the initializer, why are you returning +localRadio ? Don't you want to return the value saved in local storage ? If you do so it will be pure as far as react wants it (It will have no side effects: changing a global variable), because when react runs it twice it will return the same value

Answer 3

You can just check if the state value in your useEffect hook to see if it matches the initial value and it doesn't then you update your localStorage.

const [radio, setRadio] = useState(-1);

// Update the value of radio in the localStorage. If the value is -1 that means we are still in the initial render.
useEffect(() => {

if(radio === -1) return;

localStorage.setItem('radio', radio)

}, [radio]) 

// Update the value of radio on initial render. If localStorage doesn't 
// have radio stored, it will just set the radio state to 1, otherwise 
// it will load the existing value into the state.
useEffect(() => {

const _radio = localStorage.getItem('radio');

if(_radio === null) {
  setRadio(1);
} else {
  setRadio(_radio);
}

}, []) 

Answer 4

I don't think there's a need for the initialiser function to be pure. Sure, it shouldn't have side effects that change anything, but it's fine to have its result depend on the environment - be that component props or global state such as localStorage. I wouldn't use any effect hooks at all in your case:

const [radio, setRadio] = useState(() => {
  const storedRadio = localStorage.getItem('radio');
  return storedRadio != null ? +localRadio : 1;
});

const radioChangeHandler = (event) => {
  const newRadio = +event.target.value;
  localStorage.setItem('radio', newRadio);
  setRadio(newRadio);
};

Answer 5

There's no requirement that the initializer must be pure. You could even write your own useLocalStorage hook so that it's easy to persist any state -

function useLocalStorage(key, initState) {
  const [state, setState] = React.useState(_ => {
    const value = localStorage.getItem(key)
    if (value == null)
      return typeof initState == "function"
        ? initState()
        : initState
    else
      return JSON.parse(value)
  })
  const persistState = React.useCallback(update => {
    setState(prevState => {
      const nextState =
        typeof update == "function"
          ? update(prevState)
          : update
      localStorage.setItem(key, JSON.stringify(nextState))
      return nextState
    })
  }, [key])
  return [state, persistState]
}

The useLocalStorage hook can be used like this -

import { useLocalStorage } from "./hooks.js"

function ContactUs() {
  const [name, setName] = useLocalStorage("forms:contact:name", "")
  const [email, setEmail] = useLocalStorage("forms:contact:email", "")
  const [message, setMessage] = useLocalStorage("forms:contact:message", "")
  // ...
  return <form>
    <input value={name} onChange={e => setName(e.target.value)} />
    <input value={email} onChange={e => setEmail(e.target.value)} />
    <textarea value={message} onChange={e => setMessage(e.target.value)} />
    {/* ... */}
  </form>
}

useLocalStorage has the same API as useState. It supports functional updates -

function ContactUs({ messageLimit = 200 }) {
  // ...
  const [message, setMessage] = useLocalStorage("forms:contact:message", "")
  const updateMessage = event => {
    // functional update
    setMessage(prevText => {
      if (event.target.value.length > messageLimit)
        return prevText
      else
        return event.target.value
    })
  }
  return (
    // ...
  )
}

As well as lazy initial state -

function MyComponent(props) {
  const [state, setState] = useLocalStorage("mykey", _ => {
    // lazy initial state; first render only
    return someExpensiveComputation(props)
  })
  return (
    // ...
  )
}

useLocalStorage accepts state of any shape -

function CharacterSheet({ id }) {
  const [character, setCharacter] = useLocalStorage(`character:${id}`, {
    name: "Unnamed One",
    class: "None", 
    equipment: [
      { type: "wearable", name: "humble garment" }
    ],
  })
  // ...
  return (
    <div>
      <h1>{character.name}</h1>
      <h2>{character.class}</h2>
      {character.equipment.map(e => ...)}
      {/* ... */}
    </div>
  )
}