[@types/react] Version 18.2.69 and Above: Void Problem with useRef Callback

[GreattitJY]

Since updating to @types/react version 18.2.69 and above, there's been an issue with the useRef hook where passing an element (el) into the ref callback function results in a void problem. This wasn't an issue in versions 18.2.68 and below. To resolve this, it appears necessary to modify all existing code from:

ref={(el) => (listItemRef.current[i] = el)}

to:

ref={(el) => {(listItemRef.current[i] = el)}}.

Encountering this problem while using '^' to ensure compatibility with versions has been confusing. Shouldn't updates be backward compatible?

import { forwardRef } from "react";

interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {}

const ListItem = forwardRef<HTMLLIElement, ListItemProps>(({}, ref) => {
  return <li ref={ref}></li>;
});

ListItem.displayName = "ListItem";

export { ListItem };

[typescript-bot]

Thanks for the discussion about "react", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @johnnyreilly, @bbenezech, @pzavolinsky, @ericanderson, @DovydasNavickas, @theruther4d, @guilhermehubner, @ferdaber, @jrakotoharisoa, @pascaloliv, @Hotell, @franklixuefei, @Jessidhia, @saranshkataria, @lukyth, @eps1lon, @zieka, @dancerphil, @dimitropoulos, @disjukr, @vhfmag, @hellatan, @priyanshurav, @Semigradsky, @mattpocock.

[eps1lon]

You're probably getting types for Canary. But that's not necessarily relevant here since that will be the behavior going forward.

Unfortunately, TypeScript will allow any returntype of functions that can be assigned to () => void. We should've always flagged the original code.

The reason that only surfaces in Canary types and will surface in React 19 types is that ref callbacks can now return a cleanup function. So we're going from () => void to () => (void | (() => void)). Now TypeScript will reject any return type that's not void or () => void.

To help migration, you can use the no-implicit-ref-callback-return codemod like so: npx types-react-codemod no-implicit-ref-callback-return src/