useObserver - Memorio

⚛️ React Only: This is a React hook and only works within React components

useObserver is a React hook for observing state changes. It automatically subscribes to state changes and includes powerful auto-discovery features.

Installation

npm install memorio

import 'memorio';

Quick Examples

Example 1: Basic Usage

import { useObserver } from 'memorio';

function Counter() {
  useObserver(() => {
    console.debug('Counter changed:', state.counter);
  }, [state.counter]);

  return <div>{state.counter}</div>;
}

Auto-Discovery (Magic Mode)

// Pass your callback WITHOUT dependencies - it auto-discovers!
function MyComponent() {
  useObserver(() => {
    // This will automatically track ALL state properties used inside
    console.debug('Something changed:', state.user.name, state.items.length);
  });

  return <div>{state.user.name}</div>;
}

Example 2: Intermediate

function UserProfile() {
  const [localState, setLocalState] = useState(null);

  useObserver(() => {
    setLocalState(state.user);
  }, [state.user]);

  return <div>{localState?.name}</div>;
}

Example 3: Advanced

// Multiple watchers with array
function MultiWatch() {
  useObserver(() => {
    console.debug('A or B changed:', state.a, state.b);
  }, [state.a, state.b]);

  return <div>{state.a} - {state.b}</div>;
}

// With string path (for store) function StoreWatcher() { useObserver(() => { console.debug('Store changed'); }, 'store.userPreferences');

return

---

## API Reference

### useObserver(callback, deps)

| Parameter | Type | Description |
| --------- | ---- | ----------- |
| `callback` | `function` | Function to run on change |
| `deps` | `function \| string \| array` | State path(s) to watch |

### Callback Parameters

```javascript
useObserver((newValue, oldValue) => {
  console.debug('Changed:', newValue);
}, [state.key]);

// No deps needed - magic auto-discovery!
useObserver(() => {
  // Automatically tracks state.user, state.items, state.counter
  console.log(state.user.name, state.items.length, state.counter);
});

function MyComponent() {
  const [data, setData] = useState(null);

  useObserver((newVal) => {
    setData(newVal);
  }, [state.data]);

  return <div>{data}</div>;
}

}, [state.a, state.b]);