feat: React 18 + automatic JSX runtime + build --dev (#8961)

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -10,13 +10,13 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useLayoutEffect,
   type RefObject,
   type Dispatch,
   type SetStateAction,
   type ReactNode,
 } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
 const DefaultAnimationEasing = 'ease-in-out';
@@ -231,13 +231,13 @@ function CollapsibleLazy({collapsed, ...props}: CollapsibleBaseProps) {
   // Updated in effect so that first expansion transition can work
   const [lazyCollapsed, setLazyCollapsed] = useState(collapsed);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!collapsed) {
       setMounted(true);
     }
   }, [collapsed]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (mounted) {
       setLazyCollapsed(collapsed);
     }

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

@@ -48,7 +48,6 @@ export {ThemeClassNames} from './utils/ThemeClassNames';
 export {prefersReducedMotion} from './utils/accessibilityUtils';
 
 export {
-  useIsomorphicLayoutEffect,
   useEvent,
   usePrevious,
   composeProviders,

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

@@ -7,26 +7,12 @@
 
 import React, {
   useCallback,
-  useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   type ComponentType,
   type ReactNode,
 } from 'react';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-/**
- * This hook is like `useLayoutEffect`, but without the SSR warning.
- * It seems hacky but it's used in many React libs (Redux, Formik...).
- * Also mentioned here: https://github.com/facebook/react/issues/16956
- *
- * It is useful when you need to update a ref as soon as possible after a React
- * render (before `useEffect`).
- */
-export const useIsomorphicLayoutEffect = ExecutionEnvironment.canUseDOM
-  ? useLayoutEffect
-  : useEffect;
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 
 /**
  * Temporary userland implementation until an official hook is implemented

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

@@ -9,13 +9,13 @@ import React, {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   type ReactNode,
 } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {useEvent, ReactContextError} from './reactUtils';
 
 type ScrollController = {
@@ -221,7 +221,7 @@ export function useScrollPositionBlocker(): {
     [scrollController, scrollPositionSaver],
   );
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     // Queuing permits to restore scroll position after all useLayoutEffect
     // have run, and yet preserve the sync nature of the scroll restoration
     // See https://github.com/facebook/docusaurus/issues/8625

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

@@ -12,9 +12,9 @@ import React, {
   useMemo,
   type ReactNode,
   type ReactElement,
-  useLayoutEffect,
 } from 'react';
 import {useHistory} from '@docusaurus/router';
+import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {useQueryStringValue} from '@docusaurus/theme-common/internal';
 import {duplicates, useStorageSlot} from '../index';
 
@@ -252,7 +252,7 @@ export function useTabs(props: TabsProps): {
   })();
   // Sync in a layout/sync effect is important, for useScrollPositionBlocker
   // See https://github.com/facebook/docusaurus/issues/8625
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (valueToSync) {
       setSelectedValue(valueToSync);
     }