# useControllableState
> Manages state that can be either controlled or uncontrolled.

Provides a unified state management API for components that need to support both controlled and uncontrolled modes. It works like `useState` but can optionally be driven by external props.

## Import

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

## Example

```jsx
function TextInput({ value: valueProp, defaultValue, onChange }) {
  const [value, setValue] = useControllableState({
    value: valueProp,
    defaultValue,
    onChange
  });

  const handleChange = event => {
    setValue(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
}
```

---

## API reference

### Arguments

| Name           | Type                 | Default | Description                                                                         | Required |
| -------------- | -------------------- | ------- | ----------------------------------------------------------------------------------- | -------- |
| `value`        | `T`                  | `—`     | The controlled value. When provided, the hook operates in controlled mode.          |          |
| `defaultValue` | `T \| (() => T)`     | `—`     | The initial value for uncontrolled mode. Can be a value or an initialiser function. |          |
| `onChange`     | `(value: T) => void` | `—`     | Callback invoked when the value changes.                                            |          |

### Returns

`[value: T, setValue: Dispatch<SetStateAction<T>>]` — A tuple similar to `useState`, with the current value and a setter function.