There are many state management libraries out there, with the two most popular being Redux and MobX.
In Redux, you keep the state of your application inside an object literal that belongs to a store. When the state needs to be changed, an action describing what has happened should be emitted.
Then, you'd define a set of reducer functions, each responding to different types of actions. The purpose of a reducer is to generate a new state object that’ll replace the last one:
This way, updating the state no longer requires calling 20 different onChange functions.
However, you'd still need to pass the state via the props of many components. There’s a way to mitigate this through the use of selectors; but more on that later.
