# useStableCallback
> Returns a memoised callback with a stable reference that always invokes the latest version.

Returns a callback with a stable reference identity that always delegates to the latest version of the function. This avoids unnecessary re-renders and effect re-runs when passing callbacks as dependencies.

## Import

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

## Example

```jsx
() => {
  const [count, setCount] = React.useState(0);
  const [logs, setLogs] = React.useState([]);

  const stableLog = useStableCallback(() => {
    setLogs(prev => ['Count is: ' + count, ...prev]);
  });

  React.useEffect(() => {
    const id = setInterval(stableLog, 2000);
    return () => clearInterval(id);
  }, [stableLog]);

  return (
    <Flex flow="column">
      <Flex>
        <Button onClick={() => setCount(c => c + 1)}>{'Increment'}</Button>
        <Text>{'Count: ' + count}</Text>
      </Flex>

      <Flex
        flow="column"
        gap="none"
        padding="spacingS"
        css={{
          background: '$backgroundNeutralModerate',
          height: 100,
          overflow: 'auto'
        }}
      >
        {logs.map((log, i) => (
          <Text fontFamily="mono" variant="eta" key={i}>
            {log}
          </Text>
        ))}
      </Flex>
      <Text variant="zeta">
        {'Logs every 2 seconds, stable, independently from state changes'}
      </Text>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name       | Type                      | Default | Description                         | Required |
| ---------- | ------------------------- | ------- | ----------------------------------- | -------- |
| `callback` | `(...args: any[]) => any` | `—`     | The callback function to stabilise. |          |

### Returns

`T` — A function with a stable reference that delegates to the latest callback version when called.