type fixes for React 18

Author: slorber

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

@@ -11,7 +11,7 @@ import {useMutationObserver} from './useMutationObserver';
 // Callback fires when the "hidden" attribute of a tabpanel changes
 // See https://github.com/facebook/docusaurus/pull/7485
 function useTabBecameVisibleCallback(
-  codeBlockRef: RefObject<HTMLPreElement | null>,
+  codeBlockRef: RefObject<HTMLPreElement>,
   callback: () => void,
 ) {
   const [hiddenTabElement, setHiddenTabElement] = useState<
@@ -53,7 +53,7 @@ function useTabBecameVisibleCallback(
 }
 
 export function useCodeWordWrap(): {
-  readonly codeBlockRef: RefObject<HTMLPreElement | null>;
+  readonly codeBlockRef: RefObject<HTMLPreElement>;
   readonly isEnabled: boolean;
   readonly isCodeScrollable: boolean;
   readonly toggle: () => void;

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

@@ -44,7 +44,7 @@ export function useEvent<T extends (...args: never[]) => unknown>(
  * Gets `value` from the last render.
  */
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>(undefined);
+  const ref = useRef<T>();
 
   useIsomorphicLayoutEffect(() => {
     ref.current = value;

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

@@ -52,7 +52,7 @@ function useSkipToContent(): {
    * so that keyboard navigators can instantly interact with the link and jump
    * to content.
    */
-  containerRef: React.RefObject<HTMLDivElement | null>;
+  containerRef: React.RefObject<HTMLDivElement>;
   /**
    * Callback fired when the skip to content link has been clicked.
    * It will programmatically focus the main content.

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx

@@ -199,6 +199,7 @@ function DocSearch({
           })),
   ).current;
 
+  // @ts-expect-error: TODO fix lib issue after React 19, using JSX.Element
   const resultsFooterComponent: DocSearchProps['resultsFooterComponent'] =
     useMemo(
       () =>

packages/docusaurus/src/client/exports/Link.tsx

@@ -100,7 +100,7 @@ function Link(
 
   const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;
 
-  const ioRef = useRef<IntersectionObserver>(undefined);
+  const ioRef = useRef<IntersectionObserver>();
 
   const handleRef = (el: HTMLAnchorElement | null) => {
     innerRef.current = el;