You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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'
The text was updated successfully, but these errors were encountered:
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.
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.
Link to code example:
The current behavior
Get error "a has updated"
The expected behavior
Get error '1111111'
The text was updated successfully, but these errors were encountered: