Discussion: Storing hooks in the state about zustand HOT 5 CLOSED

At work we do store components in the store, basically everything goes, but in the end there has got to be a reason for doing it. If you struggle coming up with one, i wouldn't do it.

from zustand.

I don't see a problem with having custom hooks in the state but I haven’t done that before.

In your example, the only way to load comments is through the hook. Let's say in the future you want to load comments when a user scrolls or clicks something. Now you have to add a loadComments function anyway and your hook will probably just call loadComments in useEffect. At that point useLoadComments would just be extra abstraction to save a few characters. In my opinion it's probably not worth it.

from zustand.

I would say it's not good in general, but it works as long as you don't violate rules of hooks. So, you can use the pattern with caution.

from zustand.

sometimes you want an action that would need a hook, or context, and in those cases, storing a hook that returns a function or an object would be very nice.

from zustand.

Hi, I don't see any issue in your snippet. Are you storing a hook in state?

As for the original issue, here's my current recommendation:

We don't intentionally document about storing hooks in Components or hooks, as it may confuse ordinary users.

The only valid use case I can think of is to lazy initialize a hook.

import create from 'zustand'

const Component = () => {
  const useStoreRef = useRef()
  if (!useStoreRef.current) {
    useStoreRef.current = create(...)
  }
  const useStore = useStoreRef.current
  ...
}

You could use a state like:

const useStore = useState(() => create(...))

but it involves unnecessary state. One might want to consider useMemoOne for shorthands.

from zustand.