A core concept behind React is that every component should have as few state properties as possible.

Consider a webapp component that can be in one of three modes: “editing”, “viewing”, and “commenting”. The component cannot be in more than one mode at once.

One way to interpret this system is to treat it as three variables, each with two possible values: “on” and “off” (this would be the equivalent of three light switches). This could be represented in the component’s state as three booleans:

this.state = {
  is_mode_editing:    true,
  is_mode_viewing:    false,
  is_mode_commenting: false,
};

However, in order to ensure the component is in only one mode at a time, this state configuration requires that all three properties be set each time the component’s mode needs to be changed:

constructor(props) {
  super(props);
  this.state = {
    is_mode_editing:    true,
    is_mode_viewing:    false,
    is_mode_commenting: false,
  };
}


// To switch the component’s mode, all three properties need to be set
switchToView() {
  this.setState({
    is_mode_editing:    false,
    is_mode_viewing:    true,
    is_mode_commenting: false,
  });
}

Furthermore, if a fourth mode needs added to be added later, a state property for that fourth mode needs to be added to every single function that changes the component’s mode:

constructor(props) {
  super(props);
  this.state = {
    is_mode_editing:    true,
    is_mode_viewing:    false,
    is_mode_commenting: false,
    is_mode_comparing:  false,
  };
}

switchToView() {
  this.setState({
    is_mode_editing:    false,
    is_mode_viewing:    true,
    is_mode_commenting: false,
    is_mode_comparing:  false,
  });
}


// To add a fourth mode, a new state property has to be added to every function
switchToCompare() {
  this.setState({
    is_mode_editing:    false,
    is_mode_viewing:    false,
    is_mode_commenting: false,
    is_mode_comparing:  true,
  });
}

A better way to interpret this system is to treat it as one variable with three possible values (this would be the equivalent of a dial with three settings). This could be represented in the component’s state as a single string variable:

this.state = {
  mode: 'editing',  // Other possible values are 'viewing' and 'commenting'
};

It is trivial to ensure that the component is in only one mode at a time, because this state configuration requires that only one state property be set each time the component’s mode needs to be changed.

constructor(props) {
  super(props);
  this.state = {
    mode: 'editing',
  };
}


// To switch the component’s mode, only one property needs to be set
switchToView() {
  this.setState({
    mode: 'viewing',
  });
}

Furthermore, if a fourth mode needs to be added later, the single state property can simply be set to that fourth mode’s string in just the functions that bring the component to that mode; no other functions need to worry about it.

constructor(props) {
  super(props);
  this.state = {
    mode: 'editing',
  };
}

switchToView() {
  this.setState({
    mode: 'viewing',
  });
}


// To add a fourth mode, no state properties need to be added, and only one function needs to know the fourth mode’s name
switchToCompare() {
  this.setState({
    mode: 'comparing',
  });
}

Holding the state data of your components in as few independent properties as possible reduces human error, makes your component faster, and makes your component easily maintainable.

Happy hacking!