[Compiler Bug]: Improve readability of `react-hooks/immutability` log message

[baevm]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wApg+OmQC2CfAF8AlPmAAdNvgBKCMowB0UMAgCiJEgkb9+sgLwA+OfkX47+AOYI6CGGVwIAqjpgARd2Sq2HimtlIANPgA2gC60oq2cKxgBE4ubh7erv64gQjBBGb4-GF22q4ACjAQJEyUCGDIcqX2TIRNdFCiAEauANwtZT4i4k0pMEx0DgNK9vhMYNyMTABuCE3dEBD1ZHQzc3ZgSTDrwl29MPsHxJhkeOJ0uGO4E1NXdpKx4S2ikwDKxwQABUABYnMAg7btM49VxhcxWBSzfBJOgpeZgLIwXSUJgOJjder4Ir8cowJpCBZLZhrDZbHZ7fBHHCnTqwmBSBHNZF2E64WBsMkaKnLNb4ABk4vwQuZJ3wFiKvzoAJZoPBkMohHeUhmLVR6IQuPxhK8PjAxOlPiqNTqDQ0tWorn4CyxOLxBPq0l1yKYJGKhvdJqxYA09SmuBBxLMRQADLIkQd8HyBdzE3ZcBBcpQ3cb6sGmjHvjz7GQ1m4nCqTgWi2nLa4wAAhTi+fJ3XAPJ5ySQ1tMgvEghq4SuTBxYjpUSg9uaSbWSBLI-UEDNZysSIoB3Om+saE6EKCIExgLqRMlco+ifAAajrMA0soQkTj2sX+FLrjIFcBFuXZEoq-wAD0+Abh6W4wCGYYOBG3pzC+ZKNs2rb3M4hTAUaoHBjuCB7ogxSDMU6hwCePhcgmaa+sUACEhFREKNxth2cSprWr5wHAtE+Bo9HIY8MQWrE2rTvhdg0XRSHtihMQaJg2ggqSnFkiMCBesJSYIPyMBsIRgkRPhwDdvC86wckBB9g4A4pMOUxYhaIFBmaWE4QgJhmRZuCRHAsAnI8pH4cmmkol5KF3l+ViuYOIUsvgAD8gUwN5BBNOFKSzpEdl5maUQxnEMH2P5bBkXMP7Zuh9n1k06VgRBzhQSCU4lmWH4IKuTS3OBCAAGKUBA7j8G+5bNYCGgZh1TDoNh-AAEzSNI9VDPWTYtm1EmPHN+DJUOxwjmOzGJopYinBtVmjgpwwHWthyAkl-aDsdWKRSca0GciM5hHOShhPl+AADyEKsFgtL9-0eOi30AX9KwA0oYMQxYMzvSA4QgKitQOCgIBMKIBT4LgnCYBIQgVJQUD4nQADymDMMkUj4CQ1QXgA5N0ZC9JQAC0mDE6TbMnOouBs0kWO2jA4MLLgDPeoIYQAQBguYHU7gsHQ7AQMQTTyCAv6UBriiSEyitgLUDT4ETJOTBTVNol6iPgJCADuACSjyuCIlBgCg5BuwgkhAA

Repro steps

react-hooks/immutability log message for "Error: Cannot access variable before it is declared" looks fine for examples with hooks:

but really huge for functions, printing whole body of the function, for example (screenshot at 50% zoom!):

Is printing the entire function body really necessary? Wouldnt it be better to just show the first line of the function declaration instead?

How often does this bug happen?

Every time

What version of React are you using?

latest

What version of React Compiler are you using?

latest

[vaish567]

@baevm issue is eslint-plugin-react-compiler – diagnostic output too verbose

When the React Compiler ESLint rule reports, Error: Cannot access variable before it is declared , it prints the entire body of the function instead of just the first line or a short snippet.

For small hook examples the message looks fine, but for large functions the terminal gets flooded, sometimes pages long. It happens every single time. This isn’t a runtime or compiler bug, the app itself works correctly. The problem is only with how the eslint-plugin-react-compiler formats the warning.

I would suggest limit diagnostic output to the function signature and short codeframe, similar to standard ESLint rule formatting. This would keep logs readable while preserving context.

[Paper-Folding]

I got this issue after updating "eslint-plugin-react-hooks" from 6.1.0 to 7.0.0, basically I'm calling a function inside the function itself:

    const retryAll = useCallback(() => {
        ensureTokenRequest({
            onAuthDialogRequired() {
                // lint error the line below: Error: Cannot access variable before it is declared
                // `retryAll` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.
                openAuthDialog(() => retryAll());

            },
            async makeRequest() {
                return await retryAllFailedTasks();
            },
            showToast
        });
    }, [openAuthDialog, showToast]);

But I guess this issue is fine, because all I'm doing is to make user authenticate before actually sending request to retry all tasks. If authentication failed, the "auth dialog" just pop out again asking for token because of the () => retryAll() call delivered inside.
Does react-hooks/immutability really matter under this situation? And how can I solve this lint error?
-----Update-----
This lint error just disappears after removing useCallback, but why?