useValue()

Extracts the value from a signal and subscribes to it.

Note that you do not need to use this hook if you are doing one of the following:

• Wrapping the component with track,
  • Installing the jsx integration with signia-react-jsx.install

Example

const Counter: React.FC = () => {
  const $count = useAtom('count', 0)
  const increment = useCallback(() => $count.set($count.value + 1), [count])
  const currentCount = useValue($count)
  return <button onClick={increment}>{currentCount}</button>
}

You can also pass a function to compute the value and it will be memoized as in useComputed:

Example

type GreeterProps = {
  firstName: Signal<string>
  lastName: Signal<string>
}

const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {
  const fullName = useValue('fullName', () => `${firstName.value} ${lastName.value}`, [
    firstName,
    lastName,
  ])
  return <div>Hello {fullName}!</div>
})

Signature

useValue<Value>(value: Signal<Value, unknown>): Value;

Type parameters

• Value

Parameters

Name	Type
value	Signal<Value, unknown>

Returns

Value

Defined in: signia-react/src/useValue.ts:42

Signature

useValue<Value>(name: string, fn: Function, deps: unknown[]): Value;

Type parameters

• Value

Parameters

Name	Type
name	string
fn	() => Value
deps	unknown[]

Returns

Value

Defined in: signia-react/src/useValue.ts:44