# React

Using ActiveJS with React is pretty straightforward since ActiveJS has the same basic API as every other subscription-based State Management solution. If you're following the [general guidelines](https://docs.activejs.dev/activejs/guides/code-style), then you are already on the right path.

Apart from the following examples, you will find more examples in the [Examples](https://docs.activejs.dev/activejs/more/examples) section.

## Examples:

### 1. Counter using Hooks

Here's an example of implementing a simple **counter** with ActiveJS [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit) and **React Hooks**.

```typescript
// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1;
const decrement = value => value - 1;

// create a react component
function App() {
  const [value, setValue] = useState<number>(); // create local state

  // use an effect to update the local state when counterUnit's value changes
  useEffect(() => {
    const subscription = counterUnit.subscribe(setValue);
    return () => subscription.unsubscribe(); // prevent memory leak
  }, []);

  return (
    <React.Fragment>
      Counter Value: {value}

      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
    </React.Fragment>
  );
}
```

Try it out on [StackBlitz](https://stackblitz.com/edit/react-ts-deakuh?file=index.tsx).

### 2. Counter using [useUnit](https://docs.activejs.dev/activejs/integrations/react/useunit-hook) Hook

Here's the same **counter** example using the [useUnit](https://docs.activejs.dev/activejs/integrations/react/useunit-hook) Hook. This is much better than replicating the same `useState` and `useEffect` logic every time you want to use a Unit.

```typescript
// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1
const decrement = value => value - 1

// create a react component
function App() {
  const {value, dispatch, resetValue} = useUnit(counterUnit)

  return (
    <React.Fragment>
      Counter Value: {value}

      <button onClick={() => dispatch(increment)}>Increase</button>
      <button onClick={() => dispatch(decrement)}>Decrease</button>
      <button onClick={() => resetValue()}>Reset</button>
    </React.Fragment>
  )
}
```

Try it out on [StackBlitz](https://stackblitz.com/edit/react-ts-bf5mxu?file=index.tsx).

### 3. Counter using [useObservable](https://docs.activejs.dev/activejs/integrations/react/useobservable-hook) Hook

Here's the same **counter** example again, using the [useObservable](https://docs.activejs.dev/activejs/integrations/react/useobservable-hook) Hook. This is even better than [useUnit](https://docs.activejs.dev/activejs/integrations/react/useunit-hook), since we don't have to re-map the Unit's API again in a Hook, we just need the dynamic value to trigger rendering update, and for `dispatch` and other methods, we can use the Unit directly.

```typescript
// initialize a NumUnit.
const counterUnit = new NumUnit() // with default value 0

// define two pure functions that produce a new value
const increment = value => value + 1;
const decrement = value => value - 1;

// create a react component
function App() {
  const value = useObservable(counterUnit);

  return (
    <React.Fragment>
      <p>
        Counter Value: <b>{value}</b>
      </p>

      <button onClick={() => counterUnit.dispatch(increment)}>Increase</button>
      <button onClick={() => counterUnit.dispatch(decrement)}>Decrease</button>
      <button onClick={() => counterUnit.resetValue()}>Reset</button>
    </React.Fragment>
  );
}
```

Try it out on [StackBlitz](https://stackblitz.com/edit/react-ts-iifk5z?file=index.tsx).