Create codemod for addressing ESLint warnings (#10032)

src/lib/currency.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 
 import {deviceLocales} from '#/locale/deviceLocales'
 import {useLanguagePrefs} from '#/state/preferences'
@@ -277,7 +277,7 @@ export function useFormatCurrency(
 ) {
   const geolocation = useGeolocation()
   const {appLanguage} = useLanguagePrefs()
-  return React.useMemo(() => {
+  return useMemo(() => {
     const locale = deviceLocales.at(0)
     const languageTag = locale?.languageTag || appLanguage || 'en-US'
     const countryCode = (

src/lib/custom-animations/CountWheel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {View} from 'react-native'
 import Animated, {
   Easing,
@@ -105,14 +105,14 @@ export function CountWheel({
   // animation
   // The initial entering/exiting animations will get skipped, since these will happen on screen mounts and would
   // be unnecessary
-  const [key, setKey] = React.useState(0)
-  const [prevCount, setPrevCount] = React.useState(likeCount)
-  const prevIsLiked = React.useRef(isLiked)
+  const [key, setKey] = useState(0)
+  const [prevCount, setPrevCount] = useState(likeCount)
+  const prevIsLiked = useRef(isLiked)
   const formatPostStatCount = useFormatPostStatCount()
   const formattedCount = formatPostStatCount(likeCount)
   const formattedPrevCount = formatPostStatCount(prevCount)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isLiked === prevIsLiked.current) {
       return
     }

src/lib/custom-animations/CountWheel.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {useReducedMotion} from 'react-native-reanimated'
 
@@ -49,16 +49,16 @@ export function CountWheel({
   const shouldAnimate = !useReducedMotion() && hasBeenToggled
   const shouldRoll = decideShouldRoll(isLiked, likeCount)
 
-  const countView = React.useRef<HTMLDivElement>(null)
-  const prevCountView = React.useRef<HTMLDivElement>(null)
+  const countView = useRef<HTMLDivElement>(null)
+  const prevCountView = useRef<HTMLDivElement>(null)
 
-  const [prevCount, setPrevCount] = React.useState(likeCount)
-  const prevIsLiked = React.useRef(isLiked)
+  const [prevCount, setPrevCount] = useState(likeCount)
+  const prevIsLiked = useRef(isLiked)
   const formatPostStatCount = useFormatPostStatCount()
   const formattedCount = formatPostStatCount(likeCount)
   const formattedPrevCount = formatPostStatCount(prevCount)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isLiked === prevIsLiked.current) {
       return
     }

src/lib/custom-animations/GestureActionView.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo, useState} from 'react'
 import {type ColorValue, Dimensions, StyleSheet, View} from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
@@ -50,7 +50,7 @@ export function GestureActionView({
     )
   }
 
-  const [activeAction, setActiveAction] = React.useState<
+  const [activeAction, setActiveAction] = useState<
     'leftFirst' | 'leftSecond' | 'rightFirst' | 'rightSecond' | null
   >(null)
 
@@ -231,7 +231,7 @@ export function GestureActionView({
     }
   })
 
-  const leftSideInterpolation = React.useMemo(() => {
+  const leftSideInterpolation = useMemo(() => {
     return createInterpolation({
       firstColor: actions.leftFirst?.color,
       secondColor: actions.leftSecond?.color,
@@ -241,7 +241,7 @@ export function GestureActionView({
     })
   }, [actions.leftFirst, actions.leftSecond])
 
-  const rightSideInterpolation = React.useMemo(() => {
+  const rightSideInterpolation = useMemo(() => {
     return createInterpolation({
       firstColor: actions.rightFirst?.color,
       secondColor: actions.rightSecond?.color,
@@ -251,14 +251,14 @@ export function GestureActionView({
     })
   }, [actions.rightFirst, actions.rightSecond])
 
-  const interpolation = React.useMemo<{
+  const interpolation = useMemo<{
     inputRange: number[]
     outputRange: ColorValue[]
   }>(() => {
     if (!actions.leftFirst) {
-      return rightSideInterpolation!
+      return rightSideInterpolation
     } else if (!actions.rightFirst) {
-      return leftSideInterpolation!
+      return leftSideInterpolation
     } else {
       return {
         inputRange: [

src/lib/custom-animations/GestureActionView.web.tsx

@@ -1,5 +1,3 @@
-import type React from 'react'
-
 export function GestureActionView({children}: {children: React.ReactNode}) {
   return children
 }

src/lib/custom-animations/LikeIcon.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useRef} from 'react'
 import {View} from 'react-native'
 import {useReducedMotion} from 'react-native-reanimated'
 
@@ -50,13 +50,13 @@ export function AnimatedLikeIcon({
   const t = useTheme()
   const size = big ? 22 : 18
   const shouldAnimate = !useReducedMotion() && hasBeenToggled
-  const prevIsLiked = React.useRef(isLiked)
+  const prevIsLiked = useRef(isLiked)
 
-  const likeIconRef = React.useRef<HTMLDivElement>(null)
-  const circle1Ref = React.useRef<HTMLDivElement>(null)
-  const circle2Ref = React.useRef<HTMLDivElement>(null)
+  const likeIconRef = useRef<HTMLDivElement>(null)
+  const circle1Ref = useRef<HTMLDivElement>(null)
+  const circle2Ref = useRef<HTMLDivElement>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (prevIsLiked.current === isLiked) {
       return
     }

src/lib/haptics.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import * as Device from 'expo-device'
 import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics'
 
@@ -8,7 +8,7 @@ import {IS_IOS, IS_WEB} from '#/env'
 export function useHaptics() {
   const isHapticsDisabled = useHapticsDisabled()
 
-  return React.useCallback(
+  return useCallback(
     (strength: 'Light' | 'Medium' | 'Heavy' = 'Medium') => {
       if (isHapticsDisabled || IS_WEB) {
         return

src/lib/hooks/useIntentHandler.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect} from 'react'
 import {Alert} from 'react-native'
 import * as Linking from 'expo-linking'
 import * as WebBrowser from 'expo-web-browser'
@@ -28,7 +28,7 @@ export function useIntentHandler() {
   const {currentAccount} = useSession()
   const {tryApplyUpdate} = useApplyPullRequestOTAUpdate()
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleIncomingURL = async (url: string) => {
       if (IS_IOS) {
         // Close in-app browser if it's open (iOS only)
@@ -109,7 +109,7 @@ export function useComposeIntent() {
   const {openComposer} = useOpenComposer()
   const {hasSession} = useSession()
 
-  return React.useCallback(
+  return useCallback(
     ({
       text,
       imageUrisStr,
@@ -166,7 +166,7 @@ function useVerifyEmailIntent() {
   const closeAllActiveElements = useCloseAllActiveElements()
   const {verifyEmailDialogControl: control, setVerifyEmailState: setState} =
     useIntentDialogs()
-  return React.useCallback(
+  return useCallback(
     (code: string) => {
       closeAllActiveElements()
       setState({

src/lib/hooks/useOTAUpdates.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {Alert, AppState, type AppStateStatus} from 'react-native'
 import {nativeBuildVersion} from 'expo-application'
 import {
@@ -67,7 +67,7 @@ async function updateTestflight() {
 
 export function useApplyPullRequestOTAUpdate() {
   const {currentlyRunning} = useUpdates()
-  const [pending, setPending] = React.useState(false)
+  const [pending, setPending] = useState(false)
   const currentChannel = currentlyRunning?.channel
   const isCurrentlyRunningPullRequestDeployment =
     currentChannel?.startsWith('pull-request')
@@ -124,14 +124,14 @@ export function useApplyPullRequestOTAUpdate() {
 export function useOTAUpdates() {
   const shouldReceiveUpdates = isEnabled && !__DEV__
 
-  const appState = React.useRef<AppStateStatus>('active')
-  const lastMinimize = React.useRef(0)
-  const ranInitialCheck = React.useRef(false)
-  const timeout = React.useRef<NodeJS.Timeout>(undefined)
+  const appState = useRef<AppStateStatus>('active')
+  const lastMinimize = useRef(0)
+  const ranInitialCheck = useRef(false)
+  const timeout = useRef<NodeJS.Timeout>(undefined)
   const {currentlyRunning, isUpdatePending} = useUpdates()
   const currentChannel = currentlyRunning?.channel
 
-  const setCheckTimeout = React.useCallback(() => {
+  const setCheckTimeout = useCallback(() => {
     timeout.current = setTimeout(async () => {
       try {
         await setExtraParams()
@@ -153,7 +153,7 @@ export function useOTAUpdates() {
     }, 10e3)
   }, [])
 
-  const onIsTestFlight = React.useCallback(async () => {
+  const onIsTestFlight = useCallback(async () => {
     try {
       await updateTestflight()
     } catch (err: any) {
@@ -163,7 +163,7 @@ export function useOTAUpdates() {
     }
   }, [])
 
-  React.useEffect(() => {
+  useEffect(() => {
     // We don't need to check anything if the current update is a PR update
     if (currentChannel?.startsWith('pull-request')) {
       return
@@ -186,7 +186,7 @@ export function useOTAUpdates() {
 
   // After the app has been minimized for 15 minutes, we want to either A. install an update if one has become available
   // or B check for an update again.
-  React.useEffect(() => {
+  useEffect(() => {
     // We also don't start this timeout if the user is on a pull request update
     if (!isEnabled || currentChannel?.startsWith('pull-request')) {
       return

src/lib/moderation.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {
   type AppBskyLabelerDefs,
   BskyAgent,
@@ -122,7 +122,7 @@ export type Subject =
 export function useLabelSubject({label}: {label: ComAtprotoLabelDefs.Label}): {
   subject: Subject
 } {
-  return React.useMemo(() => {
+  return useMemo(() => {
     const {cid, uri} = label
     if (cid) {
       return {

src/lib/moderation/useModerationCauseDescription.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {
   BSKY_LABELER_DID,
   type ModerationCause,
@@ -39,7 +39,7 @@ export function useModerationCauseDescription(
   const {labelDefs, labelers} = useLabelDefinitions()
   const globalLabelStrings = useGlobalLabelStrings()
 
-  return React.useMemo(() => {
+  return useMemo(() => {
     if (!cause) {
       return {
         icon: Warning,