0

My code looks something like this

componentWillMount(){
    lotGroups = // backend call to fetch lotgroups
    setState({
        lotGroups
    )};
}

As I am changing lotGroups later on (using setState only) I wanted to store the initial copy of the complete set of lotGroups. What would be the best way? I tried adding that variable to state and then updating it in componentWillMount(), but it did not work. As soon as the lotGroups updated, this got updated too.

5
  • Have a copy of IotGroups in constructor. like this.lotGroups = 'something'. You can access it later using this.IotGroups Aug 1, 2018 at 5:04
  • But that will be called before componentWillUpdate right? all of my fetch logic is in componentWillUpdate. lotGroups is the variable which contains the result and I want to save it somewhere after that.
    – chandu
    Aug 1, 2018 at 5:11
  • keep the initial copy in a different variable??? Aug 1, 2018 at 5:36
  • i mean initialise in constructor and update that variable in componentWillUpdate. Aug 1, 2018 at 5:36
  • @AseemUpadhyay I tried doing that but of no use. It still got updated on state change.
    – chandu
    Aug 1, 2018 at 13:40

2 Answers 2

2

The problem is that the initial state of the component must be set synchronously in the constructor, i.e.:

constructor (props) {
  super(props)
  this.state = {
    lotGroups = 'initial state'
  }
}

You can then update the state in componentWillMount asynchronously from the backend call, i.e.:

componentWillMount () {
  fetch('backend.com')
    .then(res => res.json())
    .then(lotGroups => {
      this.setState({
        lotGroups
      })
    })
}

Or if you're using async/await:

async componentWillMount () {
  const res = await fetch('backend.com')
  const lotGroups = await res.json()

  this.setState({
    lotGroups
  })
}

If you want to store the contents of lotGroups for later without causing a component refresh you can skip the state setting in the constructor and use:

componentWillMount () {
  fetch('backend.com')
    .then(res => res.json())
    .then(lotGroups => {
      this.lotGroups = lotGroups
    })
}

Which you can then reference later as this.lotGroups

Hope this helps.

5
  • This is exactly what I am doing right now. My initial state would be empty. After I make the backend call in compoenentWillMount which will populate that array. I want that backend result to be stored somewhere without it getting updated when there is a state change
    – chandu
    Aug 1, 2018 at 14:10
  • You can add an initialLotGroups: null in your state (constructor) then only update it is it is === null in ajax return function?
    – Pandaiolo
    Aug 1, 2018 at 14:25
  • @Pandaiolo tried that. It is not getting updated in componentWillMount( checked that in console logs) when I use that null condition, but somehow it is getting updated with the state.
    – chandu
    Aug 1, 2018 at 14:32
  • in that case you can simply set this.lotGroups = lotGroups. This will store the lotGroups on the component object without updating the state, see the updated example Aug 1, 2018 at 14:51
  • Thanks everyone for their inputs. Turns out I was accidentally modifying the original value as use of splice on copied variable which will affect the original copy.
    – chandu
    Aug 1, 2018 at 15:06
1

You can use state like this in component.

 state = {
  lotGroups = 'default value';
}

or inside constructor

constructor(props) {
super(props);
state = {
  lotGroups = 'default value';
}
}

Please do not update state in componentWillUpdate() it will call render after state update and hence performance issue. Unnecessary render call.

1
  • Sorry!! got confused. It is actually componentWillMount. Not compoenentwillUpdate. I edited the post to reflect the same. Let me know if you have any insights.
    – chandu
    Aug 1, 2018 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.