useStateValue

Overview

Type: Function

A React hook to consume either a SimpleStateManager, StateManager, AsyncStateManager, or SimpleFiniteStateManager.

const state = useStateValue(stateManager)

Overloads (+4)

const state = useStateValue(stateManager, selector)

const state = useStateValue(stateManager, selector, active)

const state = useStateValue(stateManager, selector, equalityFn)

const state = useStateValue(stateManager, selector, equalityFn, active)

Parameters

• stateManager — The State Manager to watch for changes.
  Type: SimpleStateManager, StateManager, AsyncStateManager or SimpleFiniteStateManager
  Required: Yes
  
• selector — A function that accepts the state as an argument and returns a derived value. This function does not need to be declared outside of the component function body or wrapped in useCallback.
  Type: StateSelector
  Required: No — (default value: null)
  
• equalityFn — A function that compares the previous state with the upcoming state and returns true if they are considered equal or false if otherwise. Some presets are available in @glyph-cat/equality. This function does not need to be declared outside of the component function body or wrapped in useCallback.
  Type: EqualityFn
  Required: No — (default value: Object.is)
  
• active — Controls whether the hook should watch for state changes and trigger component update.
  Type: boolean
  Required: No — (default value: true)
  

Examples

Basic

With selector

Custom equality checking

Conditionally watch for changes