Skip to main content

API: useStoreInitialized

React hook to defer rendering until specified MobX store instances are initialized. Returns a boolean flag that toggles from false to true immediately after the provided stores are referenced on component mount.

function useStoreInitialized(
  storeInstances: StoreInstance<{}, {}, {}, {}>[]
): boolean

Parameters​

  • storeInstances: Array of store instances created via createChunk. Each element must conform to the StoreInstance type.

Returns​

  • isInitialized: boolean flag. Initially false on first render; becomes true after the effect runs.

Behavior​

  1. On component mount, the hook sets isInitialized to true inside a useEffect.
  2. The hook then causes a re-render of the consumer component so that UI can proceed once stores are ready.

Example​

import React from "react"
import { useStoreInitialized } from "mobx-chunk"
import { authStore } from "../stores/auth"
import { postsStore } from "../stores/posts"

export function App() {
  const isReady = useStoreInitialized([authStore, postsStore])

  if (!isReady) {
    return <div>Loading stores…</div>
  }

  return <MainRouter />
}

Usage​

Use useStoreInitialized when:

  • You have multiple MobX store instances created at module scope that must be referenced before UI renders.
  • You want to avoid accessing uninitialized store state in your components.