Skip to main content

useStateValueWithReactiveSelector

Caution: Unstable API

The accepted parameters, return value and behavior of this function may change, and it might be renamed or entirely removed between minor versions in future releases.

This is provided as an escape hatch in special cases where useStateValue is not behaving as expected. For example, the selector depends on external values (props or data from other hooks) and the returned value does not change when those dependencies change. Under normal circumstances, the returned value will change when those external values change and this hook is not needed.

Overview

Type: Function

A React hook to consume either a SimpleStateManager, StateManager, or AsyncStateManager with a selector that is wrapped in useCallback.

const state = useStateValueWithReactiveSelector(stateManager, selector)
Overloads (+3)
const state = useStateValueWithReactiveSelector(stateManager, selector, active)
const state = useStateValueWithReactiveSelector(stateManager, selector, equalityFn)
const state = useStateValueWithReactiveSelector(stateManager, selector, equalityFn, active)

Parameters

  • stateManagerThe State Manager to watch for changes.
    Type: SimpleStateManager, StateManager or AsyncStateManager
    Required: Yes
  • selectorA function that accepts the state as an argument and returns a derived value. This function must be declared outside of the component function body or wrapped in useCallback.
    Type: StateSelector
    Required: Yes
  • equalityFnA 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 the Equality object from cotton-box. This function must be declared outside of the component function body or wrapped in useCallback.
    Type: EqualityFn
    Required: No — (default value: Object.is)
  • activeControls whether the hook should watch for state changes and trigger component update.
    Type: boolean
    Required: No — (default value: true)

Examples

Basic

Custom equality checking

Conditionally watch for changes