How to control parent and global components with React

Question

With React, I'm curious what the intended approach is for utilizing and manipulating modals, app backgrounds, app rotation etc. which aren't inside of the subcomponents.

How are you supposed to "loop" around and send a message to a top-level component (app)?

Are we supposed to pass callbacks through all of the layers' props?

Thanks

Answer 1

Yes, this is called inverse data flow. State flows down the hierarchy and events bubble up the hierachy.

Thinking in React :

Since components should only update their own state, the parent component will pass callbacks to the child component that will fire whenever the state should be updated.

The callbacks passed by the Parent Component in properties will call setState(), and the app will be updated.

Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

Lifting state up :

There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

Do you have to manage state across many components?

If so, there are good state management libraries like Redux or MobX. For many practical applications, these libraries and their React bindings are a good choice for managing state that is relevant to many components!

You can use those libraries when needed to decouple what happened from how things change.

Answer 2

I wondered exactly the same when I started using React.

Lets call modals being opened/closed, app backgrounds, app rotation and similar things you want to keep track of the state of your UI.

Passing callbacks across complex sections of your component hierarchy to manage the state of your UI is not the way to go.

Tools exist which provide a data layer to your React UI components. This data layer is independent of your component hierarchy and allow you to control whatever state you need across every part (component) of your UI. The idea is having a store (file with variables corresponding to whatever state), which you can import from inside components, and where you save state changes (read variables) you need to keep track of. You can then use those state variables to make whatever decision you might need inside the components or transport data as necessary.

--

You have Redux and MobX. The latest offers basically the same functionality but has a gentler learning curve. It is simpler to use mostly because it doesn't require you to specify a complete new state upon every change (redefining all the variables you are keeping track instead of just what changed). It's therefore less verbose and, in my opinion, straightforward.

I recommend you to study Redux first in order to understand the data layer concept and how it works. I've seen mentioned how Redux declarations are useful in apps with really complex state. I personally never felt the need. So basically go Redux if you don't mind handling extra typing and complexity in order to get complete control. For practical use, MobX keeps thing simpler, goes for faster and more straightforward development.

--

There are ways to move state data up and down the component hierarchy without a data layer, but having it becomes absolutely essential as you design more complex apps/UIs using React.

Good luck.