[Maintenance] Replace react-merge-refs with useMergedRefs (#2509)

* Uninstall react-merge-refs

* Fix import

* Update useMergedRefs

packages/desktop-client/package.json

@@ -50,7 +50,6 @@
     "react-error-boundary": "^4.0.12",
     "react-hotkeys-hook": "^4.5.0",
     "react-markdown": "^8.0.7",
-    "react-merge-refs": "^1.1.0",
     "react-modal": "3.16.1",
     "react-redux": "7.2.9",
     "react-router-dom": "6.21.3",

packages/desktop-client/src/components/common/Input.tsx

@@ -4,10 +4,10 @@ import React, {
   type Ref,
   useRef,
 } from 'react';
-import mergeRefs from 'react-merge-refs';
 
 import { css } from 'glamor';
 
+import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useProperFocus } from '../../hooks/useProperFocus';
 import { type CSSProperties, styles, theme } from '../../style';
 
@@ -44,9 +44,11 @@ export function Input({
   const ref = useRef<HTMLInputElement>(null);
   useProperFocus(ref, focused);
 
+  const mergedRef = useMergedRefs<HTMLInputElement>(ref, inputRef);
+
   return (
     <input
-      ref={inputRef ? mergeRefs([inputRef, ref]) : ref}
+      ref={mergedRef}
       className={`${css(
         defaultInputStyle,
         {

packages/desktop-client/src/hooks/useMergedRefs.ts

-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import type { MutableRefObject, Ref, RefCallback } from 'react';
 
 export function useMergedRefs<T>(
-  ref1: RefCallback<T> | MutableRefObject<T>,
-  ref2: RefCallback<T> | MutableRefObject<T>,
+  ...refs: (RefCallback<T> | MutableRefObject<T> | Ref<T> | null | undefined)[]
 ): Ref<T> {
-  return useMemo(() => {
-    function ref(value: T) {
-      [ref1, ref2].forEach(ref => {
+  return useCallback(
+    (value: T) => {
+      [...refs].forEach(ref => {
         if (typeof ref === 'function') {
           ref(value);
-        } else if (ref != null) {
-          ref.current = value;
+        } else if (ref != null && 'current' in ref) {
+          (ref as MutableRefObject<T>).current = value;
         }
       });
-    }
-
-    return ref;
-  }, [ref1, ref2]);
+    },
+    [refs],
+  );
 }

upcoming-release-notes/2509.md

+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Uninstall react-merge-refs package and replace mergeRefs with useMergedRefs hook.