# useControllableProp
> Determines whether a component prop is controlled or uncontrolled.

Determines whether a component prop is controlled (externally managed) or uncontrolled (internally managed). Useful for building components that support both controlled and uncontrolled usage patterns.

## Import

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

## Example

```jsx
function TextInput({ prop, onChange, defaultState }) {
  const [state, setState] = React.useState(defaultState);

  // Determine if the component is controlled and get the effective value
  const [isControlled, value] = useControllableProp(prop, state);

  const handleChange = event => {
    if (!isControlled) {
      setState(event.target.value);
    }
    onChange?.(event);
  };

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

---

## API reference

### Arguments

| Name    | Type             | Default | Description                                                                  | Required |
| ------- | ---------------- | ------- | ---------------------------------------------------------------------------- | -------- |
| `prop`  | `T \| undefined` | `—`     | The external prop value. If defined, the component is considered controlled. |          |
| `state` | `T`              | `—`     | The internal state value, used when the component is uncontrolled.           | Yes      |

### Returns

`[isControlled: boolean, value: T]` — A tuple where the first element indicates whether the prop is controlled, and the second is the effective value.