Solution

You'll mirror the browser's primary language preference into React state, while keeping the first render safe for environments that have no browser APIs.

The problem, in plain English

Your application may choose translated copy, number formats, or localized routes from the visitor's preferred language. The browser exposes an ordered language list, but that preference can change while the page remains open. The hook therefore needs a safe fallback, one browser read after mount, and a subscription that repeats the read after each languagechange event.

The mental model

Think of the browser values as a short priority ladder. The first navigator.languages entry wins when it is a non-empty string. Otherwise the hook tries navigator.language, then the caller's fallback.

A first attempt

The tempting version reads the browser inside the state initializer and never listens for changes:

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

function usePreferredLanguage(defaultValue = 'en-US') {
  const [language] = useState(
    navigator.languages[0] || navigator.language || defaultValue,
  );
  return language;
}

This can throw when navigator is unavailable during server rendering. It also captures only the mount-time value. A later browser preference change cannot update React because there is no listener and no state setter.

The working solution

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

function isNonEmptyString(value) {
  return typeof value === 'string' && value.length > 0;
}

function readPreferredLanguage(fallback) {
  if (typeof navigator === 'undefined') return fallback;

  // Read both properties now so every event observes the browser's latest snapshot.
  const languages = navigator.languages;
  const language = navigator.language;
  const primary = Array.isArray(languages) ? languages[0] : undefined;

  if (isNonEmptyString(primary)) return primary;
  if (isNonEmptyString(language)) return language;
  return fallback;
}

function usePreferredLanguage(defaultValue = 'en-US') {
  const fallbackRef = useRef(defaultValue);
  fallbackRef.current = defaultValue;
  const [preferredLanguage, setPreferredLanguage] = useState(defaultValue);

  useEffect(() => {
    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
      return undefined;
    }

    const handleLanguageChange = () => {
      setPreferredLanguage(readPreferredLanguage(fallbackRef.current));
    };

    window.addEventListener('languagechange', handleLanguageChange);
    // Subscribe before reconciling so no change can slip between the read and add.
    handleLanguageChange();

    return () => window.removeEventListener('languagechange', handleLanguageChange);
  }, []);

  return preferredLanguage;
}

module.exports = { usePreferredLanguage };

State begins with defaultValue, so rendering does not require browser globals. The mount-only effect owns one stable listener and reconciles immediately from the current browser snapshot. fallbackRef lets that listener see a fallback supplied by a later render without making the effect subscribe again.

Walking through one call

Suppose defaultValue is 'en-US', while the browser currently reports navigator.languages = ['fr-CA', 'fr'] and navigator.language = 'fr-CA':

1. Render safely. State starts as 'en-US' without reading window or navigator.
2. Subscribe after mount. The effect registers handleLanguageChange once on window before its first browser read.
3. Reconcile. The handler reads both browser properties. The first list entry is 'fr-CA', so React state becomes 'fr-CA'.
4. The preference changes. The browser now exposes ['de-DE', 'en-US'] and dispatches languagechange.
5. Read the fresh snapshot. The same handler reads the new array and returns 'de-DE'; it does not reuse 'fr-CA' from mount.
6. Unmount cleanly. React passes that same handler reference to removeEventListener.

Complexity

Mounting and each language change take O(1) time and the hook stores O(1) state. Each mounted hook instance owns one window listener.

Gotchas

• Reading during render. Accessing navigator.languages in the state initializer can fail outside a browser and can make the first client render disagree with server output. Fix: initialize from the fallback and reconcile in an effect.
• Caching the mount snapshot. A languagechange event says that preferences changed; its useful values still live on navigator. Fix: read both properties inside the handler every time.
• Scanning the whole array. This contract uses only navigator.languages[0]; selecting a later entry changes the browser's stated order. Fix: try the first entry, then the single-language property.
• Resubscribing for a new fallback. Adding defaultValue to the effect dependencies replaces the listener on every fallback change. Fix: keep the latest fallback in a ref that the stable handler reads.
• Leaking a listener. Passing a new arrow to removeEventListener does not remove the registered function. Fix: add and remove the same named handler from the effect closure.

Going further

• Return the complete preference order. A separate hook could expose a copied navigator.languages array when language negotiation needs more than the primary choice.
• Coordinate document metadata. An application-level provider could use this value to choose translations and update the root lang attribute; keep that side effect outside this read-only hook.
• Share one global subscription. A language store built with useSyncExternalStore could let many consumers reuse one window listener while preserving snapshot semantics.