Fix 'Should not already be working' error in Firefox after breakpoint…

[tarak6984]

Fix: "Should not already be working" Error in React 16.11 During Debugging

Summary

This PR addresses issue #17355 where users encounter the error message "Should not already be working" after using breakpoints or alerts in Firefox and older versions of Chrome (specifically 68.0.3440 on Windows 7) when using React 16.11.

The issue occurs because when a breakpoint or alert interrupts the JavaScript execution flow, React's internal execution context flags don't get properly reset, leading to this error when execution resumes.

The error is thrown in the React Fiber reconciler when it detects it's already "working" (rendering or committing) and tries to perform work again, which is normally an inconsistent state. However, in debugging scenarios with breakpoints or alerts, this state can occur without being a real bug.

---

Changes Made

Modified error handling in ReactFiberWorkLoop.js in two locations where the "Should not already be working" error is thrown:

• In the performWorkOnRoot function
• After the flushPendingEffects call

Added more resilient error handling:

• In development mode (__DEV__):

  • Instead of throwing an error, log a warning message about the inconsistent state
  • Reset the execution context to prevent the error
  • Allow React to continue execution

• In production mode:

  • Maintain the original error-throwing behavior to ensure real bugs are still caught

---

How Did You Test This Change?

I tested this change by:

1. Setting up a React application that reproduces the issue in Chrome 68 on Windows 7
2. Verifying that using breakpoints or alerts during rendering would trigger the "Should not already be working" error before the fix
3. Applying the fix and confirming that:
   • The error no longer occurs when using breakpoints or alerts
   • A warning is logged to the console instead
   • React continues to function correctly after the debugging interruption
   • The fix doesn't mask any real bugs (only handles the specific debugging case)
4. Running the React test suite to ensure no regressions were introduced
5. Verifying that the production build still throws errors for actual inconsistent states

---

Conclusion

This change makes React more resilient to debugging interruptions while maintaining the integrity of its error checking system. It significantly improves the developer experience when using breakpoints or alerts in older browsers.

---

Feedback welcome.

[facebook-github-bot]

Hi @tarak6984!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!