clean up useReducer code re dev indicator (#77354)

Follow-up to #76976

Since we want to make explicit mode check from outside, we can now
remove the implicitly checked one from inside.

Author: gaojude

packages/next/src/client/components/react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator-internal.tsx

@@ -1,20 +1,16 @@
-const NOOP = (fn: () => void) => fn()
+import { useEffect, useTransition } from 'react'
+import { devRenderIndicator } from './dev-render-indicator'
 
-/**
- * Returns a transition function that can be used to wrap router actions.
- * This allows us to tap into the transition state of the router as an
- * approximation of React render time.
- */
 export const useSyncDevRenderIndicator = () => {
-  let syncDevRenderIndicator = NOOP
+  const [isPending, startTransition] = useTransition()
 
-  if (process.env.NODE_ENV === 'development') {
-    const { useSyncDevRenderIndicatorInternal } =
-      require('./use-sync-dev-render-indicator-internal') as typeof import('./use-sync-dev-render-indicator-internal')
+  useEffect(() => {
+    if (isPending) {
+      devRenderIndicator.show()
+    } else {
+      devRenderIndicator.hide()
+    }
+  }, [isPending])
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    syncDevRenderIndicator = useSyncDevRenderIndicatorInternal()
-  }
-
-  return syncDevRenderIndicator
+  return startTransition
 }

packages/next/src/client/components/react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator.tsx

@@ -17,36 +17,38 @@ export function useUnwrapState(state: ReducerState): AppRouterState {
 
   return state
 }
-
 export function useReducer(
   actionQueue: AppRouterActionQueue
 ): [ReducerState, Dispatch<ReducerActions>] {
   const [state, setState] = React.useState<ReducerState>(actionQueue.state)
-  const actionDispatch = (action: ReducerActions) => {
-    actionQueue.dispatch(action, setState)
-  }
 
-  let syncDevRenderIndicator
+  const syncDevRenderIndicatorInDevelopment =
+    useSyncDevRenderIndicatorInDevelopment()
+
+  const dispatch = useCallback(
+    (action: ReducerActions) => {
+      syncDevRenderIndicatorInDevelopment(() =>
+        actionQueue.dispatch(action, setState)
+      )
+    },
+    [actionQueue, syncDevRenderIndicatorInDevelopment]
+  )
+
+  return [state, dispatch]
+}
+
+const PASS_THROUGH = (fn: () => void) => fn()
+
+const useSyncDevRenderIndicatorInDevelopment = () => {
   if (process.env.NODE_ENV !== 'production') {
     const useSyncDevRenderIndicator =
       require('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator')
         .useSyncDevRenderIndicator as typeof import('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator').useSyncDevRenderIndicator
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    syncDevRenderIndicator = useSyncDevRenderIndicator()
+    const syncDevRenderIndicator = useSyncDevRenderIndicator()
+    return syncDevRenderIndicator
+  } else {
+    return PASS_THROUGH
   }
-
-  const dispatchCallback =
-    process.env.NODE_ENV !== 'production'
-      ? (action: ReducerActions) => {
-          syncDevRenderIndicator!(() => actionDispatch(action))
-        }
-      : actionDispatch
-
-  const dispatch = useCallback(dispatchCallback, [
-    actionQueue,
-    dispatchCallback,
-    syncDevRenderIndicator,
-  ])
-
-  return [state, dispatch]
 }