Differences between `computed` and a hook

What are the differences between using computed:

const model = {
  user: null,
  isLoggedIn: computed((state) => state.user !== null),
};

// In component
const isLoggedIn = useStoreState(state => state.model.isLoggedIn)

And a hook like this:

function useIsLoggedIn(){
  const user = useStoreState(state => state.model.user)
  return user !== null
}

// In component
const isLoggedIn = useIsLoggedIn()

[jmyrland]

This is a hook, so it can’t be used inside actions and thunks. On the other hand, if I make it a computed property, then I can use it within actions and thunks. But only the cached value will be available, and I feel like that could introduce hard-to-detect bugs.

Well it might be in some cases - and it all depends on your store. I would suggest you to test out if computed props are working in your case. If it works - great, if it doesn’t, you can get around it via the solution below.

Is there another approach?

Computed props are just derived of state. If you are worried that you might get cached computed props, you could extrapolate the “compute” generator and reuse it within your action/thunk to regenerate the data based on the current state.

const model = {
  comptutedProp: computed((state) => generateComplexData(state))
  myAction: action((state) => {
    const data = generateComplexData(state)
    // etc..
  })
}

const generateComplexData = (state) => { /* extract from state */ }

[jmyrland]

How does it determine if the input state has changed? If the input state is an object, will the input always be considered “changed” and cause excessive re-renders?

The input is deep-diffed based on the previous previous input.

The computed property is also checked and only updated if it has changed, to prevent excessive renders.

see #764 for more details

I’m able to pass a custom equality function to useStoreState, but not to computed.

State resolvers provides the input to the computed props. Equality checks are handled internally.

Read about state resolvers for computed props here.