How to properly update-rerender components?

Question

React

Three options are provided below, which of them will be the most correct and which cannot exist at all. And if you can then add why you have such an opinion.
//=== first option ========================================== ==========//

// один большой общий стор,
    // который в реальном приложении
    // будет хранить или передавать
    // свойства для разных компонентов
    
    function appStore() {
        return {
            getPropForComponentA(){
                return 'some-value';
            },
            getPropForComponentB(){
                return 'some-value';
            }
        };
    }

export default class B extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <div propForComponentB={this.props.store.propForComponentB()}></div>
        );
    }
};

export default class A extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <B
                propForComponentB={this.props.store}
                propForComponentA={this.props.store.getPropForComponentA}
            ></B>
        );
    }
};

export default class App extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <A someProp={this.props.store}></A>
        );
    }
};

// передали один большой общий стор
// в приложение и все компоненты
// сами возьмут то что им нужно.

<App store={appStore()}></App>

//=== second option ========================================== ==========//

// один большой общий класс стор,
// который будет посылать события
// которое будет слушать компонент
// App и вызывать рендеренг передавая
// один большой стор чтобы все кому
// нужно брали то что нужно.

export default class AppStore extends EventEmitter{
    constructor(){
        super();
    }

    getPropForComponentA(){
        return 'some-value';
    }
    getPropForComponentB(){
        return 'some-value';
    }
}

export default class B extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <div propForComponentB={this.props.store.propForComponentB()}></div>
        );
    }
};

export default class A extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <B
                propForComponentB={this.props.store}
                propForComponentA={this.props.store.getPropForComponentA}
            ></B>
        );
    }
};

export default class App extends Component{
    constructor(props) {
        super(props)
    }

    componentWillMount(){
        return this.props.store.on('change', ()=> {
            this.setState({
                store: thie.props.store
            });
        });
    }

    render(){
        return (
            <A someProp={this.props.store}></A>
        );
    }
};

// передали один большой общий стор
// в приложение и все компоненты
// сами возьмут то что им нужно.

<App store={new AppStore()()}></App>

//=== third option ========================================== ==========//

// два отдельных маленьких сторов
// каждый заточен под свой компонент

export default class AStore extends EventEmitter{
    constructor(){
        super();
    }

    getPropForComponentA(){
        return 'some-value';
    }
}

export default class BStore extends EventEmitter{
    constructor(){
        super();
    }

    getPropForComponentB(){
        return 'some-value';
    }
}

export default class B extends Component{
    constructor(props) {
        super(props)
    }

    componentWillMount(){
        return this.props.store.on('change', ()=> {
            this.setState({
                propForComponentB: thie.props.store.getPropForComponentB()
            });
        });
    }

    render(){
        return (
            <div propForComponentB={this.props.store.propForComponentB}></div>
        );
    }
};

export default class A extends Component{
    constructor(props) {
        super(props)
    }

    componentWillMount(){
        return this.props.store.on('change', ()=> {
            this.setState({
                propForComponentA: thie.props.store.getPropForComponentA()
            });
        });
    }

    render(){
        return (
            <div store={new BStore()} propForComponentA={this.props.store.propForComponentA}></div>
        );
    }
};

export default class App extends Component{
    constructor(props) {
        super(props)
    }

    render(){
        return (
            <A store={new AStore()}></A>
        );
    }
};

// создаем приложение и уже каждый
// родитель устанавливает нужные
// и заточенные только под детей сторы

<App></App>

Answer 1

In general, the third option is closest to reality, and the stage when everyone wrote their own storage implementation has actually passed, now the most popular and at the same time the most flexible scheme is redux, I recommend reading its documentation https://github.com/rackt/redux