Don't like app logic in React hooks?

Actions are plain functions. Components just read.

useStateuseEffectuseMemo

Before · logic in hooks

export function Header() {
  const [user, setUser] =
    useState<User | null>(null)
  useEffect(() => {
    fetchUser().then(setUser)
  }, [])
  const isAdmin = useMemo(
    () => user?.roles.includes('admin'),
    [user],
  )

  return (
    <span>
      {isAdmin ? 'Admin' : 'User'}
    </span>
  )
}

After · logic in a store


const $user = atom<User | null>(null)

onMount($user, () => {
  fetchUser().then($user.set)
})
const $isAdmin = computed($user, (user) =>
  user?.roles.includes('admin'),
)
export function Header() {
  const isAdmin = useStore($isAdmin)
  return (
    <span>
      {isAdmin ? 'Admin' : 'User'}
    </span>
  )
}

Like your logic in hooks? Zustand is a great choice.

npm install nanostores

Getting started →

Two islands need the same data →One state for several frameworks →