React: Update nested state?

Question

I'm using react native. Suppose I've this state:

{
persons: [{
  name: "Person",
  id: 0,
  value: "",
  percent: 50,
  messed: false
},
{
  name: "Person",
  id: 1,
  value: "",
  percent: 50,
  messed: false
}]
}

I want to update, say, percent of id 1. How do I do it with this.setState? I can deep clone persons object every time and update it but I need to do it a lot of times and the persons object is quite large anyway so it's not performance-wise efficient.

Currently I'm doing

this.state.persons[id].percent = 0;
this.forceUpdate();

which seems not so react-ish. How do I go about this?

i think you need to use `immutibility helper`, check this link:https://facebook.github.io/react/docs/update.html — Mayank Shukla, Apr 24 '17 at 18:41
Possible duplicate of [Whats the best way to update an object in an array in ReactJS?](http://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Mayank Shukla, Apr 24 '17 at 18:41

Sasang · Answer 1 · 2017-04-24T19:18:42.987

You shouldn't be updating the state directly as react mentions several time in their docs. An option you can use is the spread oeprator (or Object.assign):

let newPersonsList = [...this.state.persons];
newPersonsList[2] = {...newPersonsList[2], percent:0};
this.setState({persons:newPersonsList});

Note spread operators only go 1 level deep in copying arrays, i believe, so you are taking the same references for all the persons objets and placing them in a new array. Then you are creating a new object with an updated percent property and assigning it to replace an old reference. Performance wise this should be quick, since no extensive deep copy occurs.

Alternately if you find yourself having a lot of nested objects needing to be updated, i would suggest you take a look at the following library: immutability-helper. Its specifically designed for such cases.

score 1 · Accepted Answer · answered Apr 24 '17 at 18:33

You would have to update the whole state, pretty similar to what you're doing. However, instead of using this.forceUpdate(), I'd recommend calling this.setState({ persons: this.state.persons }).

What you may want to do is consider flatting out your persons into the state. You could do something like create a unique key for each based on their index. So, index of something like this:

const persons = getPersonsData();
this.setState({ persons });

Instead do something like this:

const persons = getPersonsData();
this.setState(persons.reduce((result, person, index) => Object.assign(result, { [`person${index}`]: person }));

The persons.reduce bit will take your array and create an object like this:

{
    person0: {},
    person1: {},
    person2: {}
}

Then, each person will be flat in the state so you can just update it more directly. Not a huge difference, but depending on your use-case, could be worthwhile.

Hmm yes I believe flattening the state might help. I'll wait a bit for any other answer — mehulmpt, Apr 24 '17 at 18:35
I would expect `this.setState({ persons: this.state.persons })` to not trigger a render. Because the object reference being passed in is exactly the same. — jmathew, Jul 23 '17 at 00:12

score 0 · Answer 3 · answered Apr 24 '17 at 18:32

0

I would just use setState. Let React worry about the performance optimizations

   this.setState(object.assign({}, this.state, 
      this.state.persons.map(p => {
        if (p.id === id) p.percent = 0;
      }
   )))

answered Apr 24 '17 at 18:32

Moe

3,467
1
19
25

I guess I need to worry about performance because this is going to be in a mobile app – mehulmpt Apr 24 '17 at 18:34

score 0 · Answer 4 · answered Apr 25 '17 at 08:10

another way to change the state, but flatten state by person id maybe the better option.

 state = {
       persons: [{
          name: "Person",
          id: 0,
          value: "",
          percent: 50,
          messed: false
        },
        {
          name: "Person",
          id: 1,
          value: "",
          percent: 50,
          messed: false
        }]
 }

 this.setState(({persons}) => {
   persons
     .filter(i => i.id === 1)
     .map(i => i.percent = 0)
 })}

React: Update nested state?

4 Answers4

Linked