Maintenance: Consolidate useMergedRef and convert to typescript (#1733)

packages/desktop-client/src/components/sort.tsx

@@ -3,39 +3,17 @@ import React, {
   useEffect,
   useRef,
   useLayoutEffect,
-  useMemo,
   useState,
   useContext,
-  type RefCallback,
-  type MutableRefObject,
   type Context,
-  type Ref,
 } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
+import { useMergedRefs } from '../hooks/useMergedRefs';
 import { theme } from '../style';
 
 import View from './common/View';
 
-function useMergedRefs<T>(
-  ref1: RefCallback<T> | MutableRefObject<T>,
-  ref2: RefCallback<T> | MutableRefObject<T>,
-): Ref<T> {
-  return useMemo(() => {
-    function ref(value) {
-      [ref1, ref2].forEach(ref => {
-        if (typeof ref === 'function') {
-          ref(value);
-        } else if (ref != null) {
-          ref.current = value;
-        }
-      });
-    }
-
-    return ref;
-  }, [ref1, ref2]);
-}
-
 type DragState = {
   state: 'start-preview' | 'start' | 'end';
   type?: string;

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

 import { useMemo } from 'react';
+import type { MutableRefObject, Ref, RefCallback } from 'react';
 
-export function useMergedRefs(ref1, ref2) {
+export function useMergedRefs<T>(
+  ref1: RefCallback<T> | MutableRefObject<T>,
+  ref2: RefCallback<T> | MutableRefObject<T>,
+): Ref<T> {
   return useMemo(() => {
     function ref(value) {
       [ref1, ref2].forEach(ref => {

upcoming-release-notes/1733.md

+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Consolidate useMergedRefs hook and convert it to TypeScript.