refactor(dependency): remove use-memo-one

Remove use-memo-one from the package.json and include parts of its source code directly in our
source code.

Author: 100terres

.eslintrc.js

@@ -115,14 +115,7 @@ module.exports = {
             name: 'react',
             importNames: ['useMemo', 'useCallback'],
             message:
-              '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`',
-          },
-          // Forcing use aliased imports from useMemoOne
-          {
-            name: 'use-memo-one',
-            importNames: ['useMemoOne', 'useCallbackOne'],
-            message:
-              'use-memo-one exports `useMemo` and `useCallback` which work nicer with `eslint-plugin-react-hooks`',
+              '`useMemo` and `useCallback` are subject to cache busting. Please use methods from `src/use-memo-one.ts`',
           },
           // Disabling using of useLayoutEffect from react
           {

package.json

@@ -75,8 +75,7 @@
     "css-box-model": "^1.2.1",
     "raf-schd": "^4.0.3",
     "react-redux": "^9.1.2",
-    "redux": "^5.0.1",
-    "use-memo-one": "^1.1.3"
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "@atlaskit/css-reset": "6.11.2",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../use-memo-one';
 import type { Registry } from './registry-types';
 import createRegistry from './create-registry';
 

src/state/registry/use-registry.ts

@@ -0,0 +1,66 @@
+/**
+ * Original author: Alex Reardon
+ * License: MIT
+ * Repo: https://github.com/alexreardon/use-memo-one
+ * Description: useMemo and useCallback but with a stable cache.
+ */
+
+import { useRef, useState, useEffect } from 'react';
+import areInputsEqual from './are-inputs-equal';
+
+interface Cache<T> {
+  inputs?: unknown[];
+  result: T;
+}
+
+export function useMemo<T>(
+  // getResult changes on every call,
+  getResult: () => T,
+  // the inputs array changes on every call
+  inputs?: unknown[],
+): T {
+  // using useState to generate initial value as it is lazy
+  const initial: Cache<T> = useState(() => ({
+    inputs,
+    result: getResult(),
+  }))[0];
+  const isFirstRun = useRef<boolean>(true);
+  const committed = useRef<Cache<T>>(initial);
+
+  // persist any uncommitted changes after they have been committed
+  const useCache: boolean =
+    isFirstRun.current ||
+    Boolean(
+      inputs &&
+        committed.current.inputs &&
+        areInputsEqual(inputs, committed.current.inputs),
+    );
+
+  // create a new cache if required
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const cache: Cache<T> = useCache
+    ? committed.current
+    : {
+        inputs,
+        result: getResult(),
+      };
+
+  // commit the cache
+  useEffect(() => {
+    isFirstRun.current = false;
+    committed.current = cache;
+  }, [cache]);
+
+  return cache.result;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function useCallback<T extends Function>(
+  // getResult changes on every call,
+  callback: T,
+  // the inputs array changes on every call
+  inputs?: unknown[],
+): T {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => callback, inputs);
+}

src/use-memo-one.ts

@@ -3,7 +3,7 @@ import { flushSync } from 'react-dom';
 import type { ReactNode, MutableRefObject } from 'react';
 import { bindActionCreators, Dispatch } from 'redux';
 import { Provider } from 'react-redux';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { invariant } from '../../invariant';
 import createStore from '../../state/create-store';
 import createDimensionMarshal from '../../state/dimension-marshal/dimension-marshal';

src/view/drag-drop-context/app.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, DragEvent, TransitionEvent } from 'react';
 import { flushSync } from 'react-dom';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import type { DraggableRubric, DraggableDescriptor } from '../../types';
 import getStyle from './get-style';
 import useDraggablePublisher from '../use-draggable-publisher/use-draggable-publisher';

src/view/draggable/draggable.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import { useMemo, useCallback } from 'use-memo-one';
 import React, { useRef, useContext, FunctionComponent } from 'react';
 import type { ReactNode } from 'react';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { invariant } from '../../invariant';
 import type { DraggableId } from '../../types';
 import type { Props, DroppableProvided } from './droppable-types';

src/view/droppable/droppable.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, FunctionComponent } from 'react';
-import { useCallback } from 'use-memo-one';
 import type { Spacing } from 'css-box-model';
+import { useCallback } from '../../use-memo-one';
 import type {
   Placeholder as PlaceholderType,
   InOutAnimationMode,

src/view/placeholder/placeholder.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import type { Announce, ContextId } from '../../types';
 import { warning } from '../../dev-warning';
 import getBodyElement from '../get-body-element';