Bug: Error Recovery Mechanism Overwriting Initial Rendering Errors in Concurrent Mode

[ThenMorning]

React version:18

I have encountered an issue with the error recovery mechanism in Concurrent Mode (React 18's Concurrent Features), where initial rendering errors seem to be overwritten by subsequent errors triggered in side effects, making it difficult to debug and trace the original error.

Steps To Reproduce

1.Create a component that intentionally throws an error during rendering.
Include a side effect (e.g., data fetching or model updating) that only triggers an error when React attempts to recover from the initial rendering error.
2.The Main component throws an error during rendering.
The useOnce hook calls a function which updates a global variable and throws an error on subsequent updates.

import React, { useRef, Component } from "react";

let a = null;

const updateA = () => {
  console.log("updateA");
  if (a) {
    throw "a has updated";
  }
  a = 1;
};

function useOnce(callback) {
  const hasRun = useRef(false);
  if (!hasRun.current) {
    callback();
    hasRun.current = true;
  }
}
export default function Main() {
  useOnce(() => {
    updateA();
  });
  throw "1111111";

  return null;
}

Link to code example:

The current behavior

Get error "a has updated"

The expected behavior

Get error '1111111'

[eps1lon]

function useOnce(callback) {
  const hasRun = useRef(false);
  if (!hasRun.current) {
    callback();
    hasRun.current = true;
  }
}

You are triggering a side-effect during render violating Rules of React. The behavior that's caused by this code is therefore undefined and not considered a bug.