[lj3]

> as multiple independent components might want to share state or listen to shared events, etc.

If you recall, I said...

> Hooks are great because it keeps the state local, but it can be re-used across components if we need to.

The use case you just defined is exactly why hooks were created.

[jypepin]

Are you implying the use of context when you say that hooks allow you to re-use state between components?

Legit question because I don't know hooks very well. To my understanding, hooks are just syntactic sugar to use and update local state in a function component. How does that help you share state between components?

[ryansolid]

I think he must be implying the use of Context as well.

That's where the real power is. Combining the 2. The pattern of use is DI even with a global store like Redux, making it not necessarily truly global. What Context does at a base is potentially use React Components as widely accessed stores. The simplest example usually involves abstracting a Parent Component's state/setState into state, and action functions wrapping a Context Provider.

To what degrees the stores should be laid out hierarchically mimicking the render tree is debatable. But often there is clear hierarchical ownership on large portions of the data. And often the question is what needs to be topmost and what belongs only within nested context. I think the opinion is still out on that. As you have suggested you could manage everything topmost.

Hooks make this really interesting in that they expose this idea of simple change management primitives to any Function component. So while it is still the Context API that allows the data to be shared, Hooks allow for re-usable patterns that can be used out of the box or compositionally built upon. So the Component that contains the provider has the ability through Hooks to do a really good impersonation of Redux(useReducer) or even MobX(useState + useMemo + useEffect). Does this replace those libraries? Probably not. But it is interesting how it gives a built in solution to choose to scale these solution with how you see fit. You have these tools at your disposal without much investment.

[lj3]

I do not imply the use of Context. useState() hooks into the local state of whatever component runs it. For example, if you have the following hook:

    function useMagicNumber(default) {
      const [magicNumber, setMagicNumber] = useState(default)

      return [magicNumber, setMagicNumber]
    }

And the following two components that use said hook:

    function ExampleA({}) => {
      const [magicNumber, setMagicNumber] = useMagicNumber(1)
      console.log(magicNumber) // 1
    }

    function ExampleB({}) => {
      const [magicNumber, setMagicNumber] = useMagicNumber(2)
      console.log(magicNumber) // 2
    }

ExampleA and ExampleB share the same code that's run in the hook useMagicNumber, but the state reflected is unique to the component.

[ryansolid]

Then the confusion was "reuse state" and "share state". Hooks in themselves do neither. Provide primitives to build reusable behaviors. Yes. Solve issues classically considered the domain of Redux. Not on their own.