Using spread operator to setState in multiple succession

Question

I have some values stored in local storage. When my component mounts, I want to load these values into the state. However, only the last property being added is added to the state. I've checked the values on my localStorage, and they are all there. Furthermore, when I log the variables (desc, pic or foo) in the condition block, they are there.

I thought at first each subsequent if block is re-writing the state, but this is not the case as I am using the spread operator correctly (I think!), adding the new property after all pre-existing properties.

I think the problem is that the code in the last if block is running before the state is set in the first if block. How do I write the code so I get all three properties from my local storage into the state?

//what I expect state to be
{
  textArea: {
    desc: 'some desc',
    pic: 'some pic',
    foo: 'some foo'
  }
}

//what the state is
{
  textArea: {
    foo: 'some foo'
  }
}

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    if (desc) {
      console.log(desc) //'some desc'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          desc: desc,
        },
      }, ()=>console.log(this.state.textArea.desc)); //undefined
    }

    if (pic) {
      console.log(pic) //'some pic'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          pic: pic,
        },
      }, ()=>console.log(this.state.textArea.pic)); //undefined
    } 

    if (foo) {
      console.log(foo) //'some foo'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          foo: foo,
        },
      }, ()=>console.log(this.state.textArea.foo)); //'some foo'
    } 
  }

Answer 1

You are likely being caught by React batching setState calls by shallow-merging the arguments you pass. This would result in only the last update being applied. You can fix this by only calling setState once, for example:

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    this.setState({
        textArea: Object.assign({},
            desc ? { desc } : {},
            pic ? { pic } : {},
            foo ? { foo } : {}
        )
    });
  }

The other version is to pass an update function to setState rather than an update object, which is safe to use over multiple calls. The function is passed two arguments: the previous state, and the current props - whatever you return from the function will be set as the new state.

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    this.setState(prevState => {
        if (desc) {
            return {
                textArea: {
                   ...prevState.textArea,
                   desc
                }
            }
        } else {
            return prevState;
        }
    });
    // Repeat for other properties
  }

It's a little more verbose using this approach, but does offer the opportunity to extract state updating functions outside of your component for testability:

  // Outside component
  const updateSubProperty = (propertyName, spec) => prevState => {
      return {
          [propertyName]: {
             ...prevState[propertyName],
             ...spec
          }
      }
  }

  const filterNullProperties = obj => {
      return Object.keys(obj).reduce((out, curr) => {
          return obj[curr] ? { ...out, [curr]: obj[curr] } : out;
      }, {});
  }

  componentDidMount () {
      this.setState(updateSubProperty("textArea",
          filterNullProperties(
              desc: window.localStorage.getItem('desc'),
              pic: window.localStorage.getItem('pic'),
              foo: window.localStorage.getItem('foo')
          )
      ));
  }

This way adds some complexity, but (in my opinion) gives a really readable component where it is clear to our future selves what we were trying to achieve.