Enforce using named imports from 'react' (#10259)

eslint.config.mjs

@@ -250,6 +250,14 @@ export default defineConfig(
       '@typescript-eslint/prefer-promise-reject-errors': 'warn',
       '@typescript-eslint/await-thenable': 'warn',
 
+      "no-restricted-imports": ["error", {
+        "paths": [{
+          "name": "react",
+          "importNames": ["React", "default"],
+          "message": "React is already in the global type namespace. Use named imports for runtime modules."
+        }]
+      }],
+
       /**
        * Turn off rules that we haven't enforced thus far
        */

src/lib/hooks/useAnimatedValue.ts

@@ -1,12 +1,12 @@
-import * as React from 'react'
+import {useRef} from 'react'
 import {Animated} from 'react-native'
 
 export function useAnimatedValue(initialValue: number) {
-  const lazyRef = React.useRef<Animated.Value>(undefined)
+  const lazyRef = useRef<Animated.Value>(undefined)
 
   if (lazyRef.current === undefined) {
     lazyRef.current = new Animated.Value(initialValue)
   }
 
-  return lazyRef.current as Animated.Value
+  return lazyRef.current
 }

src/lib/hooks/useTimer.ts

@@ -1,13 +1,13 @@
-import * as React from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 
 /**
  * Helper hook to run persistent timers on views
  */
 export function useTimer(time: number, handler: () => void) {
-  const timer = React.useRef<undefined | NodeJS.Timeout>(undefined)
+  const timer = useRef<undefined | NodeJS.Timeout>(undefined)
 
   // function to restart the timer
-  const reset = React.useCallback(() => {
+  const reset = useCallback(() => {
     if (timer.current) {
       clearTimeout(timer.current)
     }
@@ -15,7 +15,7 @@ export function useTimer(time: number, handler: () => void) {
   }, [time, timer, handler])
 
   // function to cancel the timer
-  const cancel = React.useCallback(() => {
+  const cancel = useCallback(() => {
     if (timer.current) {
       clearTimeout(timer.current)
       timer.current = undefined
@@ -23,7 +23,7 @@ export function useTimer(time: number, handler: () => void) {
   }, [timer])
 
   // start the timer immediately
-  React.useEffect(() => {
+  useEffect(() => {
     reset()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

src/view/com/pager/PagerWithHeader.web.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import {forwardRef, memo, useCallback, useState} from 'react'
 import {type JSX} from 'react'
 import {type ScrollView, View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
@@ -35,7 +35,7 @@ export interface PagerWithHeaderProps {
   onPageSelected?: (index: number) => void
   onCurrentPageSelected?: (index: number) => void
 }
-export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
+export const PagerWithHeader = forwardRef<PagerRef, PagerWithHeaderProps>(
   function PageWithHeaderImpl(
     {
       children,
@@ -49,9 +49,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     }: PagerWithHeaderProps,
     ref,
   ) {
-    const [currentPage, setCurrentPage] = React.useState(0)
+    const [currentPage, setCurrentPage] = useState(0)
 
-    const renderTabBar = React.useCallback(
+    const renderTabBar = useCallback(
       (props: RenderTabBarFnProps) => {
         return (
           <PagerTabBar
@@ -76,7 +76,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       ],
     )
 
-    const onPageSelectedInner = React.useCallback(
+    const onPageSelectedInner = useCallback(
       (index: number) => {
         setCurrentPage(index)
         onPageSelected?.(index)
@@ -162,7 +162,7 @@ let PagerTabBar = ({
     </>
   )
 }
-PagerTabBar = React.memo(PagerTabBar)
+PagerTabBar = memo(PagerTabBar)
 
 function PagerItem({
   isFocused,

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import {useEffect, useRef} from 'react'
 import {View} from 'react-native'
 // Based on @react-navigation/native-stack/src/navigators/createNativeStackNavigator.ts
 // MIT License
@@ -82,7 +82,7 @@ function NativeStackNavigator({
       UNSTABLE_router,
     })
 
-  React.useEffect(
+  useEffect(
     () =>
       // @ts-expect-error: there may not be a tab navigator in parent
       navigation?.addListener?.('tabPress', (e: any) => {
@@ -110,7 +110,7 @@ function NativeStackNavigator({
 
   // --- our custom logic starts here ---
   // Web LRU: tracks route keys in most-recently-focused order
-  const lruKeysRef = React.useRef<string[]>([])
+  const lruKeysRef = useRef<string[]>([])
   const {hasSession, currentAccount} = useSession()
   const activeRoute = state.routes[state.index]
   const activeDescriptor = descriptors[activeRoute.key]