React compiler bug reproduction

bug reproduction for react compiler with Next.js

Steps to reproduce

1. Clone this repository
2. Run pnpm install
3. Run pnpm dev
4. Open http://localhost:3000 in your browser
5. You'll see the error in the dialog

Expected behavior

No error should be thrown

Actual behavior

Error is thrown

TypeError: Cannot read properties of null (reading 'name')

Root cause

The user object should be actually conditionally rendered since there's user ? condition to check to render the component when user is truthy. But react compiler still uses the user.name as condition for comparing with the memoized cache value. The check is hoisted in the render where the user can be null. This will trigger the error where we don't need to render the sub component where the callback is being used.

// Client output bundle for page.js
    _s();
    const $ = (0,react_compiler_runtime__WEBPACK_IMPORTED_MODULE_1__.c)(10);
    if ($[0] !== "5a27fdcf38c7f1295c3b71a91e1e520dce2311adaca1eb5d5515c0f76ddb4f25") {
        for(let $i = 0; $i < 10; $i += 1){
            $[$i] = Symbol.for("react.memo_cache_sentinel");
        }
        $[0] = "5a27fdcf38c7f1295c3b71a91e1e520dce2311adaca1eb5d5515c0f76ddb4f25";
    }
    const [user, setUser] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(null);
    let t0;
    if ($[1] !== user.name) {
        t0 = ()=>{
            console.log("Log user", user.name);
        };
        $[1] = user.name;
        $[2] = t0;
    } else {
        t0 = $[2];
    }
    const logUser = t0;