Convert to Function Component

Author: eps1lon

packages/next/src/client/components/layout-router.tsx

@@ -22,6 +22,7 @@ import React, {
   startTransition,
   Suspense,
   useDeferredValue,
+  useLayoutEffect,
   type FragmentInstance,
   type JSX,
 } from 'react'
@@ -307,81 +308,73 @@ class InnerScrollAndFocusHandlerOld extends React.Component<ScrollAndFocusHandle
   }
 }
 
-class InnerScrollAndFocusHandlerNew extends React.Component<ScrollAndFocusHandlerProps> {
-  childrenRef = React.createRef<FragmentInstance>()
-
-  handlePotentialScroll = () => {
-    // Handle scroll and focus, it's only applied once in the first useEffect that triggers that changed.
-    const { focusAndScrollRef, segmentPath } = this.props
-
-    if (focusAndScrollRef.apply) {
-      // segmentPaths is an array of segment paths that should be scrolled to
-      // if the current segment path is not in the array, the scroll is not applied
-      // unless the array is empty, in which case the scroll is always applied
-      if (
-        focusAndScrollRef.segmentPaths.length !== 0 &&
-        !focusAndScrollRef.segmentPaths.some((scrollRefSegmentPath) =>
-          segmentPath.every((segment, index) =>
-            matchSegment(segment, scrollRefSegmentPath[index])
+function InnerScrollAndFocusHandlerNew(props: ScrollAndFocusHandlerProps) {
+  const childrenRef = React.useRef<FragmentInstance>(null)
+
+  useLayoutEffect(
+    () => {
+      const { focusAndScrollRef, segmentPath } = props
+      // Handle scroll and focus, it's only applied once in the first useEffect that triggers that changed.
+
+      if (focusAndScrollRef.apply) {
+        // segmentPaths is an array of segment paths that should be scrolled to
+        // if the current segment path is not in the array, the scroll is not applied
+        // unless the array is empty, in which case the scroll is always applied
+        if (
+          focusAndScrollRef.segmentPaths.length !== 0 &&
+          !focusAndScrollRef.segmentPaths.some((scrollRefSegmentPath) =>
+            segmentPath.every((segment, index) =>
+              matchSegment(segment, scrollRefSegmentPath[index])
+            )
           )
-        )
-      ) {
-        return
-      }
-
-      let domNode: FragmentInstance | HTMLElement | null = null
-      const hashFragment = focusAndScrollRef.hashFragment
-
-      if (hashFragment) {
-        domNode = getHashFragmentDomNode(hashFragment)
-      }
+        ) {
+          return
+        }
 
-      if (!domNode) {
-        domNode = this.childrenRef.current
-      }
+        let domNode: FragmentInstance | HTMLElement | null = null
+        const hashFragment = focusAndScrollRef.hashFragment
 
-      // If there is no DOM node this layout-router level is skipped. It'll be handled higher-up in the tree.
-      if (domNode === null) {
-        return
-      }
+        if (hashFragment) {
+          domNode = getHashFragmentDomNode(hashFragment)
+        }
 
-      // State is mutated to ensure that the focus and scroll is applied only once.
-      focusAndScrollRef.apply = false
-      focusAndScrollRef.hashFragment = null
-      focusAndScrollRef.segmentPaths = []
+        if (!domNode) {
+          domNode = childrenRef.current
+        }
 
-      const alignToTop = false
-      disableSmoothScrollDuringRouteTransition(
-        domNode.experimental_scrollIntoView.bind(domNode, alignToTop),
-        {
-          // We will force layout by querying domNode position
-          dontForceLayout: true,
-          onlyHashChange: focusAndScrollRef.onlyHashChange,
+        // If there is no DOM node this layout-router level is skipped. It'll be handled higher-up in the tree.
+        if (domNode === null) {
+          return
         }
-      )
 
-      // Mutate after scrolling so that it can be read by `disableSmoothScrollDuringRouteTransition`
-      focusAndScrollRef.onlyHashChange = false
+        // State is mutated to ensure that the focus and scroll is applied only once.
+        focusAndScrollRef.apply = false
+        focusAndScrollRef.hashFragment = null
+        focusAndScrollRef.segmentPaths = []
 
-      // Set focus on the element
-      domNode.focus()
-    }
-  }
+        const alignToTop = false
+        disableSmoothScrollDuringRouteTransition(
+          domNode.experimental_scrollIntoView.bind(domNode, alignToTop),
+          {
+            // We will force layout by querying domNode position
+            dontForceLayout: true,
+            onlyHashChange: focusAndScrollRef.onlyHashChange,
+          }
+        )
 
-  componentDidMount() {
-    this.handlePotentialScroll()
-  }
+        // Mutate after scrolling so that it can be read by `disableSmoothScrollDuringRouteTransition`
+        focusAndScrollRef.onlyHashChange = false
 
-  componentDidUpdate() {
-    // Because this property is overwritten in handlePotentialScroll it's fine to always run it when true as it'll be set to false for subsequent renders.
-    if (this.props.focusAndScrollRef.apply) {
-      this.handlePotentialScroll()
-    }
-  }
+        // Set focus on the element
+        domNode.focus()
+      }
+    },
+    // Used to run on every commit. We may be able to be smarter about this
+    // but be prepared for lots of manual testing.
+    undefined
+  )
 
-  render() {
-    return <Fragment ref={this.childrenRef}>{this.props.children}</Fragment>
-  }
+  return <Fragment ref={childrenRef}>{props.children}</Fragment>
 }
 
 const InnerScrollAndFocusHandler = enableNewScrollHandler