Solution

You will mirror the browser-owned orientation pair in React state while keeping the first render safe everywhere.

The problem, in plain English

A reading layout might move controls when a tablet rotates from portrait to landscape. The browser already exposes the current type and angle through screen.orientation, but React does not rerender merely because those properties change. Your hook must bridge the browser event into state without assuming that a screen API exists during rendering.

The mental model

Think of the fallback as a safe value for the render phase. After the component mounts, a supported browser becomes the source of truth. React state is only the rendered copy of that source.

A first attempt

const { useState } = require('react');

function useOrientation(defaultValue = { type: 'portrait-primary', angle: 0 }) {
  const [value] = useState(() => {
    if (typeof screen === 'undefined' || !screen.orientation) {
      return defaultValue;
    }
    return {
      type: screen.orientation.type,
      angle: screen.orientation.angle,
    };
  });
  return value;
}

This version can read the correct value once, but it creates no bridge from the browser back to React. Rotating the screen changes the browser object without changing React state, so the component keeps rendering the old orientation. It also reads the browser during render, which can make the server and browser begin with different output.

The working solution

const { useEffect, useState } = require('react');

const DEFAULT_ORIENTATION = {
  type: 'portrait-primary',
  angle: 0,
};

function useOrientation(defaultValue = DEFAULT_ORIENTATION) {
  // Rendering starts from caller-controlled data, so no browser global is needed.
  const [orientation, setOrientation] = useState(defaultValue);

  useEffect(() => {
    const source = typeof screen === 'undefined' ? null : screen.orientation;
    if (!source) {
      return undefined;
    }

    // Capture the object once so cleanup targets the object used for setup.
    const update = () => {
      // Read both properties now; a mount-time snapshot would become stale.
      setOrientation({
        type: source.type,
        angle: source.angle,
      });
    };

    source.addEventListener('change', update);
    // Reconcile after subscribing to close the render-to-effect timing gap.
    update();

    return () => {
      source.removeEventListener('change', update);
    };
  }, []);

  return orientation;
}

module.exports = { useOrientation };

The state initializer never touches a browser global, so server rendering gets the fallback. The effect acquires one ScreenOrientation object, subscribes once, and immediately reconciles state with its current properties. Capturing both source and update also guarantees that cleanup removes the exact handler from the exact object used during setup.

Walking through one call

Call useOrientation({ type: 'portrait-primary', angle: 0 }) while a tablet is already in landscape-primary at 90 degrees.

1. Render safely. React creates state from the supplied portrait fallback. No screen read happens during rendering.
2. Capture the source. The effect finds screen.orientation and stores that object in source for the effect's whole lifetime.
3. Subscribe before reading. The effect attaches update to the source's change event, then calls update() once. That fresh read produces { type: 'landscape-primary', angle: 90 } and React rerenders.
4. Rotate again. The browser changes the same object's properties to portrait-secondary and 180, then dispatches change. The stable handler reads both new values and publishes one new state object.
5. Unmount. Cleanup calls removeEventListener('change', update) on the captured source. Later rotations no longer reach this hook instance.

Gotchas

• Reading only once. A state initializer captures the starting orientation but never hears about a rotation. Fix: subscribe to the source's change event.
• Reading browser globals during render. A server has no screen, and a browser value can disagree with the server fallback. Fix: render from the fallback and reconcile in an effect.
• Caching the first properties. Saving type and angle outside the handler makes later events replay stale data. Fix: read both from source inside every handler call.
• Cleaning up through a new lookup. Another object could be exposed by the time cleanup runs. Fix: remove the listener from the same captured source used during setup.
• Listening to a different signal. Device orientation and deprecated window.orientation answer different or obsolete questions. Fix: use the Screen Orientation object's own change event.

Going further

• Orientation-aware layouts. Combine the hook with container measurements so layout decisions depend on available space rather than rotation alone.
• Locking orientation. Explore screen.orientation.lock() for fullscreen experiences, accounting for permissions and browser support. It is deliberately outside this read-only hook.
• External-store integration. A shared orientation service can use useSyncExternalStore when many components need one centralized browser subscription and an explicit server snapshot.