Skip to main content

useObservers

useObservers is a Hook that allows you to react to changes in multiple observables in a single statement.

const {foo, bar} = useObservers({foo: fooObservable, bar: barObservable});

Reference​

useObservers(observables)​

import { useObserver } from 'react-obsidian';

const foo = new Observable(0);
const bar = new Observable(true);

const useHook = () => {
  const {foo, bar} = useObservers({foo, bar});
  return {
    foo,
    bar,
  };
}

Parameters​

A map of observables to subscribe to.

Returns​

An object containing the current values of the observables.

Caveats​

  • The useObservables hook is useful in cases where you need to read the values of multiple observables. If you need to update observables, you might want to use the useObserver hook instead as it provides a more convenient API for updating observables.

Usage​

Observing multiple state properties​

The useObservers hook is useful in cases where you need to react to changes of multiple observables. This is commonly used when observing state properties. Instead of observing each property individually, you can use the useObservers hook to observe all of them in a single statement. This can make your code more readable and easy to understand.

import { useObservers } from 'react-obsidian';

type State = {
  foo: Observable<number>;
  bar: Observable<boolean>;
};

const useHook = ({state}: {state: State}) => {
  const {foo, bar} = useObservers({
    foo: state.foo,
    bar: state.bar
  });
  
  return {
    foo,
    bar,
  };
}
tip

If you find the useObservers API too verbose, consider having your state extend the Model class. It provides a lean abstraction for observing state properties.