react-global-state.js

// file: num-store.js
// plain JS "store" - one of many possible!
//-----------
export const numberStore = {

    count: 0;
}
//-----------

// file: incrementor.js
// a react component changing store data
//-----------
import { numberStore } from "./num-store.js";

class Incrementor extends React.Component {
    constructor(props) {}
    render() {
        return (
            <div>
                <button onClick={() => numberStore.count++}>Increment</button>
            </div>
        )
    }
}
//-----------

// file: count-display.js
// another react component (far away from Incrementor) displaying store data
//-----------
import { numberStore } from "./num-store.js";

class CountDisplay extends React.Component {
    constructor(props) {}
    render() {
        return (
            <div>
                The count is:
                <div>{numberStore.count}</div>
            </div>
        )
    }
}
//-----------

used in this article