# useWatchable

**Kind:** Function

A React hook for watching data in Airtable models like `Table` and `Record`. Each
model has several watchable keys that can be used with this hook to have your component
automatically re-render when data in the models changes. You can also provide an optional
callback if you need to do anything other than re-render when the data changes.

This is a low-level tool that you should only use when you specifically need it. There are more
convenient model-specific hooks available:

* For `Base`, `Table`, `View`, or `Field`, use `useBase`.
* For `RecordQueryResult` or `Record`, use `useRecords`, `useRecordIds`, or `useRecordById`.
* For `Viewport`, use `useViewport`.
* For `SettingsButton`, use `useSettingsButton`.

If you're writing a class component and still want to be able to use hooks, try `withHooks`.

```js
import {useWatchable} from '@airtable/blocks/ui';

function TableName({table}) {
    useWatchable(table, 'name');
    return <span>The table name is {table.name}</span>;
}

function ViewNameAndType({view}) {
    useWatchable(view, ['name', 'type']);
    return <span>The view name is {view.name} and the type is {view.type}</span>;
}

function RecordValuesAndColorInViewIfExists({record, field, view}) {
    useWatchable(record, ['cellValues', view ? `colorInView:${view.id}` : null]);
    return <span>
        The record has cell value {record.getCellValue(field)} in {field.name}.
        {view ? `The record has color ${record.getColorInView(view)} in ${view.name}.` : null}
    </span>
}
```

```js
import {useWatchable} from '@airtable/blocks/ui';

function ActiveView({cursor}) {
    useWatchable(cursor, 'activeViewId', () => {
         alert('active view changed!!!')
    });

    return <span>Active view id: {cursor.activeViewId}</span>;
}
```

**Parameters:**
- `models` (`Watchable<Keys> | ReadonlyArray<Watchable<Keys> | null | undefined> | null | undefined`) — The model or models to watch.
- `keys` (`Keys | ReadonlyArray<Keys | null> | null`) — The key or keys to watch. Non-optional, but may be null.
- `callback?` (`undefined | object`) — An optional callback to call when any of the watch keys change.

**Returns:** `void`