[Compiler Bug]: eslint-plugin-react-compiler errors when updating initialization of ref.current about react

[alisherks]

Is there any available workaround for this? This limitation also affects the useImperativeHandle.

[jeremy-code]

Related: #30716

[parthnegi21]

Try this

import { useRef, useState, useEffect } from "react";

const UNINITIALIZED = Symbol("UNINITIALIZED");

export const useOnce = <T,>(initialValue: T | (() => T)) => {
const ref = useRef < T | typeof UNINITIALIZED > (UNINITIALIZED);
const [value, setValue] = useState < T | typeof UNINITIALIZED > (UNINITIALIZED);

useEffect(() => {
if (ref.current === UNINITIALIZED) {
const resolvedValue = typeof initialValue === "function" ? initialValue() : initialValue;
ref.current = resolvedValue;
setValue(resolvedValue);
} else {
setValue(ref.current);
}
}, [initialValue]);

return value;
};

export default function MyApp() {
return

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

[josephsavona]

Thanks for posting. This is a known limitation of the new linter.

[hlege]

i also run into the problem in a different scenario:
when passing the ref object to a custom hook the compiler is not optimizing my code. if i remove the ref access it works as expected.

// pass the ref object to a custom hook and it is preventing the optimizations.  
const mergedRefs = useMergedRef<HTMLDivElement>(ref, setPopperElement);

from react.

[iahu]

Do you deprecated to use useRef? if not, how to use it?

const panelRef = useRef<HTMLDivElement>(null);
const width = panelRef.current?.clientWidth ?? 256; // eslint error here

from react.

[alisherks]

To anyone encountering optimization issues with the usage of useImperativeHandle, you can place the forwardedRef inside a useState hook.

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.

from react.

[nkalpakis21]

built an app to get paid for this PR
https://www.n0va-io.com/discover/facebook/react