React v19 – React

We now log a single message with a diff of the mismatch:

as a provider

In React 19, you can render as a provider instead of :

const ThemeContext = createContext('');
function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    ThemeContext>
  );
}

New Context providers can use and we will be publishing a codemod to convert existing providers. In future versions we will deprecate .

Cleanup functions for refs

We now support returning a cleanup function from ref callbacks:

<input
  ref={(ref) => {
    return () => {
    };
  }}
/>

When the component unmounts, React will call the cleanup function returned from the ref callback. This works for DOM refs, refs to class components, and useImperativeHandle.

Due to the introduction of ref cleanup functions, returning anything else from a ref callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns, for example:

- <div ref={current => (instance = current)} />
+ <div ref={current => {instance = current}} />

The original code returned the instance of the HTMLDivElement and TypeScript wouldn’t know if this was supposed to be a cleanup function or if you didn’t want to return a cleanup function.

You can codemod this pattern with no-implicit-ref-callback-return.

useDeferredValue initial value

We’ve added an initialValue option to useDeferredValue:

function Search({deferredValue}) {
  const value = useDeferredValue(deferredValue, '');
  return (
    <Results query={value} />
  );
}

When initialValue is provided, useDeferredValue will return it as value for the initial render of the component, and schedules a re-render in the background with the deferredValue returned.

For more, see useDeferredValue.

Support for Document Metadata

In HTML, document metadata tags like