wip: remove use-memo-one

.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",

src/state/registry/use-registry.ts

@@ -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/use-memo-one.ts

@@ -0,0 +1,65 @@
+/**
+ * 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;
+}
+
+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/view/drag-drop-context/app.tsx

@@ -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/draggable/draggable.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/droppable/droppable.tsx

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

src/view/placeholder/placeholder.tsx

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

src/view/use-announcer/use-announcer.ts

@@ -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';

src/view/use-draggable-publisher/use-draggable-publisher.ts

@@ -1,5 +1,5 @@
 import type { Position } from 'css-box-model';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { useRef } from 'react';
 import { invariant } from '../../invariant';
 import type {

src/view/use-droppable-publisher/use-droppable-publisher.ts

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import type { Position } from 'css-box-model';
 import rafSchedule from 'raf-schd';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { memoizeOne } from '../../memoize-one';
 import { invariant } from '../../invariant';
 import checkForNestedScrollContainers from './check-for-nested-scroll-container';

src/view/use-focus-marshal/use-focus-marshal.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import type { DraggableId, ContextId } from '../../types';
 import type { FocusMarshal, Unregister } from './focus-marshal-types';
 import { dragHandle as dragHandleAttr } from '../data-attributes';

src/view/use-hidden-text-element/use-hidden-text-element.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../use-memo-one';
 import type { ContextId, ElementId } from '../../types';
 import getBodyElement from '../get-body-element';
 import useUniqueId from '../use-unique-id';

src/view/use-sensor-marshal/sensors/use-keyboard-sensor.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../../use-memo-one';
 import { invariant } from '../../../invariant';
 import type {
   SensorAPI,

src/view/use-sensor-marshal/sensors/use-mouse-sensor.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
+import { useCallback, useMemo } from '../../../use-memo-one';
 import type { Position } from 'css-box-model';
 import { invariant } from '../../../invariant';
 import type {

src/view/use-sensor-marshal/sensors/use-touch-sensor.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
+import { useCallback, useMemo } from '../../../use-memo-one';
 import type { Position } from 'css-box-model';
 import { invariant } from '../../../invariant';
 import type {

src/view/use-sensor-marshal/use-sensor-marshal.ts

@@ -1,6 +1,6 @@
 import rafSchd from 'raf-schd';
 import { useState } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
+import { useCallback, useMemo } from '../../use-memo-one';
 import type { Position } from 'css-box-model';
 import { invariant } from '../../invariant';
 import type {

src/view/use-style-marshal/use-style-marshal.ts

@@ -1,5 +1,5 @@
 import { useRef, MutableRefObject } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { memoizeOne } from '../../memoize-one';
 import { invariant } from '../../invariant';
 import type { StyleMarshal } from './style-marshal-types';

src/view/use-unique-id.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../use-memo-one';
 import type { Id } from '../types';
 
 interface Options {

stories/src/mixed-sizes/mixed-size-lists.tsx

@@ -1,7 +1,7 @@
 import { colors } from '@atlaskit/theme';
 import styled from '@emotion/styled';
 import React, { ReactElement, useState } from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../../src/use-memo-one';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
 import type { Quote } from '../types';

stories/src/programmatic/multiple-contexts.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-await-in-loop */
 import React, { useState, useEffect, ReactElement } from 'react';
 import styled from '@emotion/styled';
-import { useCallback } from 'use-memo-one';
+import { useCallback } from '../../../src/use-memo-one';
 import type {
   DropResult,
   PreDragActions,

test/unit/view/use-draggable-publisher.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React, { useRef, useCallback } from 'react';
 import type { Spacing, Rect } from 'css-box-model';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../../src/use-memo-one';
 import { invariant } from '../../../src/invariant';
 import useDraggablePublisher from '../../../src/view/use-draggable-publisher';
 import {