# useLiveRef
> Returns a ref that always holds the latest value, synchronised via layout effect.

Keeps a ref object in sync with the latest value using a layout effect. Useful for accessing the current value inside callbacks without adding it to dependency arrays.

## Import

```js
import { useLiveRef } from '@volue/wave-react';
```

## Example

```jsx
() => {
  const [count, setCount] = React.useState(0);
  const liveCountRef = useLiveRef(count);
  const countRef = React.useRef(count);
  const [snapshot, setSnapshot] = React.useState(null);

  return (
    <Flex flow="column">
      <Text>{'Current count: ' + count}</Text>
      <Flex>
        <Button onClick={() => setCount(c => c + 1)}>{'Increment'}</Button>
        <Popover.Root>
          <Popover.Trigger
            as={Button}
            onClick={() =>
              setSnapshot({
                liveRef: liveCountRef.current,
                regularRef: countRef.current
              })
            }
            variant="outline"
          >
            {'Check refs'}
          </Popover.Trigger>
          <Popover.Content padding="spacingM">
            <Flex flow="column" gap="spacingS">
              <Text>{'useLiveRef: ' + snapshot?.liveRef}</Text>
              <Text>{'useRef: ' + snapshot?.regularRef}</Text>
            </Flex>
          </Popover.Content>
        </Popover.Root>
      </Flex>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name    | Type | Default | Description                            | Required |
| ------- | ---- | ------- | -------------------------------------- | -------- |
| `value` | `T`  | `—`     | The current value to track in the ref. | Yes      |

### Returns

`RefObject<T>`