Support React 19

[alexilyaev]

React 19 is not Stable.

I'm seeing deps warnings when installing stuff:

├─┬ @radix-ui/react-dialog 1.1.3
│ └─┬ react-remove-scroll 2.6.0
│   ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc.1
│   ├── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│   ├─┬ react-remove-scroll-bar 2.3.6
│   │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc.1
│   │ ├── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│   │ └─┬ react-style-singleton 2.2.1
│   │   ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc.1
│   │   └── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│   ├─┬ use-callback-ref 1.3.2
│   │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc.1
│   │ └── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│   └─┬ use-sidecar 1.1.2
│     ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc.1
│     └── ✕ unmet peer @types/react@"^16.9.0 || ^17.0.0 || ^18.0.0": found 19.0.0

Looking at the package.json, here are the changes that would be needed:

  "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0  || ^19.0.0"
  },

[Yonom]

#46

[escorponox]

Peer Dependency Update Needed for Compatibility

Description:

Several radix-ui primitives depend on react-remove-scroll, which in turn depends on use-callback-ref@^1.3.0. However, use-callback-ref has not updated its peer dependencies to align with the latest versions of React.

For example:

• react-remove-scroll@2.6.0 and 2.6.1 depend on use-callback-ref.
• This dependency chain causes peer dependency warnings when using React 19.

It would be great if use-callback-ref could update its peerDependencies to support the latest React versions. This will help downstream packages avoid compatibility issues and warnings.

Steps to Reproduce:

1. Install @radix-ui/react-dialog (version 1.1.4).
2. Use React 19 in your project.
3. Observe peer dependency warnings related to use-callback-ref.

npm WARN ERESOLVE overriding peer dependency                                                   
npm WARN While resolving: use-callback-ref@1.3.2                   
npm WARN Found: @types/react@19.0.1        
npm WARN node_modules/@types/react
npm WARN   dev @types/react@"19.0.1" from the root project
npm WARN   45 more (@mdx-js/react, @radix-ui/react-accordion, ...)                             
npm WARN                                                                                       
npm WARN Could not resolve dependency:                                                         
npm WARN peerOptional @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0" from use-callback-ref@1.3.2
npm WARN node_modules/react-remove-scroll/node_modules/use-callback-ref                        
npm WARN   use-callback-ref@"^1.3.0" from react-remove-scroll@2.6.1                            
npm WARN   node_modules/react-remove-scroll   
npm WARN 
npm WARN Conflicting peer dependency: @types/react@18.3.17                                     
npm WARN node_modules/@types/react             
npm WARN   peerOptional @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0" from use-callback-ref@1.3.2                                                                                               
npm WARN   node_modules/react-remove-scroll/node_modules/use-callback-ref                      
npm WARN     use-callback-ref@"^1.3.0" from react-remove-scroll@2.6.1                          
npm WARN     node_modules/react-remove-scroll
npm WARN ERESOLVE overriding peer dependency   
npm WARN While resolving: use-callback-ref@1.3.2                                               
npm WARN Found: react@19.0.0                   
npm WARN node_modules/react
npm WARN   dev react@"19.0.0" from the root project                                            
npm WARN   57 more (@floating-ui/react-dom, ...)                                               
npm WARN                    
npm WARN Could not resolve dependency:                                                         
npm WARN peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from use-callback-ref@1.3.2                
npm WARN node_modules/react-remove-scroll/node_modules/use-callback-ref
npm WARN   use-callback-ref@"^1.3.0" from react-remove-scroll@2.6.1
npm WARN   node_modules/react-remove-scroll
npm WARN 
npm WARN Conflicting peer dependency: react@18.3.1
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from use-callback-ref@1.3.2
npm WARN   node_modules/react-remove-scroll/node_modules/use-callback-ref
npm WARN     use-callback-ref@"^1.3.0" from react-remove-scroll@2.6.1
npm WARN     node_modules/react-remove-scroll

Expected Behavior:

No peer dependency warnings when using React 19 or higher.

[jantimon]

with react 19 it becomes way easier to create callback refs (stackblitz)

const myRef = useCallback((element: Element) => {
   
  console.log(element, "mounted or deps updated");

  // cleanup
  return () => {
     console.log(element, "unmounted or deps got out of date");
  }


}, [deps]) // <-- changing deps will first call cleanup - then the callback (similar to useEffect)

floating-ui just shiped with a new react 19 compatible mergeRef which looks quite well designed:

import * as React from 'react';

/**
 * Merges an array of refs into a single memoized callback ref or `null`.
 * @see https://floating-ui.com/docs/react-utils#usemergerefs
 */
export function useMergeRefs<Instance>(
  refs: Array<React.Ref<Instance> | undefined>,
): null | React.RefCallback<Instance> {
  const cleanupRef = React.useRef<void | (() => void)>(undefined);

  const refEffect = React.useCallback((instance: Instance | null) => {
    const cleanups = refs.map((ref) => {
      if (ref == null) {
        return;
      }

      if (typeof ref === 'function') {
        const refCallback = ref;
        const refCleanup: void | (() => void) = refCallback(instance);
        return typeof refCleanup === 'function'
          ? refCleanup
          : () => {
              refCallback(null);
            };
      }

      (ref as React.MutableRefObject<Instance | null>).current = instance;
      return () => {
        (ref as React.MutableRefObject<Instance | null>).current = null;
      };
    });

    return () => {
      cleanups.forEach((refCleanup) => refCleanup?.());
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, refs);

  return React.useMemo(() => {
    if (refs.every((ref) => ref == null)) {
      return null;
    }

    return (value) => {
      if (cleanupRef.current) {
        cleanupRef.current();
        (cleanupRef as React.MutableRefObject<void | (() => void)>).current =
          undefined;
      }

      if (value != null) {
        (cleanupRef as React.MutableRefObject<void | (() => void)>).current =
          refEffect(value);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, refs);
}

@theKashey do you think we could take over some of the ideas?

[theKashey]

The only change that is requires is to support these "cleanup" effects possibly getting returned from the function-based refs.