Use global or local state in React app?

Question

React

Tell me, please, where can I read about the best practice for managing state in a React application?
The idea of ​​redux or freezerjs with one global state is certainly great,
but writing a separate reducer or event handler on any of them and then rendering the entire application somehow does not look very good.
It is clear that the traversal of the entire tree will be fast, and most components will not render according to the shouldComponentUpdate condition, but is this a beautiful solution?
I wrote several dozen simple components, each of which performs its own function, and now there is a problem to combine them into one application.
I used this approach:
The component receives props from the parent and generates html code.
With various events from the user, the component changes its state and makes the render queue.
In order to let the parent know that the state has changed and possibly the necessary new props, I use a callback in which I pass the current state of the component and the name of the event that called it

const componentWillUpdate = () => {
  let { onChange } = props
  if (typeof onChange === 'func') => {
    onChange({ state: this.state, event: "" })
  }
}

and at the parent I write the handler for this event

<Component prop1={ } prop2={ } onChange={ (opts) => this.handleComponentChange(opts) }>

With this approach, you can write components without thinking about some global things, but it turns out that I need to pass data from the leaves up the tree, write their own event handlers for each parent, and then pass the received props back down. It also doesn't look very good.
Where to find balance?

Answer 1

How about Mobx ?