> For AI agents: the complete documentation index is available at /react-native-arrangement-view/v0.5/llms.txt, the full documentation bundle is available at /react-native-arrangement-view/v0.5/llms-full.txt.

# useHingeSelector

A hook that observes one value derived from the hinge. The component renders again only when that value changes:

```tsx
import { useHingeSelector } from 'react-native-arrangement-view';

function Screen() {
  const halfOpen = useHingeSelector(
    (hinge) => hinge.status === 'partiallyOpen'
  );

  return halfOpen ? <Tabletop /> : <FullScreen />;
}
```

[`useHingeChange`](/react-native-arrangement-view/v0.5/api/use-hinge-change.md) returns the whole [`HingeState`](/react-native-arrangement-view/v0.5/api/use-hinge-change.md#hingestate), so its component renders at every angle the hinge passes through while the device folds.

`useHingeSelector` observes only one value derived from the hinge, so its component renders only when that value changes. It is more efficient for components that don't need to know the hinge's angle.

Like [`useHingeChange`](/react-native-arrangement-view/v0.5/api/use-hinge-change.md), call it inside a [`HingeObserver`](/react-native-arrangement-view/v0.5/api/hinge-observer.md) or a pane of an [`ArrangementView`](/react-native-arrangement-view/v0.5/api/arrangement-view.md).

The selector returns a string, a number, a boolean, `null` or `undefined`. Do not return an object, as it would never compare equal to the last one, breaking the optimization.

```tsx
const available = useHingeSelector((hinge) => hinge.available);
const status = useHingeSelector((hinge) => hinge.status);
```