React classes in main component constructor

Question

Let's say I have a lot of app state to manage in my React application. Therefore, I would like to split the state into smaller, manageable chunks.

For example I have the following main component with state and methods that alter this state.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: ['some', 'items'],
      bar: [{ arr: 'of objects'}]
    }
  }

  changeFoo() {some code in here...}
  changeBar() {some code in here...}
}

The state and methods written in the App component are getting out of hand. Yet it must be written in the App component since the state is passed to other components as props. How would you usually manage this?

now · Accepted Answer · 2020-04-17 14:54:41Z

1

When you see that the state of your React application is getting out of hand, it's usually time to bring in a state management library like Redux (there're a few and Redux is the most popular one).

It'll help you have a global state that is managed in a reasonable way.

answered Apr 17, 2020 at 14:54

now

5,0473 gold badges29 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Winter Over a year ago

That's what I thought, thank you I will look into it :) I have tried splitting the state into smaller chunks by creating classes for state data and methods on them. It works but I assume using a state management library must be the better solution.

now Over a year ago

Yes, Redux is really small in terms of lines of code, because it's more about guiding principles elaborated by Smart People than fancy tech :) Good principles are hard to find on your own, take the shortcut even if it seems cumbersome at first ^^

Imran Rafiq Rather · Accepted Answer · 2020-04-17 15:13:57Z

1

When we see how React works. It is based on one-directional data flow. So, usually the Application state is kept at the top most Component (Say, App Component) in your case. So that data/state can be passed down as props to the component that needs it.

There, however may be the cases where children components of the parent, needs to work with the same data(Say in case of an event - a button click that happens in the child component.) In that case we write a function in the parent component and pass the function as props to the children, so that the state gets updated in the parent itself and any child gets updated data.

In pure React (without using any state management library), we have to pass the state as props to work with our app. But in case you choose to use a state management library such as Redux, then the components (known as Containers) can directly communicate with the Application State.

And If your application state contains objects within objects(like you have shown) or Array of Objects containing more Objects, then you cannot use setState() to update the state directly. In most of the cases, you take copy of the state and then use JSON.parse(JSON.stringify(state)) to do deep cloning and work with the state in a best possible manner.

There are other things in the example, the functions that you have used within the class , you need to bind the scope of this variable to point to the current class. This we do inside the constructor method, or simple make use of arrow function in order to avoid errors.

If you need more explanation, I will share with you :)

edited Apr 17, 2020 at 15:13

answered Apr 17, 2020 at 14:51

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

1 Comment

Imran Rafiq Rather Over a year ago

@Steve Winter There are other things, like the methods that you have used within the class , you need to bind the scope of this variable to point to the current class. This we do inside the constructor method, or simple make use of arrow function in order to avoid errors.

Code-Apprentice · Accepted Answer · 2020-04-17 14:54:55Z

0

One solution is to make a generic change() function with a parameter for the key that should be changed:

change(key, value) {
   setState({key: value, ...this.state});
}

Now when you want to add a listener to a child component:

<Foo onChange={ value => change('foo', value) }/>
<Bar onChange={ value => change('bar', value) }/>

answered Apr 17, 2020 at 14:54

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Collectives™ on Stack Overflow

React classes in main component constructor

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related