From 0464aa905efdb5e1badd45061b64c80482f8387e Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 22 Apr 2022 14:36:53 +0200
Subject: [PATCH] return useRef() value directly

---
 .../src/hooks/useCodeWordWrap.ts              | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts b/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
index c80ecf5b032b..2bffde55c4cf 100644
--- a/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
+++ b/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
@@ -5,26 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {MutableRefObject} from 'react';
+import type {RefObject} from 'react';
 import {useState, useCallback, useEffect, useRef} from 'react';
 
 export function useCodeWordWrap(): {
-  readonly codeBlockRef: (node: HTMLPreElement | null) => void;
+  readonly codeBlockRef: RefObject<HTMLPreElement>;
   readonly isEnabled: boolean;
   readonly isCodeScrollable: boolean;
   readonly toggle: () => void;
 } {
   const [isEnabled, setIsEnabled] = useState(false);
   const [isCodeScrollable, setIsCodeScrollable] = useState<boolean>(false);
-  const codeBlock = useRef() as MutableRefObject<HTMLPreElement>;
-  const codeBlockRef = useCallback((node: HTMLPreElement | null) => {
-    if (node !== null) {
-      codeBlock.current = node;
-    }
-  }, []);
+  const codeBlockRef = useRef<HTMLPreElement>(null);
 
   const toggle = useCallback(() => {
-    const codeElement = codeBlock.current.querySelector('code')!;
+    const codeElement = codeBlockRef.current!.querySelector('code')!;
 
     if (isEnabled) {
       codeElement.removeAttribute('style');
@@ -33,15 +28,15 @@ export function useCodeWordWrap(): {
     }
 
     setIsEnabled((value) => !value);
-  }, [codeBlock, isEnabled]);
+  }, [codeBlockRef, isEnabled]);
 
   const updateCodeIsScrollable = useCallback(() => {
-    const {scrollWidth, clientWidth} = codeBlock.current;
+    const {scrollWidth, clientWidth} = codeBlockRef.current!;
     const isScrollable =
       scrollWidth > clientWidth ||
-      codeBlock.current.querySelector('code')!.hasAttribute('style');
+      codeBlockRef.current!.querySelector('code')!.hasAttribute('style');
     setIsCodeScrollable(isScrollable);
-  }, [codeBlock]);
+  }, [codeBlockRef]);
 
   useEffect(() => {
     updateCodeIsScrollable();
@@ -55,8 +50,7 @@ export function useCodeWordWrap(): {
     return () => {
       window.removeEventListener('resize', updateCodeIsScrollable);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [updateCodeIsScrollable]);
 
   return {codeBlockRef, isEnabled, isCodeScrollable, toggle};
 }