From 2c7012f706af29c73f0b5b88c2fad3f062abd8c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 24 Jun 2022 12:10:03 +0200 Subject: [PATCH] refactor(theme-common): rename useDynamicCallback to useEvent (#7671) --- .../src/hooks/useMutationObserver.ts | 4 ++-- packages/docusaurus-theme-common/src/index.ts | 2 +- .../docusaurus-theme-common/src/utils/historyUtils.ts | 4 ++-- packages/docusaurus-theme-common/src/utils/reactUtils.tsx | 8 ++++---- .../docusaurus-theme-common/src/utils/scrollUtils.tsx | 4 ++-- .../src/utils/useLocationChange.ts | 4 ++-- .../src/theme/SearchPage/index.tsx | 4 ++-- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/docusaurus-theme-common/src/hooks/useMutationObserver.ts b/packages/docusaurus-theme-common/src/hooks/useMutationObserver.ts index fc11277a02..ecb16d6195 100644 --- a/packages/docusaurus-theme-common/src/hooks/useMutationObserver.ts +++ b/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% diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts index c8b5ea484e..e5e1c36dd3 100644 --- a/packages/docusaurus-theme-common/src/index.ts +++ b/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'; diff --git a/packages/docusaurus-theme-common/src/utils/historyUtils.ts b/packages/docusaurus-theme-common/src/utils/historyUtils.ts index 921f945886..4c8b89c834 100644 --- a/packages/docusaurus-theme-common/src/utils/historyUtils.ts +++ b/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)), diff --git a/packages/docusaurus-theme-common/src/utils/reactUtils.tsx b/packages/docusaurus-theme-common/src/utils/reactUtils.tsx index fea9269b57..1c069adab2 100644 --- a/packages/docusaurus-theme-common/src/utils/reactUtils.tsx +++ b/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 unknown>( +export function useEvent unknown>( callback: T, ): T { const ref = useRef(callback); diff --git a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx index 514222d18a..8d530ed48a 100644 --- a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx +++ b/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(getScrollPosition()); - const dynamicEffect = useDynamicCallback(effect); + const dynamicEffect = useEvent(effect); useEffect(() => { const handleScroll = () => { diff --git a/packages/docusaurus-theme-common/src/utils/useLocationChange.ts b/packages/docusaurus-theme-common/src/utils/useLocationChange.ts index 515493996e..56708058cf 100644 --- a/packages/docusaurus-theme-common/src/utils/useLocationChange.ts +++ b/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) { diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx index 02ce845699..dc406a22bd 100644 --- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx +++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx @@ -20,7 +20,7 @@ import { HtmlClassNameProvider, usePluralForm, isRegexpStringMatch, - useDynamicCallback, + useEvent, } from '@docusaurus/theme-common'; import { useTitleFormatter, @@ -316,7 +316,7 @@ function SearchPageContent(): JSX.Element { description: 'The search page title for empty query', }); - const makeSearch = useDynamicCallback((page: number = 0) => { + const makeSearch = useEvent((page: number = 0) => { algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default'); algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale);