refactor(theme-common): rename useDynamicCallback to useEvent (#7671)

packages/docusaurus-theme-common/src/hooks/useMutationObserver.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import {useEffect} from 'react';
-import {useDynamicCallback, useShallowMemoObject} from '../utils/reactUtils';
+import {useEvent, useShallowMemoObject} from '../utils/reactUtils';
 
 type Options = MutationObserverInit;
 
@@ -21,7 +21,7 @@ export function useMutationObserver(
   callback: MutationCallback,
   options: Options = DefaultOptions,
 ): void {
-  const stableCallback = useDynamicCallback(callback);
+  const stableCallback = useEvent(callback);
 
   // MutationObserver options are not nested much
   // so this should be to memo options in 99%

packages/docusaurus-theme-common/src/index.ts

@@ -38,7 +38,7 @@ export {ThemeClassNames} from './utils/ThemeClassNames';
 
 export {
   useIsomorphicLayoutEffect,
-  useDynamicCallback, // TODO rename to useEvent()
+  useEvent,
   usePrevious,
   ReactContextError,
 } from './utils/reactUtils';

packages/docusaurus-theme-common/src/utils/historyUtils.ts

@@ -7,7 +7,7 @@
 
 import {useEffect} from 'react';
 import {useHistory} from '@docusaurus/router';
-import {useDynamicCallback} from './reactUtils';
+import {useEvent} from './reactUtils';
 import type {Location, Action} from 'history';
 
 type HistoryBlockHandler = (location: Location, action: Action) => void | false;
@@ -19,7 +19,7 @@ type HistoryBlockHandler = (location: Location, action: Action) => void | false;
  */
 function useHistoryActionHandler(handler: HistoryBlockHandler): void {
   const history = useHistory();
-  const stableHandler = useDynamicCallback(handler);
+  const stableHandler = useEvent(handler);
   useEffect(
     // See https://github.com/remix-run/history/blob/main/docs/blocking-transitions.md
     () => history.block((location, action) => stableHandler(location, action)),

packages/docusaurus-theme-common/src/utils/reactUtils.tsx

@@ -21,18 +21,18 @@ export const useIsomorphicLayoutEffect = ExecutionEnvironment.canUseDOM
   : useEffect;
 
 /**
+ * Temporary userland implementation until an official hook is implemented
+ * See RFC: https://github.com/reactjs/rfcs/pull/220
+ *
  * Permits to transform an unstable callback (like an arrow function provided as
  * props) to a "stable" callback that is safe to use in a `useEffect` dependency
  * array. Useful to avoid React stale closure problems + avoid useless effect
  * re-executions.
  *
- * Workaround until the React team recommends a good solution, see
- * https://github.com/facebook/react/issues/16956
- *
  * This generally works but has some potential drawbacks, such as
  * https://github.com/facebook/react/issues/16956#issuecomment-536636418
  */
-export function useDynamicCallback<T extends (...args: never[]) => unknown>(
+export function useEvent<T extends (...args: never[]) => unknown>(
   callback: T,
 ): T {
   const ref = useRef<T>(callback);

packages/docusaurus-theme-common/src/utils/scrollUtils.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import {useDynamicCallback, ReactContextError} from './reactUtils';
+import {useEvent, ReactContextError} from './reactUtils';
 
 type ScrollController = {
   /** A boolean ref tracking whether scroll events are enabled. */
@@ -104,7 +104,7 @@ export function useScrollPosition(
   const {scrollEventsEnabledRef} = useScrollController();
   const lastPositionRef = useRef<ScrollPosition | null>(getScrollPosition());
 
-  const dynamicEffect = useDynamicCallback(effect);
+  const dynamicEffect = useEvent(effect);
 
   useEffect(() => {
     const handleScroll = () => {

packages/docusaurus-theme-common/src/utils/useLocationChange.ts

@@ -7,7 +7,7 @@
 
 import {useEffect} from 'react';
 import {useLocation} from '@docusaurus/router';
-import {useDynamicCallback, usePrevious} from './reactUtils';
+import {useEvent, usePrevious} from './reactUtils';
 import type {Location} from 'history';
 
 /**
@@ -24,7 +24,7 @@ export function useLocationChange(
   const location = useLocation();
   const previousLocation = usePrevious(location);
 
-  const onLocationChangeDynamic = useDynamicCallback(onLocationChange);
+  const onLocationChangeDynamic = useEvent(onLocationChange);
 
   useEffect(() => {
     if (!previousLocation) {