Updating state in more than one component at a time

Question

I have a listview component which consists of a number of child listitem components.

Each child listitem have a showSubMenu boolean state, which display a few extra buttons next to the list item.

This state should update in response to a user event, say, a click on the component DOM node.

childcomponent:

_handleClick() {
  ... mutate state
  this.props.onClick() // call the onClick handler provided by the parent to update the state in parent
}

However, it feels somewhat wrong to update state like, as it mutates state in different places.

The other way i figured i could accomplish it was to call the this.props.onClick directly, and move the child state into the parent as a prop instead, and then do change the state there, and trickle it down as props.

Which, if any, of these approaches is idiomatic or preferable?

Answer 1

With many components depending on same state and its mutation you will encounter two issues.

1. They are placed in component tree so far away that your state will have to be stored in a parent component very high up in the render tree.
2. Placing the state very high far away from children components you will have to pass them down through many components that should not be aware of this state.

THERE ARE TWO SOLUTIONS FOR THIS ISSUE!

1. Use React.createContext and user context provider to pass the data to child elements.
2. Use redux, and react-redux libraries to save your state in store and connect it to different components in your app. For your information react-redux library uses React.createContext methods under the hood.

EXAMPLES:

Create Context

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">
    <Toolbar />
      </ThemeContext.Provider>
    );
  }
class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
}

// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

REDUX AND REACT-REDUX

import { connect } from 'react-redux'

const App = props => {
  return <div>{props.user}</div>
}

const mapStateToProps = state => {
  return state
}

export default connect(mapStateToProps)(App)

For more information about redux and react-redux check out this link: https://redux.js.org/recipes/writing-tests#connected-components

Answer 2

First of all, I think that the question's title doesn't describe very well what's your doubt. Is more an issue about where the state should go.

The theory of React says that you should put your state in the higher component that you can find for being the single source of truth for a set of components.

For each piece of state in your application:

• Identify every component that renders something based on that state.
• Find a common owner component (a single component above all the components that need the state in the hierarchy).
• Either the common owner or another component higher up in the hierarchy should own the state.
• If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

However, a Software Engineer at Facebook said:

We started with large top level components which pull all the data needed for their children, and pass it down through props. This leads to a lot of cruft and irrelevant code in the intermediate components. What we settled on, for the most part, is components declaring and fetching the data they need themselves...

Sure, is talking about data fetched from stores but what im traying to say is that in some cases the theory is not the best option.

In this case i would say that the showSubMenu state only have sense for the list item to show a couple of buttons so its a good option put that state in the child component. I say is a good option because is a simple solution for a simple problem, the other option that you propose means having something like this:

var GroceryList = React.createClass({
  handleClick: function(i) {
  console.log('You clicked: ' + this.props.items[i]);
},

render: function() {
  return (
    <div>
      {this.props.items.map(function(item, i) {
        return (
          <div onClick={this.handleClick.bind(this, i)} key={i}>{item} </div>
        );
      }, this)}
    </div>
  );
}
});

If, in a future, the list view has to get acknowledge of that state to show something for example, the state should be in the parent component.

However, i think it's a thin line and you can do wathever makes sense in your specific case, I have a very similar case in my app and it's a simple case so i put the state in the child. Tomorrow maybe i must change it and put the state in his parent.