# 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`, or `Field`, use `useBase`.
* For `Record`, use `useRecords`, `useRecordIds`, or `useRecordById`.


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

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

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

function RecordValues({record, field}) {
    useWatchable(record, ['cellValues']);
    return <span>
        The record has cell value {record.getCellValue(field)} in {field.name}.
    </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`