#useHingeSelector

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

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

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

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

useHingeChange returns the whole 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, call it inside a HingeObserver or a pane of an ArrangementView.

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.

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