# useObservable Hook

Since all the fundamental constructs like Units, Actions, Systems, and Clusters are Observable, it makes sense that we create a custom Hook to easily bind their value to a component's local state. `useObservable` is much simpler and ergonomic to use than [useUnit](https://docs.activejs.dev/activejs/integrations/react/useunit-hook). 

### useObservable Hook:

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { useState, useEffect } from "react";
import { Observable } from "rxjs";

export type ObservableValueType<T> = T extends Observable<infer X> ? X : never;

export function useObservable<U extends Observable<any>>($: U) {
  type T = ObservableValueType<U>;
  const [value, setValue] = useState<T>();

  useEffect(() => {
    const subscription = $.subscribe(setValue);
    return () => subscription.unsubscribe();
  }, [$]);

  return value;
}
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
import { useState, useEffect } from "react";
import { Observable } from "rxjs";

export function useObservable(observable) {
  const [value, setValue] = useState();

  useEffect(() => {
    const subscription = observable.subscribe(setValue);
    return () => subscription.unsubscribe();
  }, [observable]);

  return value;
}
```

{% endtab %}
{% endtabs %}

### Example:

```typescript
// create a Unit or System, Cluster, Action
const listUnit = new ListUnit({initialValue: ['🤯']});

// a simple component
function Visualizer() {
  const value = useObservable(listUnit);

  return <span>{value}</span>;
}

// it'll render this immediately and will render any future values
🤯
```

### More Examples:

* [StackBlitz](https://stackblitz.com/edit/react-ts-aj1f8t?file=index.tsx) example that shares a Unit among multiple components.
* Simple [Counter](https://docs.activejs.dev/integrations/react#3-counter-using-useobservable-hook) example.
* See [this](https://docs.activejs.dev/fundamentals/systems/asyncsystem#react) for usage in combination with [AsyncSystem](https://docs.activejs.dev/activejs/fundamentals/systems/asyncsystem).