Simpler state manament alternative to Redux, MobX, Context API, etc I got frustrated with the jargon and created an alternative state management solution. Its up at https://github.com/smakazmi/react-soliit. It goes something like this

import React from "react";

export default class StateStore&lt;T&gt;  {
  private listeners: Array&lt;Function&gt;;
  constructor(public state: T) {
    this.listeners = new Array&lt;() =&gt; void&gt;();
  }

  private fireOnSetState() {
    this.listeners.forEach(l =&gt; {
      try {
        l();
      }
      catch { }
    })
  }

  protected setState(newState: Partial&lt;T&gt;) {
    this.state = { ...this.state, ...newState };
    this.fireOnSetState();
  }
  subscribe(callback: () =&gt; void) {
    if (this.listeners.indexOf(callback) &lt; 0)
      this.listeners.push(callback);
  }
  unsubscribe(callback: () =&gt; void) {
    this.listeners = this.listeners.filter(l =&gt; l !== callback);
  }
}

export const withStores = function (WrappedComponent: any, stores: { [index: string]: StateStore&lt;{}&gt; }) {
  return class extends React.Component {
    updateState = () =&gt; {
      this.forceUpdate();
    }
    componentDidMount() {
      Object.keys(stores).forEach(k =&gt; {
        stores[k].subscribe(this.updateState);
      });
    }
    componentWillUnmount() {
      Object.keys(stores).forEach(k =&gt; {
        stores[k].unsubscribe(this.updateState);
      });
    }
    render() {
      return (&lt;WrappedComponent {...this.props} {...stores} /&gt;);
    }
  }
}


Can be used as follows

const counterStore = new StateStore({ count: 0 });

const Counter = function({ counterStore }) {
  const increment = () =&gt;
    counterStore.setState({ count: counterStore.state.count + 1 });
  const decrement = () =&gt;
    counterStore.setState({ count: counterStore.state.count - 1 });
  return (
    &lt;div&gt;
      &lt;button onClick={decrement}&gt;-&lt;/button&gt;
      &lt;span&gt;{counterStore.state.count}&lt;/span&gt;
      &lt;button onClick={increment}&gt;+&lt;/button&gt;
    &lt;/div&gt;
  );
};
const ConnectedCounter = withStores(Counter, { counterStore });
render(&lt;ConnectedCounter /&gt;, document.getElementById("root"));


The sample is available at https://stackblitz.com/edit/soliit-simple-counter

Seems to work fine, at the same time seems too good to be true. So looking for reasons to why to go for Redux, MobX or even Unstated and not something as simple as this.
After looking at the implementation, this is not an implementation of global state management. The entire point of things like redux is so you can directly connect components to a global store. In your case, it looks like every instance of StateStore has its own unique data structure, which seems to imply that you are only going to use StateStore once.

You can only import it at the highest level and keep passing it down in order to persist the data. This has very heavy performance implications. Read up on how React decides on whether it should scan an entire component for any changes (rerenders can severely add up) and how the reconciliation algorithms relates to it.

Your implementation is essentially this.state but also handles functions. Technically the same functionality, but it's not a true global state like how the context api or redux works.