[Rohansi]

I think state management is the worst part of using React. All of the popular/highly recommended packages to manage state require you to write code in unconventional ways without really explaining the design decisions. Why use reducers? They're basically different (worse) syntax for mutable object method calls.

[hombre_fatal]

Try MobX. I think it's the holy grail of state management.

You have your app state in an object/class, and components automatically rerender when the part of the store changes that they access during render.

    class Store {
      counter = 0
      constructor() { makeAutoObservable(this) }
      increment() { this.counter++ }
    }

    const Component = observer(() {
     const store = useStore()
     const click = () => store.increment())
     return <button onClick={click}>{store.counter}</button>
    })

It has a very light set of idiosyncrasies for what it gives you unlike, say, redux.

[Rohansi]

That looks pretty good! I actually implemented my own state management that works like that five years ago because I didn't like the options at the time.

https://github.com/Facepunch/react-class-model (note: context is not required)