simple add-hoc react state managment

no-redux-plz.js

import { Emitter } from 'events'

import React from 'react'

function createInstance() {
    const globalAppState = {
        foo: 'bar',
        spam: 'eggs'
    }

    function render() {
        ReactDOM.render(<App {...globalAppState}/>, document.getElementById('root'));
    };

    const emitter = new Emitter();

    emitter
        .on('update-foo', (newFoo) => {
            globalAppState.foo = newFoo;

            render();
        })
        .on('update-spam', async () => {
            const newSpam = await fetch('/spam');
            globalAppState.spam = newSpam;

            render();
        });

    const EmitterContext = React.createContext(emitter);

    function App(foo, spam) {
        return (
            <EmitterContext.Provider value={emitter}>
                <div>
                    <h1>ohay, {foo}!</h1>
                    Today on the menu: {spam}

                    <UpdatePlz />
                </div>
            </EmitterContext.Provider>
        )
    }

    function UpdatePlz() {
        const emitter = useContext(EmitterContext);

        return (
            <div>
                <button onClick={() => emitter.emit('update-foo', Math.random())}>set foo to random</button>
                <button onClick={() => emitter.emit('update-spam')}>new spam plz!!!</button>
            </div>
        )
    }
}

createInstance()