-
Notifications
You must be signed in to change notification settings - Fork 47k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Compiler Bug]: eslint-plugin-react-compiler errors when updating initialization of ref.current #30782
Comments
Related: #30716 |
Try this import { useRef, useState, useEffect } from "react"; const UNINITIALIZED = Symbol("UNINITIALIZED"); export const useOnce = <T,>(initialValue: T | (() => T)) => { useEffect(() => { return value; export default function MyApp() { Hello World ;} State Initialization: Added a state value to store the initialized value. useEffect: The ref is now initialized inside the useEffect hook, which sets the value both in the ref and in the state. Return Value: The hook returns the state value, ensuring that the initial render doesn't access ref.current |
Thanks for posting. This is a known limitation of the new linter. |
i also run into the problem in a different scenario:
|
Do you deprecated to use const panelRef = useRef<HTMLDivElement>(null);
const width = panelRef.current?.clientWidth ?? 256; // eslint error here |
Is there any available workaround for this? This limitation also affects the useImperativeHandle. |
To anyone encountering optimization issues with the usage of const [refs] = useState(() => {
return { forwardedRef };
}); This works against latest experimental release (0.0.0-experimental-4e0eccf-20240830). It probably breaks the rules, but so far didn't encounter serious issues. |
This comment was marked as spam.
This comment was marked as spam.
I think this is addressed in export function useLogger(name: string) {
const loggerRef = useRef<Logger>(null);
if (loggerRef.current === null) {
loggerRef.current = new Logger(name);
}
return loggerRef.current;
} The linter rule complains only about that |
What kind of issue is this?
Link to repro
https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHRFMCAEcA2AlggHYAuGA3GiTYQLYAOEMZOwOWCASggGY4Avjj4wI9HBhgIAhnAohqtEnAgkwbAKoA5AJJ6AKroCCAGV0AtAKIARHAF4cAZQCe9AEYR8ACgw79ukZmlrYYAJRKNAgAHsyseGoanNgA8iq4jgA8BgA0AHzehCSEZIQy+ABq5VAIyDgGOAA+ON7eYQ559WHt9p3ANDgJ6mzSAo5cvAKZ9U04ZC6MCBAC-oYm5tZ2nd6rgeshNhE0AziEAt6jAHRwsNLkDvaOu0Ebtu39JIODVzcwd2yOeaLZanYqlcpVfA1B6ODB8KAqUpqDA4AD8oJKZUq1QQbRwdSKmIhOKUg0Ex0+OGkZFgnx+t1IZCUgkiJBicTYABN+DIoPg2PDEYQ1DgALIuYyMRh4j7fBA0mCfTKcwgANzyAAkEPh8BAcAB1Fj4TmZAD0KvVzJoIEEQA
Repro steps
useRef
with some dummy value (e.g. null, Symbol, undefined, etc.) to be changed after initialization/during render.ref.current
by checking whether it is equivalent to its initial condition (as per documentation: useRef#Avoiding recreating the ref contents)How often does this bug happen?
Every time
What version of React are you using?
19.0.0-rc-1d989965-20240821
The text was updated successfully, but these errors were encountered: