React 18 - Internal React error if throwing on hook cleanup function.

[andrew-w-ross]

Running the following test:

import React, { useEffect } from "react";
import { create } from "react-test-renderer";

const Boom = () => {
    useEffect(() => {
        return () => {
            throw new Error("Boom");
        };
    }, []);

    return null;
};

it("prints an error to the console on next is fine on latest", () => {
    const res = create(<Boom />);
    res.unmount();    
});

I'll get the following error message:

 console.error
    Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

The test will pass but considering the nature of the message and that it differs from latest I thought reporting it might be a good idea. Repo if you need it /~https://github.com/andrew-w-ross/react-18-unmount-error

[nathell]

I’m also experiencing this with other React versions on React Native, as well as with React 17.0.x production builds (but not dev builds) on web. See the above-linked RN issue.

[josharsh]

@gaearon If anyone has not yet picked this yet, may I give it a shot?

[pistonsky]

This warning comes up a lot after I've upgraded to RN 0.67.1. In my case the causing Error has this message:

Error: You attempted to set the key `current` with the value `null` on an object that is meant to be immutable and has been frozen.

[eps1lon]

Still reproduces with 18.1: https://codesandbox.io/s/test-renderer-throwing-in-cleanup-causes-internal-react-error-novhj2

[ugglr]

Getting in react native:

• react native: 0.70.5
• react: 18.1.0

[shohelahamad]

Good day everyone, any update / solution on that ?

[geloski43]

@ugglr If you're still importing SafeAreaView from react-native, try importing it from react-native-safe-area-context.

[sujan-york-ie]

Getting the same issue, ERROR Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Does anyone have a solution for the same?