Concurrent Rendering Priority Limits for Custom Hooks

Answer

The React scheduler does not give built‑in effects a higher priority than state updates that originate from custom hooks. Both inherit the priority of the render that scheduled them, so they are treated equally.

Confirmed facts

• React Scheduler assigns priority levels (Immediate, UserBlocking, Normal, Low, Idle) to updates.
• Custom hooks have no independent priority; any state change or effect they trigger inherits the priority of the render that invoked the hook.
• Asynchronous work inside a hook keeps that priority unless you explicitly change it with startTransition or flushSync.
• The scheduler enforces default timeouts (≈5 ms for UserBlocking, ≈250 ms for Normal) and will not let a high‑priority update preempt a low‑priority render beyond those limits; custom hooks cannot bypass these limits.

Likely explanation

When a custom hook calls useState or useReducer during a render, the resulting update is placed in the same priority bucket as the render itself. Built‑in effects (useEffect, useLayoutEffect) are also scheduled as part of that render and receive the same bucket. If multiple hooks schedule updates in the same bucket, the scheduler processes them in FIFO order of scheduling. Updates marked with startTransition are downgraded to the Low/Idle bucket, so any custom‑hook state inside a transition inherits that lower priority unless you wrap the specific setter in flushSync to force a synchronous, high‑priority update.

1. Identify whether the update you are observing originates from a synchronous event handler (high priority) or from a transition (low priority).
2. Check if the custom hook uses startTransition or flushSync around its setters.
3. If you need to verify the ordering, log timestamps inside the hook’s setter and in the effect, then compare the logs.

Please confirm which React version you are using (e.g., React 18.2.0) to ensure the described behavior matches your environment.