useStoreState

Store

Receives an Ariakit store object (which can be null or undefined) and returns the current state. If a key is provided as the second argument, it returns the value of that key. If a selector function is provided, the state is passed to it, and its return value is used. Selector calls can pass the state keys they read as the second argument to skip unrelated store updates. This list must include every store key the selector reads, or the returned snapshot may stay stale. An empty list means store updates will never notify the selector.

The component using this hook will re-render when the returned value changes.

Code examples

Accessing the whole combobox state:

const combobox = Ariakit.useComboboxStore();
const state = Ariakit.useStoreState(combobox);
const combobox = Ariakit.useComboboxStore();
const state = Ariakit.useStoreState(combobox);

Accessing a specific value from the combobox state:

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, "value");
const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, "value");

Accessing a value using a selector function:

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, (state) => state.value);
const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, (state) => state.value);

Subscribing only to the state keys read by a selector:

const tab = Ariakit.useTabStore();
const selected = Ariakit.useStoreState(
  tab,
  ["selectedId"],
  (state) => state.selectedId === "details",
);
const tab = Ariakit.useTabStore();
const selected = Ariakit.useStoreState(
  tab,
  ["selectedId"],
  (state) => state.selectedId === "details",
);

Accessing the state of a store that may be null or undefined (for example, using a context):

const combobox = Ariakit.useComboboxContext();
const value = Ariakit.useStoreState(combobox, "value");
const combobox = Ariakit.useComboboxContext();
const value = Ariakit.useStoreState(combobox, "value");

useStoreState

Code examples

Stay tuned