Lets say I have a React ponent that has a "state" with 10 fields:

this.state = {
    field1: 1,
    field2: 2,
    ... other fields
    something: 'a'
};

In one of my event handlers, I decide I want to update a single state field. Is it for some reason bad practice to do it like this?

// state has 10 other properties not touched here, and I want them to
// retain their existing values
this.state.something = 'b';
this.setState(this.state);

Or must I do:

this.setState({
    field1: this.state.field1,
    field2: this.state.field2,
    ... set other fields with current value
    something: 'b'
});

I'm aware there are libraries that make it easy to copy object state, just wondered if it is necessary to do that. I should also add that I have tried this and it seems to work, but I haven't seen any examples online do this so wondered if there is some reason why not.

Lets say I have a React ponent that has a "state" with 10 fields:

this.state = {
    field1: 1,
    field2: 2,
    ... other fields
    something: 'a'
};

In one of my event handlers, I decide I want to update a single state field. Is it for some reason bad practice to do it like this?

// state has 10 other properties not touched here, and I want them to
// retain their existing values
this.state.something = 'b';
this.setState(this.state);

Or must I do:

this.setState({
    field1: this.state.field1,
    field2: this.state.field2,
    ... set other fields with current value
    something: 'b'
});

I'm aware there are libraries that make it easy to copy object state, just wondered if it is necessary to do that. I should also add that I have tried this and it seems to work, but I haven't seen any examples online do this so wondered if there is some reason why not.

• javascript
• reactjs
• typescript

3 Answers 3

To update single field you need to pass object with this field. React will merge it for you.

this.setState({something: 'b'})

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

use Object.assign for clone object

const newState = Object.assign({}, this.state, {
  something: 'b'
})

this.setState(newState)

Or you can merge current state:

this.setState({
  something: 'a',
  something2: 'b', 
})

You would actually mark all the members of State as optional.

interface State {
  field1?: number, 
  field2?: number,
}

This is not as unsafe as you might think. TypeScript added the concept of freshness to support this pattern and others.

More

This is covered here :

https://basarat.gitbooks.io/typescript/content/docs/types/freshness.html#use-case--react-state