Solution

You can turn the browser's asynchronous permission snapshot into React state without taking control of the permission itself.

The problem, in plain English

A camera settings screen may need to show whether access is already granted before it enables a capture button. Permissions.query() returns a promise for a PermissionStatus, and that object can later emit change events. The hook must connect both parts while preventing an old asynchronous result from overwriting the current permission.

The mental model

Treat the resolved PermissionStatus as a live browser-owned record. React stores a copy for rendering, but every update is read from that record rather than guessed locally.

A first attempt

function usePermission(name) {
  const [state, setState] = useState('loading');
  useEffect(() => {
    navigator.permissions.query({ name }).then((status) => {
      setState(status.state);
      status.addEventListener('change', () => setState(status.state));
    });
  }, [name]);
  return { state, error: null };
}

This works only when every query resolves in order and the API always exists. It never removes its anonymous listener, cannot describe a rejected query, and lets a slow query for an old name replace newer state.

The working solution

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

function normalizeError(reason) {
  return reason instanceof Error ? reason : new Error(String(reason));
}

function usePermission(name) {
  const [result, setResult] = useState({ state: 'loading', error: null });

  useEffect(() => {
    let cancelled = false;
    let status = null;
    let handleChange = null;

    setResult({ state: 'loading', error: null });

    const query =
      typeof navigator !== 'undefined' && navigator.permissions?.query;

    if (typeof query !== 'function') {
      setResult({ state: 'unsupported', error: null });
      return () => {
        cancelled = true;
      };
    }

    let pending;
    try {
      // Calling with the Permissions object preserves its browser method receiver.
      pending = query.call(navigator.permissions, { name });
    } catch (reason) {
      setResult({ state: 'unsupported', error: normalizeError(reason) });
      return () => {
        cancelled = true;
      };
    }

    Promise.resolve(pending).then(
      (nextStatus) => {
        if (cancelled) return;

        status = nextStatus;
        handleChange = () => {
          if (!cancelled) {
            setResult({ state: status.state, error: null });
          }
        };

        status.addEventListener('change', handleChange);
        setResult({ state: status.state, error: null });
      },
      (reason) => {
        if (!cancelled) {
          setResult({ state: 'unsupported', error: normalizeError(reason) });
        }
      }
    );

    return () => {
      cancelled = true;
      if (status && handleChange) {
        status.removeEventListener('change', handleChange);
      }
    };
  }, [name]);

  return result;
}

module.exports = { usePermission };

The effect resets the visible snapshot whenever name changes. Its local cancelled flag belongs to that particular query, while status and handleChange retain the exact resource pair needed for cleanup. Rejections are normalized because JavaScript promises may reject with values that are not Error objects.

Walking through one call

You render usePermission('camera'), so the hook first returns { state: 'loading', error: null }. The effect queries { name: 'camera' }; the promise resolves with a status whose state is prompt, so the hook subscribes and renders prompt. The user later grants camera access, the same status object emits change, and the handler freshly reads granted. If the component switches to microphone, cleanup marks the camera effect cancelled and removes its listener before a new loading cycle begins.

Gotchas

• Saving only the initial state — permission can change outside your component. Keep the returned PermissionStatus subscribed.
• Reusing an anonymous listener — cleanup cannot remove a different function. Store the exact handler reference created by the effect.
• Ignoring promise races — an earlier permission query can resolve last. Give every effect run its own cancellation flag.
• Treating rejection as denial — an unsupported descriptor is not the same as a user denial. Report unsupported and preserve the error.
• Calling a detached browser method — platform methods may depend on their receiver. Invoke query with navigator.permissions as this.

Going further

• Accept a full PermissionDescriptor for APIs such as push or MIDI that need fields beyond name.
• Add a manual refresh function for environments whose permission status does not emit reliable changes.
• Integrate the hook with the capability-specific request UI, while keeping requesting separate from querying.