diff --git a/.jscodeshift/react-import.js b/.jscodeshift/react-import.js
new file mode 100644
--- /dev/null
+++ b/.jscodeshift/react-import.js
@@ -0,0 +1,135 @@
+/**
+ * Codemod to replace namespaced React calls with named imports
+ *
+ * Before:
+ *   import React from 'react'
+ *   React.useEffect(() => {}, [])
+ *
+ * After:
+ *   import { useEffect } from 'react'
+ *   useEffect(() => {}, [])
+ *
+ * Usage: jscodeshift -t .jscodeshift/react-import.js <file-path>
+ * Example: jscodeshift -t .jscodeshift/react-import.js src/App.native.tsx
+ */
+
+/* eslint-disable */
+
+export const parser = 'tsx'
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Find the React import
+  let reactImportPath = null
+  const reactMembers = new Set()
+
+  root.find(j.ImportDeclaration).forEach(path => {
+    const node = path.value
+    if (node.source.value === 'react') {
+      node.specifiers.forEach(spec => {
+        // Check if this is a default import of React
+        if (
+          spec.type === 'ImportDefaultSpecifier' &&
+          spec.local.name === 'React'
+        ) {
+          reactImportPath = path
+        }
+      })
+    }
+  })
+
+  if (!reactImportPath) {
+    // No React import found, nothing to do
+    return file.source
+  }
+
+  // Find all React.* member expressions
+  root
+    .find(j.MemberExpression)
+    .filter(path => {
+      const node = path.value
+      return (
+        node.object.type === 'Identifier' &&
+        node.object.name === 'React' &&
+        node.property.type === 'Identifier'
+      )
+    })
+    .forEach(path => {
+      const propertyName = path.value.property.name
+      reactMembers.add(propertyName)
+    })
+
+  // Find all React.* JSX member expressions (e.g., <React.Fragment>)
+  root
+    .find(j.JSXMemberExpression)
+    .filter(path => {
+      const node = path.value
+      return node.object.name === 'React' && node.property.name
+    })
+    .forEach(path => {
+      const propertyName = path.value.property.name
+      reactMembers.add(propertyName)
+    })
+
+  // If no React members are used, remove the import
+  if (reactMembers.size === 0) {
+    reactImportPath.prune()
+    return root.toSource()
+  }
+
+  // Sort the members for consistent output
+  const sortedMembers = Array.from(reactMembers).sort()
+
+  // Create new import specifiers
+  const newSpecifiers = sortedMembers.map(name =>
+    j.importSpecifier(j.identifier(name), j.identifier(name)),
+  )
+
+  // Get the existing import specifiers
+  const sortedImports = Array.from(reactImportPath.value.specifiers).sort()
+  const existingSpecifiers = sortedImports.filter(
+    specifier => specifier.type !== 'ImportDefaultSpecifier',
+  )
+
+  const allSpecifiers = [
+    ...new Map(
+      [...existingSpecifiers, ...newSpecifiers].map(item => [
+        item.imported.name,
+        item,
+      ]),
+    ).values(),
+  ]
+
+  // Update the import declaration
+  reactImportPath.value.specifiers = allSpecifiers
+
+  // Replace all React.* member expressions with just the identifier
+  root
+    .find(j.MemberExpression)
+    .filter(path => {
+      const node = path.value
+      return (
+        node.object.type === 'Identifier' &&
+        node.object.name === 'React' &&
+        node.property.type === 'Identifier'
+      )
+    })
+    .replaceWith(path => {
+      return j.identifier(path.value.property.name)
+    })
+
+  // Replace all React.* JSX member expressions with just the identifier
+  root
+    .find(j.JSXMemberExpression)
+    .filter(path => {
+      const node = path.value
+      return node.object.name === 'React' && node.property.name
+    })
+    .replaceWith(path => {
+      return j.jsxIdentifier(path.value.property.name)
+    })
+
+  return root.toSource()
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -37,6 +37,7 @@ 'src/locale/locales/**/*.js',
       '*.e2e.ts',
       '*.e2e.tsx',
       'eslint.config.mjs',
+      '.jscodeshift/**',
     ],
   },
 
diff --git a/src/App.native.tsx b/src/App.native.tsx
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -1,7 +1,7 @@
 import '#/logger/sentry/setup'
 import '#/view/icons'
 
-import React, {useEffect, useState} from 'react'
+import {Fragment, useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {KeyboardProvider as KeyboardControllerProvider} from 'react-native-keyboard-controller'
 import {
@@ -111,7 +111,7 @@ prefetchLiveEvents()
 prefetchAppConfig()
 
 function InnerApp() {
-  const [isReady, setIsReady] = React.useState(false)
+  const [isReady, setIsReady] = useState(false)
   const {currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
@@ -152,7 +152,7 @@ <ThemeProvider theme={theme}>
         <ContextMenuProvider>
           <Splash isReady={isReady && hasCheckedReferrer}>
             <VideoVolumeProvider>
-              <React.Fragment
+              <Fragment
                 // Resets the entire tree below when it changes:
                 key={currentAccount?.did}>
                 <AnalyticsFeaturesContext>
@@ -208,7 +208,7 @@ </LiveEventsProvider>
                     </PolicyUpdateOverlayProvider>
                   </QueryProvider>
                 </AnalyticsFeaturesContext>
-              </React.Fragment>
+              </Fragment>
             </VideoVolumeProvider>
           </Splash>
         </ContextMenuProvider>
@@ -220,7 +220,7 @@
 function App() {
   const [isReady, setReady] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     Promise.all([initPersistedState(), Geo.resolve(), setupDeviceId]).then(() =>
       setReady(true),
     )
diff --git a/src/Splash.tsx b/src/Splash.tsx
--- a/src/Splash.tsx
+++ b/src/Splash.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react'
+import {forwardRef, useCallback, useEffect, useState} from 'react'
 import {
   AccessibilityInfo,
   Image as RNImage,
@@ -29,7 +29,7 @@ const darkSplashImageUri = RNImage.resolveAssetSource(
   darkSplashImagePointer,
 ).uri
 
-export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
+export const Logo = forwardRef(function LogoImpl(props: SvgProps, ref) {
   const width = 1000
   const height = width * (67 / 64)
   return (
@@ -58,12 +58,10 @@ const intro = useSharedValue(0)
   const outroLogo = useSharedValue(0)
   const outroApp = useSharedValue(0)
   const outroAppOpacity = useSharedValue(0)
-  const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
-  const [isImageLoaded, setIsImageLoaded] = React.useState(false)
-  const [isLayoutReady, setIsLayoutReady] = React.useState(false)
-  const [reduceMotion, setReduceMotion] = React.useState<boolean | undefined>(
-    false,
-  )
+  const [isAnimationComplete, setIsAnimationComplete] = useState(false)
+  const [isImageLoaded, setIsImageLoaded] = useState(false)
+  const [isLayoutReady, setIsLayoutReady] = useState(false)
+  const [reduceMotion, setReduceMotion] = useState<boolean | undefined>(false)
   const isReady =
     props.isReady &&
     isImageLoaded &&
diff --git a/src/alf/index.tsx b/src/alf/index.tsx
--- a/src/alf/index.tsx
+++ b/src/alf/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useMemo, useState} from 'react'
 import {type Theme, type ThemeName} from '@bsky.app/alf'
 
 import {
@@ -46,7 +46,7 @@
 /*
  * Context
  */
-export const Context = React.createContext<Alf>({
+export const Context = createContext<Alf>({
   themeName: 'light',
   theme: themes.light,
   themes,
@@ -65,15 +65,13 @@ export function ThemeProvider({
   children,
   theme: themeName,
 }: React.PropsWithChildren<{theme: ThemeName}>) {
-  const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() =>
+  const [fontScale, setFontScale] = useState<Alf['fonts']['scale']>(() =>
     getFontScale(),
   )
-  const [fontScaleMultiplier, setFontScaleMultiplier] = React.useState(() =>
+  const [fontScaleMultiplier, setFontScaleMultiplier] = useState(() =>
     computeFontScaleMultiplier(fontScale),
   )
-  const setFontScaleAndPersist = React.useCallback<
-    Alf['fonts']['setFontScale']
-  >(
+  const setFontScaleAndPersist = useCallback<Alf['fonts']['setFontScale']>(
     fs => {
       setFontScale(fs)
       persistFontScale(fs)
@@ -81,12 +79,10 @@ setFontScaleMultiplier(computeFontScaleMultiplier(fs))
     },
     [setFontScale],
   )
-  const [fontFamily, setFontFamily] = React.useState<Alf['fonts']['family']>(
-    () => getFontFamily(),
+  const [fontFamily, setFontFamily] = useState<Alf['fonts']['family']>(() =>
+    getFontFamily(),
   )
-  const setFontFamilyAndPersist = React.useCallback<
-    Alf['fonts']['setFontFamily']
-  >(
+  const setFontFamilyAndPersist = useCallback<Alf['fonts']['setFontFamily']>(
     ff => {
       setFontFamily(ff)
       persistFontFamily(ff)
@@ -94,7 +90,7 @@ },
     [setFontFamily],
   )
 
-  const value = React.useMemo<Alf>(
+  const value = useMemo<Alf>(
     () => ({
       themes,
       themeName: themeName,
@@ -122,12 +118,12 @@ return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
 export function useAlf() {
-  return React.useContext(Context)
+  return useContext(Context)
 }
 
 export function useTheme(theme?: ThemeName) {
   const alf = useAlf()
-  return React.useMemo(() => {
+  return useMemo(() => {
     return theme ? alf.themes[theme] : alf.theme
   }, [theme, alf])
 }
diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useLayoutEffect} from 'react'
 import {type ColorSchemeName, useColorScheme} from 'react-native'
 import {type ThemeName} from '@bsky.app/alf'
 
@@ -9,7 +9,7 @@
 export function useColorModeTheme(): ThemeName {
   const theme = useThemeName()
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     updateDocument(theme)
   }, [theme])
 
diff --git a/src/alf/util/useGutters.ts b/src/alf/util/useGutters.ts
--- a/src/alf/util/useGutters.ts
+++ b/src/alf/util/useGutters.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 
 import {type Breakpoint, useBreakpoints} from '#/alf/breakpoints'
 import * as tokens from '#/alf/tokens'
@@ -52,7 +52,7 @@ } else if (bottom === undefined) {
     bottom = top
     left = right
   }
-  return React.useMemo(() => {
+  return useMemo(() => {
     return {
       paddingTop: top === 0 ? 0 : gutters[top][activeBreakpoint || 'default'],
       paddingRight:
diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
--- a/src/components/AccountList.tsx
+++ b/src/components/AccountList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {Fragment, useCallback} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -52,7 +52,7 @@ a.border,
         t.atoms.border_contrast_low,
       ]}>
       {accounts.map(account => (
-        <React.Fragment key={account.did}>
+        <Fragment key={account.did}>
           <AccountItem
             profile={profiles?.profiles.find(p => p.did === account.did)}
             account={account}
@@ -61,7 +61,7 @@ isCurrentAccount={account.did === currentAccount?.did}
             isPendingAccount={account.did === pendingDid}
           />
           <View style={[a.border_b, t.atoms.border_contrast_low]} />
-        </React.Fragment>
+        </Fragment>
       ))}
       <Button
         testID="chooseAddAccountBtn"
diff --git a/src/components/AppLanguageDropdown.tsx b/src/components/AppLanguageDropdown.tsx
--- a/src/components/AppLanguageDropdown.tsx
+++ b/src/components/AppLanguageDropdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -20,7 +20,7 @@ const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
   const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
 
-  const onChangeAppLanguage = React.useCallback(
+  const onChangeAppLanguage = useCallback(
     (value: string) => {
       if (!value) return
       if (sanitizedLang !== value) {
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 import {
   type AccessibilityProps,
   type GestureResponderEvent,
@@ -108,7 +115,7 @@
 export type ButtonTextProps = TextProps &
   VariantProps & {disabled?: boolean; emoji?: boolean}
 
-const Context = React.createContext<VariantProps & ButtonState>({
+const Context = createContext<VariantProps & ButtonState>({
   hovered: false,
   focused: false,
   pressed: false,
@@ -117,10 +124,10 @@ })
 Context.displayName = 'ButtonContext'
 
 export function useButtonContext() {
-  return React.useContext(Context)
+  return useContext(Context)
 }
 
-export const Button = React.forwardRef<View, ButtonProps>(
+export const Button = forwardRef<View, ButtonProps>(
   (
     {
       children,
@@ -153,13 +160,13 @@ variant = 'solid'
     }
 
     const t = useTheme()
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
       pressed: false,
       hovered: false,
       focused: false,
     })
 
-    const onPressIn = React.useCallback(
+    const onPressIn = useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
           ...s,
@@ -169,7 +176,7 @@ onPressInOuter?.(e)
       },
       [setState, onPressInOuter],
     )
-    const onPressOut = React.useCallback(
+    const onPressOut = useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
           ...s,
@@ -179,7 +186,7 @@ onPressOutOuter?.(e)
       },
       [setState, onPressOutOuter],
     )
-    const onHoverIn = React.useCallback(
+    const onHoverIn = useCallback(
       (e: MouseEvent) => {
         setState(s => ({
           ...s,
@@ -189,7 +196,7 @@ onHoverInOuter?.(e)
       },
       [setState, onHoverInOuter],
     )
-    const onHoverOut = React.useCallback(
+    const onHoverOut = useCallback(
       (e: MouseEvent) => {
         setState(s => ({
           ...s,
@@ -199,7 +206,7 @@ onHoverOutOuter?.(e)
       },
       [setState, onHoverOutOuter],
     )
-    const onFocus = React.useCallback(
+    const onFocus = useCallback(
       (e: NativeSyntheticEvent<TargetedEvent>) => {
         setState(s => ({
           ...s,
@@ -209,7 +216,7 @@ onFocusOuter?.(e)
       },
       [setState, onFocusOuter],
     )
-    const onBlur = React.useCallback(
+    const onBlur = useCallback(
       (e: NativeSyntheticEvent<TargetedEvent>) => {
         setState(s => ({
           ...s,
@@ -220,7 +227,7 @@ },
       [setState, onBlurOuter],
     )
 
-    const {baseStyles, hoverStyles} = React.useMemo(() => {
+    const {baseStyles, hoverStyles} = useMemo(() => {
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
 
@@ -526,7 +533,7 @@ hoverStyles,
       }
     }, [t, variant, color, size, shape, disabled])
 
-    const context = React.useMemo<ButtonContext>(
+    const context = useMemo<ButtonContext>(
       () => ({
         ...state,
         variant,
@@ -581,7 +588,7 @@
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()
-  return React.useMemo(() => {
+  return useMemo(() => {
     const baseStyles: TextStyle[] = []
 
     /*
@@ -778,67 +785,66 @@ size?: SVGIconProps['size']
 }) {
   const {size: buttonSize, shape: buttonShape} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
-  const {iconSize, iconContainerSize, iconNegativeMargin} =
-    React.useMemo(() => {
-      /**
-       * Pre-set icon sizes for different button sizes
-       */
-      const iconSizeShorthand =
-        size ??
-        (({
-          large: 'md',
-          small: 'sm',
-          tiny: 'xs',
-        }[buttonSize || 'small'] || 'sm') as Exclude<
-          SVGIconProps['size'],
-          undefined
-        >)
+  const {iconSize, iconContainerSize, iconNegativeMargin} = useMemo(() => {
+    /**
+     * Pre-set icon sizes for different button sizes
+     */
+    const iconSizeShorthand =
+      size ??
+      (({
+        large: 'md',
+        small: 'sm',
+        tiny: 'xs',
+      }[buttonSize || 'small'] || 'sm') as Exclude<
+        SVGIconProps['size'],
+        undefined
+      >)
 
-      /*
-       * Copied here from icons/common.tsx so we can tweak if we need to, but
-       * also so that we can calculate transforms.
-       */
-      const iconSize = {
-        xs: 12,
-        sm: 16,
-        md: 18,
-        lg: 24,
-        xl: 28,
-        '2xs': 8,
-        '2xl': 32,
-        '3xl': 40,
-      }[iconSizeShorthand]
+    /*
+     * Copied here from icons/common.tsx so we can tweak if we need to, but
+     * also so that we can calculate transforms.
+     */
+    const iconSize = {
+      xs: 12,
+      sm: 16,
+      md: 18,
+      lg: 24,
+      xl: 28,
+      '2xs': 8,
+      '2xl': 32,
+      '3xl': 40,
+    }[iconSizeShorthand]
 
-      /*
-       * Goal here is to match rendered text size so that different size icons
-       * don't increase button size
-       */
-      const iconContainerSize = {
-        large: 20,
-        small: 17,
-        tiny: 15,
-      }[buttonSize || 'small']
+    /*
+     * Goal here is to match rendered text size so that different size icons
+     * don't increase button size
+     */
+    const iconContainerSize = {
+      large: 20,
+      small: 17,
+      tiny: 15,
+    }[buttonSize || 'small']
 
-      /*
-       * The icon needs to be closer to the edge of the button than the text. Therefore
-       * we make the gap slightly too large, and then pull in the sides using negative margins.
-       */
-      let iconNegativeMargin = 0
+    /*
+     * The icon needs to be closer to the edge of the button than the text. Therefore
+     * we make the gap slightly too large, and then pull in the sides using negative margins.
+     */
+    let iconNegativeMargin = 0
 
-      if (buttonShape === 'default') {
-        iconNegativeMargin = {
-          large: -2,
-          small: -2,
-          tiny: -1,
-        }[buttonSize || 'small']
-      }
+    if (buttonShape === 'default') {
+      iconNegativeMargin = {
+        large: -2,
+        small: -2,
+        tiny: -1,
+      }[buttonSize || 'small']
+    }
 
-      return {
-        iconSize,
-        iconContainerSize,
-        iconNegativeMargin,
-      }
-    }, [buttonSize, buttonShape, size])
+    return {
+      iconSize,
+      iconContainerSize,
+      iconNegativeMargin,
+    }
+  }, [buttonSize, buttonShape, size])
 
   return (
     <View
diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
--- a/src/components/ContextMenu/index.tsx
+++ b/src/components/ContextMenu/index.tsx
@@ -1,4 +1,7 @@
-import React, {
+import {
+  cloneElement,
+  Fragment,
+  isValidElement,
   useCallback,
   useEffect,
   useId,
@@ -689,22 +692,22 @@ a.border,
                     t.atoms.border_contrast_low,
                   ]}>
                   {flattenReactChildren(children).map((child, i) => {
-                    return React.isValidElement(child) &&
+                    return isValidElement(child) &&
                       (child.type === Item || child.type === Divider) ? (
-                      <React.Fragment key={i}>
+                      <Fragment key={i}>
                         {i > 0 ? (
                           <View
                             style={[a.border_b, t.atoms.border_contrast_low]}
                           />
                         ) : null}
-                        {React.cloneElement(child, {
+                        {cloneElement(child, {
                           // @ts-expect-error not typed
                           style: {
                             borderRadius: 0,
                             borderWidth: 0,
                           },
                         })}
-                      </React.Fragment>
+                      </Fragment>
                     ) : null
                   })}
                 </View>
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -1,4 +1,11 @@
-import React, {useImperativeHandle} from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
 import {
   FlatList,
   type FlatListProps,
@@ -48,15 +55,15 @@ webOptions,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
-  const [isOpen, setIsOpen] = React.useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const {setDialogIsOpen} = useDialogStateControlContext()
 
-  const open = React.useCallback(() => {
+  const open = useCallback(() => {
     setDialogIsOpen(control.id, true)
     setIsOpen(true)
   }, [setIsOpen, setDialogIsOpen, control.id])
 
-  const close = React.useCallback<DialogControlProps['close']>(
+  const close = useCallback<DialogControlProps['close']>(
     cb => {
       setDialogIsOpen(control.id, false)
       setIsOpen(false)
@@ -80,7 +87,7 @@ },
     [control.id, onClose, setDialogIsOpen],
   )
 
-  const handleBackgroundPress = React.useCallback(
+  const handleBackgroundPress = useCallback(
     async (e: GestureResponderEvent) => {
       webOptions?.onBackgroundPress ? webOptions.onBackgroundPress(e) : close()
     },
@@ -96,7 +103,7 @@ }),
     [close, open],
   )
 
-  const context = React.useMemo(
+  const context = useMemo(
     () => ({
       close,
       isNativeDialog: false,
@@ -165,7 +172,7 @@ header,
   contentContainerStyle,
 }: DialogInnerProps) {
   const t = useTheme()
-  const {close} = React.useContext(Context)
+  const {close} = useContext(Context)
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
   FocusGuards.useFocusGuards()
@@ -215,7 +222,7 @@ }
 
 export const ScrollableInner = Inner
 
-export const InnerFlatList = React.forwardRef<
+export const InnerFlatList = forwardRef<
   FlatList,
   FlatListProps<any> & {label: string} & {
     webInnerStyle?: StyleProp<ViewStyle>
@@ -284,7 +291,7 @@ }
 
 export function Close() {
   const {_} = useLingui()
-  const {close} = React.useContext(Context)
+  const {close} = useContext(Context)
   return (
     <View
       style={[
diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts
--- a/src/components/Dialog/utils.ts
+++ b/src/components/Dialog/utils.ts
@@ -1,9 +1,9 @@
-import React from 'react'
+import {useEffect} from 'react'
 
 import {type DialogControlProps} from '#/components/Dialog/types'
 
 export function useAutoOpen(control: DialogControlProps, showTimeout?: number) {
-  React.useEffect(() => {
+  useEffect(() => {
     if (showTimeout) {
       const timeout = setTimeout(() => {
         control.open()
diff --git a/src/components/Fill.tsx b/src/components/Fill.tsx
--- a/src/components/Fill.tsx
+++ b/src/components/Fill.tsx
@@ -1,5 +1,4 @@
 import {View} from 'react-native'
-import type React from 'react'
 
 import {atoms as a, type ViewStyleProp} from '#/alf'
 
diff --git a/src/components/KnownFollowers.tsx b/src/components/KnownFollowers.tsx
--- a/src/components/KnownFollowers.tsx
+++ b/src/components/KnownFollowers.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useRef} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -46,9 +46,7 @@ onLinkPress?: LinkProps['onPress']
   minimal?: boolean
   showIfEmpty?: boolean
 }) {
-  const cache = React.useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(
-    new Map(),
-  )
+  const cache = useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(new Map())
 
   /*
    * Results for `knownFollowers` are not sorted consistently, so when
@@ -190,7 +188,7 @@ ]}
             numberOfLines={2}>
             {slice.length >= 2 ? (
               // 2-n followers, including blocks
-              serverCount > 2 ? (
+              serverCount > 2 ? ( // only 2
                 <Trans>
                   Followed by{' '}
                   <Text emoji key={slice[0].profile.did} style={textStyle}>
@@ -206,7 +204,7 @@ value={serverCount - 2}
                     one="# other"
                     other="# others"
                   />
-                </Trans> // only 2
+                </Trans>
               ) : (
                 <Trans>
                   Followed by{' '}
diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx
--- a/src/components/LabelingServiceCard/index.tsx
+++ b/src/components/LabelingServiceCard/index.tsx
@@ -3,7 +3,6 @@ import {type AppBskyLabelerDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Plural, Trans} from '@lingui/react/macro'
-import type React from 'react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {sanitizeHandle} from '#/lib/strings/handles'
diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx
--- a/src/components/LanguageSelect.tsx
+++ b/src/components/LanguageSelect.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -22,7 +22,7 @@ label?: string
 }) {
   const {_} = useLingui()
 
-  const handleOnChange = React.useCallback(
+  const handleOnChange = useCallback(
     (value: string) => {
       if (!value) return
       onChange(sanitizeAppLanguageSetting(value))
diff --git a/src/components/Layout/context.ts b/src/components/Layout/context.ts
--- a/src/components/Layout/context.ts
+++ b/src/components/Layout/context.ts
@@ -1,6 +1,6 @@
-import React from 'react'
+import {createContext} from 'react'
 
-export const ScrollbarOffsetContext = React.createContext({
+export const ScrollbarOffsetContext = createContext({
   isWithinOffsetView: false,
 })
 ScrollbarOffsetContext.displayName = 'ScrollbarOffsetContext'
diff --git a/src/components/LikedByList.tsx b/src/components/LikedByList.tsx
--- a/src/components/LikedByList.tsx
+++ b/src/components/LikedByList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {type AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -29,7 +29,7 @@
 export function LikedByList({uri}: {uri: string}) {
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
 
   const {
     data: resolvedUri,
@@ -49,14 +49,14 @@
   const error = resolveError || likedByError
   const isError = !!resolveError || !!likedByError
 
-  const likes = React.useMemo(() => {
+  const likes = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.likes)
     }
     return []
   }, [data])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -66,7 +66,7 @@ }
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || isError) return
     try {
       await fetchNextPage()
diff --git a/src/components/LinearGradientBackground.tsx b/src/components/LinearGradientBackground.tsx
--- a/src/components/LinearGradientBackground.tsx
+++ b/src/components/LinearGradientBackground.tsx
@@ -1,6 +1,5 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
-import type React from 'react'
 
 import {gradients} from '#/alf/tokens'
 
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {type GestureResponderEvent, Linking} from 'react-native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {
@@ -117,7 +117,7 @@ const {closeModal} = useModalControls()
   const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
 
-  const onPress = React.useCallback(
+  const onPress = useCallback(
     (e: GestureResponderEvent) => {
       const exitEarlyIfFalse = outerOnPress?.(e)
 
@@ -217,7 +217,7 @@ linkWarningDialogControl,
     ],
   )
 
-  const handleLongPress = React.useCallback(() => {
+  const handleLongPress = useCallback(() => {
     const requiresWarning = Boolean(
       !disableMismatchWarning &&
         displayText &&
@@ -242,7 +242,7 @@ isExternal,
     linkWarningDialogControl,
   ])
 
-  const onLongPress = React.useCallback(
+  const onLongPress = useCallback(
     (e: GestureResponderEvent) => {
       const exitEarlyIfFalse = outerOnLongPress?.(e)
       if (exitEarlyIfFalse === false) return
diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx
--- a/src/components/ListCard.tsx
+++ b/src/components/ListCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useMemo} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyGraphDefs,
@@ -88,11 +88,11 @@ ...props
 }: Props & Omit<LinkProps, 'to' | 'label'>) {
   const queryClient = useQueryClient()
 
-  const href = React.useMemo(() => {
+  const href = useMemo(() => {
     return createProfileListHref({list: view})
   }, [view])
 
-  React.useEffect(() => {
+  useEffect(() => {
     precacheList(queryClient, view)
   }, [view, queryClient])
 
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect} from 'react'
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -20,7 +20,7 @@ const animatedStyles = useAnimatedStyle(() => ({
     transform: [{rotate: rotation.get() + 'deg'}],
   }))
 
-  React.useEffect(() => {
+  useEffect(() => {
     rotation.set(() =>
       withRepeat(withTiming(360, {duration: 500, easing: Easing.linear}), -1),
     )
diff --git a/src/components/MediaInsetBorder.tsx b/src/components/MediaInsetBorder.tsx
--- a/src/components/MediaInsetBorder.tsx
+++ b/src/components/MediaInsetBorder.tsx
@@ -1,5 +1,4 @@
 import {StyleSheet} from 'react-native'
-import type React from 'react'
 
 import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'
 import {Fill} from '#/components/Fill'
diff --git a/src/components/Menu/context.tsx b/src/components/Menu/context.tsx
--- a/src/components/Menu/context.tsx
+++ b/src/components/Menu/context.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import {createContext, useContext} from 'react'
 
 import {type ContextType, type ItemContextType} from '#/components/Menu/types'
 
-export const Context = React.createContext<ContextType | null>(null)
+export const Context = createContext<ContextType | null>(null)
 Context.displayName = 'MenuContext'
 
-export const ItemContext = React.createContext<ItemContextType | null>(null)
+export const ItemContext = createContext<ItemContextType | null>(null)
 ItemContext.displayName = 'MenuItemContext'
 
 export function useMenuContext() {
-  const context = React.useContext(Context)
+  const context = useContext(Context)
 
   if (!context) {
     throw new Error('useMenuContext must be used within a Context.Provider')
@@ -19,7 +19,7 @@ return context
 }
 
 export function useMenuItemContext() {
-  const context = React.useContext(ItemContext)
+  const context = useContext(ItemContext)
 
   if (!context) {
     throw new Error('useMenuItemContext must be used within a Context.Provider')
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -4,7 +4,6 @@ type AccessibilityRole,
   type GestureResponderEvent,
   type PressableProps,
 } from 'react-native'
-import type React from 'react'
 
 import {type TextStyleProp, type ViewStyleProp} from '#/alf'
 import type * as Dialog from '#/components/Dialog'
diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx
--- a/src/components/Pills.tsx
+++ b/src/components/Pills.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {BSKY_LABELER_DID, type ModerationCause} from '@atproto/api'
 import {Trans} from '@lingui/react/macro'
@@ -32,7 +32,7 @@ style,
   size = 'sm',
 }: {children: React.ReactNode | React.ReactNode[]} & CommonProps &
   ViewStyleProp) {
-  const styles = React.useMemo(() => {
+  const styles = useMemo(() => {
     switch (size) {
       case 'lg':
         return [{gap: 5}]
@@ -67,7 +67,7 @@ const isLabeler = Boolean(desc.sourceType && desc.sourceDid)
   const isBlueskyLabel =
     desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
 
-  const {outer, avi, text} = React.useMemo(() => {
+  const {outer, avi, text} = useMemo(() => {
     switch (size) {
       case 'lg': {
         return {
@@ -154,7 +154,7 @@
 export function FollowsYou({size = 'sm'}: CommonProps) {
   const t = useTheme()
 
-  const variantStyles = React.useMemo(() => {
+  const variantStyles = useMemo(() => {
     switch (size) {
       case 'sm':
       case 'lg':
diff --git a/src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx b/src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx
--- a/src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {
   ActivityIndicator,
   type GestureResponderEvent,
@@ -31,16 +31,16 @@ const {_} = useLingui()
   const consentDialogControl = useDialogControl()
 
   // Tracking if the placer has been activated
-  const [isPlayerActive, setIsPlayerActive] = React.useState(false)
+  const [isPlayerActive, setIsPlayerActive] = useState(false)
   // Tracking whether the gif has been loaded yet
-  const [isPrefetched, setIsPrefetched] = React.useState(false)
+  const [isPrefetched, setIsPrefetched] = useState(false)
   // Tracking whether the image is animating
-  const [isAnimating, setIsAnimating] = React.useState(true)
+  const [isAnimating, setIsAnimating] = useState(true)
 
   // Used for controlling animation
-  const imageRef = React.useRef<Image>(null)
+  const imageRef = useRef<Image>(null)
 
-  const load = React.useCallback(() => {
+  const load = useCallback(() => {
     setIsPlayerActive(true)
     Image.prefetch(params.playerUri).then(() => {
       // Replace the image once it's fetched
@@ -48,7 +48,7 @@ setIsPrefetched(true)
     })
   }, [params.playerUri])
 
-  const onPlayPress = React.useCallback(
+  const onPlayPress = useCallback(
     (event: GestureResponderEvent) => {
       // Don't propagate on web
       event.preventDefault()
diff --git a/src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx b/src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx
--- a/src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   type GestureResponderEvent,
@@ -84,7 +84,7 @@ onLoad: () => void
 }) {
   // ensures we only load what's requested
   // when it's a youtube video, we need to allow both bsky.app and youtube.com
-  const onShouldStartLoadWithRequest = React.useCallback(
+  const onShouldStartLoadWithRequest = useCallback(
     (event: ShouldStartLoadRequest) =>
       event.url === params.playerUri ||
       (params.source.startsWith('youtube') &&
@@ -129,10 +129,10 @@ const windowDims = useWindowDimensions()
   const externalEmbedsPrefs = useExternalEmbedsPrefs()
   const consentDialogControl = useDialogControl()
 
-  const [isPlayerActive, setPlayerActive] = React.useState(false)
-  const [isLoading, setIsLoading] = React.useState(true)
+  const [isPlayerActive, setPlayerActive] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
 
-  const aspect = React.useMemo(() => {
+  const aspect = useMemo(() => {
     return getPlayerAspect({
       type: params.type,
       width: windowDims.width,
@@ -166,7 +166,7 @@ }
   }, false) // False here disables autostarting the callback
 
   // watch for leaving the viewport due to scrolling
-  React.useEffect(() => {
+  useEffect(() => {
     // We don't want to do anything if the player isn't active
     if (!isPlayerActive) return
 
@@ -185,11 +185,11 @@ frameCallback.setActive(false)
     }
   }, [navigation, isPlayerActive, frameCallback])
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     setIsLoading(false)
   }, [])
 
-  const onPlayPress = React.useCallback(
+  const onPlayPress = useCallback(
     (event: GestureResponderEvent) => {
       // Prevent this from propagating upward on web
       event.preventDefault()
@@ -204,7 +204,7 @@ },
     [externalEmbedsPrefs, consentDialogControl, params.source],
   )
 
-  const onAcceptConsent = React.useCallback(() => {
+  const onAcceptConsent = useCallback(() => {
     setPlayerActive(true)
   }, [])
 
diff --git a/src/components/Post/Embed/ExternalEmbed/index.tsx b/src/components/Post/Embed/ExternalEmbed/index.tsx
--- a/src/components/Post/Embed/ExternalEmbed/index.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/index.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback, useMemo} from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
 import {type AppBskyEmbedExternal} from '@atproto/api'
@@ -38,7 +38,7 @@ const playHaptic = useHaptics()
   const externalEmbedPrefs = useExternalEmbedsPrefs()
   const niceUrl = toNiceDomain(link.uri)
   const imageUri = link.thumb
-  const embedPlayerParams = React.useMemo(() => {
+  const embedPlayerParams = useMemo(() => {
     const params = parseEmbedPlayerFromUrl(link.uri)
 
     if (params && externalEmbedPrefs?.[params.source] !== 'hide') {
diff --git a/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx b/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
--- a/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
+++ b/src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
@@ -1,5 +1,7 @@
-import React, {
+import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useId,
   useMemo,
@@ -10,7 +12,7 @@ import {useWindowDimensions} from 'react-native'
 
 import {IS_NATIVE, IS_WEB} from '#/env'
 
-const Context = React.createContext<{
+const Context = createContext<{
   activeViewId: string | null
   setActiveView: (viewId: string) => void
   sendViewPosition: (viewId: string, y: number) => void
@@ -94,7 +96,7 @@ return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
 export function useActiveVideoWeb() {
-  const context = React.useContext(Context)
+  const context = useContext(Context)
   if (!context) {
     throw new Error(
       'useActiveVideoWeb must be used within a ActiveVideoWebProvider',
diff --git a/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
--- a/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
+++ b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
@@ -1,7 +1,6 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
-const Context = React.createContext<{
-  // native
+const Context = createContext<{
   muted: boolean
   setMuted: React.Dispatch<React.SetStateAction<boolean>>
   // web
@@ -11,10 +10,10 @@ } | null>(null)
 Context.displayName = 'VideoVolumeContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [muted, setMuted] = React.useState(true)
-  const [volume, setVolume] = React.useState(1)
+  const [muted, setMuted] = useState(true)
+  const [volume, setVolume] = useState(1)
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       muted,
       setMuted,
@@ -28,7 +27,7 @@ return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
 export function useVideoVolumeState() {
-  const context = React.useContext(Context)
+  const context = useContext(Context)
   if (!context) {
     throw new Error(
       'useVideoVolumeState must be used within a VideoVolumeProvider',
@@ -38,7 +37,7 @@ return [context.volume, context.setVolume] as const
 }
 
 export function useVideoMuteState() {
-  const context = React.useContext(Context)
+  const context = useContext(Context)
   if (!context) {
     throw new Error(
       'useVideoMuteState must be used within a VideoVolumeProvider',
diff --git a/src/components/PostControls/BookmarkButton.tsx b/src/components/PostControls/BookmarkButton.tsx
--- a/src/components/PostControls/BookmarkButton.tsx
+++ b/src/components/PostControls/BookmarkButton.tsx
@@ -4,7 +4,6 @@ import {type AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
-import type React from 'react'
 
 import {useCleanError} from '#/lib/hooks/useCleanError'
 import {type Shadow} from '#/state/cache/post-shadow'
diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {memo, useCallback, useEffect, useMemo, useReducer, useRef} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -61,7 +61,7 @@ ]
 
 export function ProfileHoverCard(props: ProfileHoverCardProps) {
   const prefetchProfileQuery = usePrefetchProfileQuery()
-  const prefetchedProfile = React.useRef(false)
+  const prefetchedProfile = useRef(false)
   const onPointerMove = () => {
     if (!prefetchedProfile.current) {
       prefetchedProfile.current = true
@@ -116,7 +116,7 @@ const {refs, floatingStyles} = useFloating({
     middleware: floatingMiddlewares,
   })
 
-  const [currentState, dispatch] = React.useReducer(
+  const [currentState, dispatch] = useReducer(
     // Tip: console.log(state, action) when debugging.
     (state: State, action: Action): State => {
       // Pressing within a card should always hide it.
@@ -262,7 +262,7 @@ },
     {stage: 'hidden'},
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (currentState.effect) {
       const effect = currentState.effect
       return effect()
@@ -270,16 +270,16 @@ }
   }, [currentState])
 
   const prefetchProfileQuery = usePrefetchProfileQuery()
-  const prefetchedProfile = React.useRef(false)
-  const prefetchIfNeeded = React.useCallback(async () => {
+  const prefetchedProfile = useRef(false)
+  const prefetchIfNeeded = useCallback(async () => {
     if (!prefetchedProfile.current) {
       prefetchedProfile.current = true
       prefetchProfileQuery(props.did)
     }
   }, [prefetchProfileQuery, props.did])
 
-  const didFireHover = React.useRef(false)
-  const onPointerMoveTarget = React.useCallback(() => {
+  const didFireHover = useRef(false)
+  const onPointerMoveTarget = useCallback(() => {
     prefetchIfNeeded()
     // Conceptually we want something like onPointerEnter,
     // but we want to ignore entering only due to scrolling.
@@ -290,20 +290,20 @@ dispatch('hovered-target')
     }
   }, [prefetchIfNeeded])
 
-  const onPointerLeaveTarget = React.useCallback(() => {
+  const onPointerLeaveTarget = useCallback(() => {
     didFireHover.current = false
     dispatch('unhovered-target')
   }, [])
 
-  const onPointerEnterCard = React.useCallback(() => {
+  const onPointerEnterCard = useCallback(() => {
     dispatch('hovered-card')
   }, [])
 
-  const onPointerLeaveCard = React.useCallback(() => {
+  const onPointerLeaveCard = useCallback(() => {
     dispatch('unhovered-card')
   }, [])
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     dispatch('pressed')
   }, [])
 
@@ -411,7 +411,7 @@ )}
     </View>
   )
 }
-Card = React.memo(Card)
+Card = memo(Card)
 
 function Inner({
   profile,
@@ -425,7 +425,7 @@ }) {
   const t = useTheme()
   const {_, i18n} = useLingui()
   const {currentAccount} = useSession()
-  const moderation = React.useMemo(
+  const moderation = useMemo(
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
   )
@@ -453,7 +453,7 @@ const profileURL = makeProfileLink({
     did: profile.did,
     handle: profile.handle,
   })
-  const isMe = React.useMemo(
+  const isMe = useMemo(
     () => currentAccount?.did === profile.did,
     [currentAccount, profile],
   )
diff --git a/src/components/ProgressGuide/Toast.tsx b/src/components/ProgressGuide/Toast.tsx
--- a/src/components/ProgressGuide/Toast.tsx
+++ b/src/components/ProgressGuide/Toast.tsx
@@ -1,4 +1,11 @@
-import React, {useImperativeHandle} from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {Pressable, useWindowDimensions, View} from 'react-native'
 import Animated, {
   Easing,
@@ -28,25 +35,25 @@ subtitle?: string
   visibleDuration?: number // default 5s
 }
 
-export const ProgressGuideToast = React.forwardRef<
+export const ProgressGuideToast = forwardRef<
   ProgressGuideToastRef,
   ProgressGuideToastProps
 >(function ProgressGuideToast({title, subtitle, visibleDuration}, ref) {
   const t = useTheme()
   const {_} = useLingui()
   const insets = useSafeAreaInsets()
-  const [isOpen, setIsOpen] = React.useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const translateY = useSharedValue(0)
   const opacity = useSharedValue(0)
-  const animatedCheckRef = React.useRef<AnimatedCheckRef | null>(null)
-  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
+  const animatedCheckRef = useRef<AnimatedCheckRef | null>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const winDim = useWindowDimensions()
 
   /**
    * Methods
    */
 
-  const close = React.useCallback(() => {
+  const close = useCallback(() => {
     // clear the timeout, in case this was called imperatively
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
@@ -67,7 +74,7 @@ ),
     )
   }, [setIsOpen, opacity])
 
-  const open = React.useCallback(() => {
+  const open = useCallback(() => {
     // set isOpen=true to render
     setIsOpen(true)
 
@@ -105,7 +112,7 @@ }),
     [open, close],
   )
 
-  const containerStyle = React.useMemo(() => {
+  const containerStyle = useMemo(() => {
     let left = 10
     let right = 10
     if (IS_WEB && winDim.width > 400) {
diff --git a/src/components/RichTextTag.tsx b/src/components/RichTextTag.tsx
--- a/src/components/RichTextTag.tsx
+++ b/src/components/RichTextTag.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {type StyleProp, Text as RNText, type TextStyle} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -68,7 +68,7 @@
   /*
    * Mute word records that exactly match the tag in question.
    */
-  const removeableMuteWords = React.useMemo(() => {
+  const removeableMuteWords = useMemo(() => {
     return (
       preferences?.moderationPrefs.mutedWords?.filter(word => {
         return word.value === tag
diff --git a/src/components/ScreenTransition.tsx b/src/components/ScreenTransition.tsx
--- a/src/components/ScreenTransition.tsx
+++ b/src/components/ScreenTransition.tsx
@@ -6,7 +6,6 @@ FadeOut,
   SlideInLeft,
   SlideInRight,
 } from 'react-native-reanimated'
-import type React from 'react'
 
 import {IS_WEB} from '#/env'
 
diff --git a/src/components/StarterPack/Main/FeedsList.tsx b/src/components/StarterPack/Main/FeedsList.tsx
--- a/src/components/StarterPack/Main/FeedsList.tsx
+++ b/src/components/StarterPack/Main/FeedsList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {forwardRef, useCallback, useImperativeHandle, useState} from 'react'
 import {type ListRenderItemInfo, View} from 'react-native'
 import {type AppBskyFeedDefs} from '@atproto/api'
 
@@ -19,9 +19,9 @@ headerHeight: number
   scrollElRef: ListRef
 }
 
-export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
+export const FeedsList = forwardRef<SectionRef, ProfilesListProps>(
   function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
-    const [initialHeaderHeight] = React.useState(headerHeight)
+    const [initialHeaderHeight] = useState(headerHeight)
     const bottomBarOffset = useBottomBarOffset(20)
     const t = useTheme()
 
@@ -32,7 +32,7 @@ offset: -headerHeight,
       })
     }, [scrollElRef, headerHeight])
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       scrollToTop: onScrollToTop,
     }))
 
diff --git a/src/components/StarterPack/Main/PostsList.tsx b/src/components/StarterPack/Main/PostsList.tsx
--- a/src/components/StarterPack/Main/PostsList.tsx
+++ b/src/components/StarterPack/Main/PostsList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {forwardRef, useCallback, useImperativeHandle} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -17,7 +17,7 @@ headerHeight: number
   scrollElRef: ListRef
 }
 
-export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
+export const PostsList = forwardRef<SectionRef, ProfilesListProps>(
   function PostsListImpl({listUri, headerHeight, scrollElRef}, ref) {
     const feed: FeedDescriptor = `list|${listUri}`
     const {_} = useLingui()
@@ -29,7 +29,7 @@ offset: -headerHeight,
       })
     }, [scrollElRef, headerHeight])
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       scrollToTop: onScrollToTop,
     }))
 
diff --git a/src/components/StarterPack/Main/ProfilesList.tsx b/src/components/StarterPack/Main/ProfilesList.tsx
--- a/src/components/StarterPack/Main/ProfilesList.tsx
+++ b/src/components/StarterPack/Main/ProfilesList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {forwardRef, useCallback, useImperativeHandle, useState} from 'react'
 import {type ListRenderItemInfo, View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -37,7 +37,7 @@ headerHeight: number
   scrollElRef: ListRef
 }
 
-export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
+export const ProfilesList = forwardRef<SectionRef, ProfilesListProps>(
   function ProfilesListImpl(
     {listUri, moderationOpts, headerHeight, scrollElRef},
     ref,
@@ -48,7 +48,7 @@ const initialNumToRender = useInitialNumToRender()
     const {currentAccount} = useSession()
     const {data, refetch, isError} = useAllListMembersQuery(listUri)
 
-    const [isPTRing, setIsPTRing] = React.useState(false)
+    const [isPTRing, setIsPTRing] = useState(false)
 
     // The server returns these sorted by descending creation date, so we want to invert
 
@@ -80,7 +80,7 @@ offset: -headerHeight,
       })
     }, [scrollElRef, headerHeight])
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       scrollToTop: onScrollToTop,
     }))
 
diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx
--- a/src/components/StarterPack/StarterPackCard.tsx
+++ b/src/components/StarterPack/StarterPackCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyGraphStarterpack, AtUri} from '@atproto/api'
@@ -115,7 +115,7 @@ view: bsky.starterPack.AnyStarterPackView
 }) {
   const {_} = useLingui()
   const qc = useQueryClient()
-  const {rkey, handleOrDid} = React.useMemo(() => {
+  const {rkey, handleOrDid} = useMemo(() => {
     const rkey = new AtUri(view.uri).rkey
     const {creator} = view
     return {rkey, handleOrDid: creator.handle || creator.did}
@@ -148,7 +148,7 @@ }) {
   const {_} = useLingui()
   const queryClient = useQueryClient()
   const {record} = starterPack
-  const {rkey, handleOrDid} = React.useMemo(() => {
+  const {rkey, handleOrDid} = useMemo(() => {
     const rkey = new AtUri(starterPack.uri).rkey
     const {creator} = starterPack
     return {rkey, handleOrDid: creator.handle || creator.did}
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {isValidElement} from 'react'
 import {View} from 'react-native'
 import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner-native'
@@ -61,7 +61,7 @@ id,
         duration: options?.duration ?? DURATION,
       },
     )
-  } else if (React.isValidElement(content)) {
+  } else if (isValidElement(content)) {
     sonner.custom(
       <ToastConfigProvider id={id} type={type}>
         {content}
diff --git a/src/components/Toast/index.web.tsx b/src/components/Toast/index.web.tsx
--- a/src/components/Toast/index.web.tsx
+++ b/src/components/Toast/index.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {isValidElement} from 'react'
 import {nanoid} from 'nanoid/non-secure'
 import {toast as sonner, Toaster} from 'sonner'
 
@@ -60,7 +60,7 @@ id,
         duration: options?.duration ?? DURATION,
       },
     )
-  } else if (React.isValidElement(content)) {
+  } else if (isValidElement(content)) {
     sonner(
       <ToastConfigProvider id={id} type={type}>
         {content}
diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx
--- a/src/components/TrendingTopics.tsx
+++ b/src/components/TrendingTopics.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {type AtUri} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -170,7 +170,7 @@ }
 
 export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
   const {_} = useLingui()
-  return React.useMemo(() => {
+  return useMemo(() => {
     const {topic: displayName, link} = raw
 
     if (link.startsWith('/search')) {
diff --git a/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
--- a/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
+++ b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {ToolsOzoneReportDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -44,7 +44,7 @@ const {currentAccount} = useSession()
   const {gtPhone} = useBreakpoints()
   const agent = useAgent()
 
-  const [details, setDetails] = React.useState('')
+  const [details, setDetails] = useState('')
   const isInvalid = details.length > 1000
 
   const {mutate, isPending} = useMutation({
diff --git a/src/components/anim/AnimatedCheck.tsx b/src/components/anim/AnimatedCheck.tsx
--- a/src/components/anim/AnimatedCheck.tsx
+++ b/src/components/anim/AnimatedCheck.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle} from 'react'
 import Animated, {
   Easing,
   useAnimatedProps,
@@ -23,74 +23,73 @@ export interface AnimatedCheckProps extends Props {
   playOnMount?: boolean
 }
 
-export const AnimatedCheck = React.forwardRef<
-  AnimatedCheckRef,
-  AnimatedCheckProps
->(function AnimatedCheck({playOnMount, ...props}, ref) {
-  const {fill, size, style, ...rest} = useCommonSVGProps(props)
-  const circleAnim = useSharedValue(0)
-  const checkAnim = useSharedValue(0)
+export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
+  function AnimatedCheck({playOnMount, ...props}, ref) {
+    const {fill, size, style, ...rest} = useCommonSVGProps(props)
+    const circleAnim = useSharedValue(0)
+    const checkAnim = useSharedValue(0)
 
-  const circleAnimatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: 166 - circleAnim.get() * 166,
-  }))
-  const checkAnimatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: 48 - 48 * checkAnim.get(),
-  }))
+    const circleAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: 166 - circleAnim.get() * 166,
+    }))
+    const checkAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: 48 - 48 * checkAnim.get(),
+    }))
 
-  const play = React.useCallback(
-    (cb?: () => void) => {
-      circleAnim.set(0)
-      checkAnim.set(0)
+    const play = useCallback(
+      (cb?: () => void) => {
+        circleAnim.set(0)
+        checkAnim.set(0)
 
-      circleAnim.set(() =>
-        withTiming(1, {duration: 500, easing: Easing.linear}),
-      )
-      checkAnim.set(() =>
-        withDelay(
-          500,
-          withTiming(1, {duration: 300, easing: Easing.linear}, cb),
-        ),
-      )
-    },
-    [circleAnim, checkAnim],
-  )
+        circleAnim.set(() =>
+          withTiming(1, {duration: 500, easing: Easing.linear}),
+        )
+        checkAnim.set(() =>
+          withDelay(
+            500,
+            withTiming(1, {duration: 300, easing: Easing.linear}, cb),
+          ),
+        )
+      },
+      [circleAnim, checkAnim],
+    )
 
-  React.useImperativeHandle(ref, () => ({
-    play,
-  }))
+    useImperativeHandle(ref, () => ({
+      play,
+    }))
 
-  React.useEffect(() => {
-    if (playOnMount) {
-      play()
-    }
-  }, [play, playOnMount])
+    useEffect(() => {
+      if (playOnMount) {
+        play()
+      }
+    }, [play, playOnMount])
 
-  return (
-    <Svg
-      fill="none"
-      {...rest}
-      viewBox="0 0 52 52"
-      width={size}
-      height={size}
-      style={style}>
-      <AnimatedCircle
-        animatedProps={circleAnimatedProps}
-        cx="26"
-        cy="26"
-        r="24"
+    return (
+      <Svg
         fill="none"
-        stroke={fill}
-        strokeWidth={4}
-        strokeDasharray={166}
-      />
-      <AnimatedPath
-        animatedProps={checkAnimatedProps}
-        stroke={fill}
-        d={PATH}
-        strokeWidth={4}
-        strokeDasharray={48}
-      />
-    </Svg>
-  )
-})
+        {...rest}
+        viewBox="0 0 52 52"
+        width={size}
+        height={size}
+        style={style}>
+        <AnimatedCircle
+          animatedProps={circleAnimatedProps}
+          cx="26"
+          cy="26"
+          r="24"
+          fill="none"
+          stroke={fill}
+          strokeWidth={4}
+          strokeDasharray={166}
+        />
+        <AnimatedPath
+          animatedProps={checkAnimatedProps}
+          stroke={fill}
+          d={PATH}
+          strokeWidth={4}
+          strokeDasharray={48}
+        />
+      </Svg>
+    )
+  },
+)
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -125,12 +125,10 @@ preferences: UsePreferencesQueryResponse
 }) {
   const {_} = useLingui()
   const cleanError = useCleanError()
-  const [date, setDate] = React.useState(
-    preferences.birthDate || getDateAgo(18),
-  )
+  const [date, setDate] = useState(preferences.birthDate || getDateAgo(18))
   const {isPending, error, mutateAsync: setBirthDate} = useBirthdateMutation()
   const hasChanged = date !== preferences.birthDate
-  const errorMessage = React.useMemo(() => {
+  const errorMessage = useMemo(() => {
     if (error) {
       const {raw, clean} = cleanError(error)
       return clean || raw || error.toString()
@@ -141,7 +139,7 @@ const age = getAge(new Date(date))
   const isUnder13 = age < 13
   const isUnder18 = age >= 13 && age < 18
 
-  const onSave = React.useCallback(async () => {
+  const onSave = useCallback(async () => {
     try {
       // skip if date is the same
       if (hasChanged) {
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -58,13 +58,13 @@ data: preferences,
     error: preferencesError,
   } = usePreferencesQuery()
   const {isPending, mutateAsync: addMutedWord} = useUpsertMutedWordsMutation()
-  const [field, setField] = React.useState('')
-  const [targets, setTargets] = React.useState(['content'])
-  const [error, setError] = React.useState('')
-  const [durations, setDurations] = React.useState(['forever'])
-  const [excludeFollowing, setExcludeFollowing] = React.useState(false)
+  const [field, setField] = useState('')
+  const [targets, setTargets] = useState(['content'])
+  const [error, setError] = useState('')
+  const [durations, setDurations] = useState(['forever'])
+  const [excludeFollowing, setExcludeFollowing] = useState(false)
 
-  const submit = React.useCallback(async () => {
+  const submit = useCallback(async () => {
     const sanitizedValue = sanitizeMutedWordValue(field)
     const surfaces = ['tag', targets.includes('content') && 'content'].filter(
       Boolean,
@@ -431,7 +431,7 @@ const expiryDate = word.expiresAt ? new Date(word.expiresAt) : undefined
   const isExpired = expiryDate && expiryDate < new Date()
   const formatDistance = useFormatDistance()
 
-  const remove = React.useCallback(async () => {
+  const remove = useCallback(async () => {
     control.close()
     removeMutedWord(word)
   }, [removeMutedWord, word, control])
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -32,12 +32,12 @@ const {gtMobile} = useBreakpoints()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
 
-  const showSignIn = React.useCallback(() => {
+  const showSignIn = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
   }, [requestSwitchToAccount, closeAllActiveElements])
 
-  const showCreateAccount = React.useCallback(() => {
+  const showCreateAccount = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'new'})
   }, [requestSwitchToAccount, closeAllActiveElements])
diff --git a/src/components/dms/AfterReportDialog.tsx b/src/components/dms/AfterReportDialog.tsx
--- a/src/components/dms/AfterReportDialog.tsx
+++ b/src/components/dms/AfterReportDialog.tsx
@@ -5,7 +5,6 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 import {StackActions, useNavigation} from '@react-navigation/native'
-import type React from 'react'
 
 import {type NavigationProp} from '#/lib/routes/types'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
diff --git a/src/components/dms/BlockedByListDialog.tsx b/src/components/dms/BlockedByListDialog.tsx
--- a/src/components/dms/BlockedByListDialog.tsx
+++ b/src/components/dms/BlockedByListDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {Fragment} from 'react'
 import {View} from 'react-native'
 import {type ModerationCause} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -25,7 +25,6 @@
   return (
     <Prompt.Outer control={control} testID="blockedByListDialog">
       <Prompt.TitleText>{_(msg`User blocked by list`)}</Prompt.TitleText>
-
       <View style={[a.gap_sm, a.pb_lg]}>
         <Text
           selectable
@@ -39,7 +38,7 @@ <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
           {_(msg`Lists blocking this user:`)}{' '}
           {listBlocks.map((block, i) =>
             block.source.type === 'list' ? (
-              <React.Fragment key={block.source.list.uri}>
+              <Fragment key={block.source.list.uri}>
                 {i === 0 ? null : ', '}
                 <InlineLinkText
                   label={block.source.list.name}
@@ -47,16 +46,14 @@ to={listUriToHref(block.source.list.uri)}
                   style={[a.text_md, a.leading_snug]}>
                   {block.source.list.name}
                 </InlineLinkText>
-              </React.Fragment>
+              </Fragment>
             ) : null,
           )}
         </Text>
       </View>
-
       <Prompt.Actions>
         <Prompt.Action cta={_(msg`I understand`)} onPress={() => {}} />
       </Prompt.Actions>
-
       <Dialog.Close />
     </Prompt.Outer>
   )
diff --git a/src/components/dms/ChatEmptyPill.tsx b/src/components/dms/ChatEmptyPill.tsx
--- a/src/components/dms/ChatEmptyPill.tsx
+++ b/src/components/dms/ChatEmptyPill.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import Animated, {
   runOnJS,
@@ -24,11 +24,11 @@ export function ChatEmptyPill() {
   const t = useTheme()
   const {_} = useLingui()
   const playHaptic = useHaptics()
-  const [promptIndex, setPromptIndex] = React.useState(lastIndex)
+  const [promptIndex, setPromptIndex] = useState(lastIndex)
 
   const scale = useSharedValue(1)
 
-  const prompts = React.useMemo(() => {
+  const prompts = useMemo(() => {
     return [
       _(msg`Say hello!`),
       _(msg`Share your favorite feed!`),
@@ -40,17 +40,17 @@ _(msg`Clip 🐴 clop 🐴`),
     ]
   }, [_])
 
-  const onPressIn = React.useCallback(() => {
+  const onPressIn = useCallback(() => {
     if (IS_WEB) return
     scale.set(() => withTiming(1.075, {duration: 100}))
   }, [scale])
 
-  const onPressOut = React.useCallback(() => {
+  const onPressOut = useCallback(() => {
     if (IS_WEB) return
     scale.set(() => withTiming(1, {duration: 100}))
   }, [scale])
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     runOnJS(playHaptic)()
     let randomPromptIndex = Math.floor(Math.random() * prompts.length)
     while (randomPromptIndex === lastIndex) {
diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {memo, useCallback} from 'react'
 import {Keyboard, View} from 'react-native'
 import {type ChatBskyConvoDefs, type ModerationCause} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -159,7 +159,7 @@ />
     </>
   )
 }
-ConvoMenu = React.memo(ConvoMenu)
+ConvoMenu = memo(ConvoMenu)
 
 function MenuContent({
   convo: initialConvo,
@@ -211,7 +211,7 @@ })
 
   const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
 
-  const toggleBlock = React.useCallback(() => {
+  const toggleBlock = useCallback(() => {
     if (listBlocks.length) {
       blockedByListControl.open()
       return
diff --git a/src/components/dms/DateDivider.tsx b/src/components/dms/DateDivider.tsx
--- a/src/components/dms/DateDivider.tsx
+++ b/src/components/dms/DateDivider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {memo} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -78,5 +78,5 @@ </Text>
     </View>
   )
 }
-DateDivider = React.memo(DateDivider)
+DateDivider = memo(DateDivider)
 export {DateDivider}
diff --git a/src/components/dms/MessageContext.tsx b/src/components/dms/MessageContext.tsx
--- a/src/components/dms/MessageContext.tsx
+++ b/src/components/dms/MessageContext.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import {createContext, useContext} from 'react'
 
-const MessageContext = React.createContext(false)
+const MessageContext = createContext(false)
 MessageContext.displayName = 'MessageContext'
 
 export function MessageContextProvider({
@@ -14,5 +14,5 @@ )
 }
 
 export function useIsWithinMessage() {
-  return React.useContext(MessageContext)
+  return useContext(MessageContext)
 }
diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react'
+import {memo, useCallback, useMemo} from 'react'
 import {
   type GestureResponderEvent,
   type StyleProp,
@@ -233,7 +233,7 @@ </View>
     </>
   )
 }
-MessageItem = React.memo(MessageItem)
+MessageItem = memo(MessageItem)
 export {MessageItem}
 
 let MessageItemMetadata = ({
@@ -328,5 +328,5 @@ )}
     </Text>
   )
 }
-MessageItemMetadata = React.memo(MessageItemMetadata)
+MessageItemMetadata = memo(MessageItemMetadata)
 export {MessageItemMetadata}
diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx
--- a/src/components/dms/MessageItemEmbed.tsx
+++ b/src/components/dms/MessageItemEmbed.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
+import {memo} from 'react'
 import {useWindowDimensions, View} from 'react-native'
 import {type $Typed, type AppBskyEmbedRecord} from '@atproto/api'
 
 import {atoms as a, native, tokens, useTheme, web} from '#/alf'
-import {PostEmbedViewContext} from '#/components/Post/Embed'
-import {Embed} from '#/components/Post/Embed'
+import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
 import {MessageContextProvider} from './MessageContext'
 
 let MessageItemEmbed = ({
@@ -43,5 +42,5 @@ </View>
     </MessageContextProvider>
   )
 }
-MessageItemEmbed = React.memo(MessageItemEmbed)
+MessageItemEmbed = memo(MessageItemEmbed)
 export {MessageItemEmbed}
diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
--- a/src/components/dms/MessageProfileButton.tsx
+++ b/src/components/dms/MessageProfileButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -39,7 +39,7 @@ Toast.show(_(msg`Failed to create conversation`))
     },
   })
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     if (!convoAvailability?.canChat) {
       return
     }
diff --git a/src/components/dms/MessagesListBlockedFooter.tsx b/src/components/dms/MessagesListBlockedFooter.tsx
--- a/src/components/dms/MessagesListBlockedFooter.tsx
+++ b/src/components/dms/MessagesListBlockedFooter.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo} from 'react'
 import {View} from 'react-native'
 import {type ModerationDecision} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -38,7 +38,7 @@ const leaveConvoControl = useDialogControl()
   const reportControl = useDialogControl()
   const blockedByListControl = useDialogControl()
 
-  const {listBlocks, userBlock} = React.useMemo(() => {
+  const {listBlocks, userBlock} = useMemo(() => {
     const modui = moderation.ui('profileView')
     const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
     const listBlocks = blocks.filter(alert => alert.source.type === 'list')
@@ -51,7 +51,7 @@ }, [moderation])
 
   const isBlocking = !!userBlock || !!listBlocks.length
 
-  const onUnblockPress = React.useCallback(() => {
+  const onUnblockPress = useCallback(() => {
     if (listBlocks.length) {
       blockedByListControl.open()
     } else {
diff --git a/src/components/dms/NewMessagesPill.tsx b/src/components/dms/NewMessagesPill.tsx
--- a/src/components/dms/NewMessagesPill.tsx
+++ b/src/components/dms/NewMessagesPill.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Pressable, View} from 'react-native'
 import Animated, {
   runOnJS,
@@ -33,17 +33,17 @@ const bottomOffset = IS_WEB ? 0 : bottomInset + bottomBarHeight
 
   const scale = useSharedValue(1)
 
-  const onPressIn = React.useCallback(() => {
+  const onPressIn = useCallback(() => {
     if (IS_WEB) return
     scale.set(() => withTiming(1.075, {duration: 100}))
   }, [scale])
 
-  const onPressOut = React.useCallback(() => {
+  const onPressOut = useCallback(() => {
     if (IS_WEB) return
     scale.set(() => withTiming(1, {duration: 100}))
   }, [scale])
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     runOnJS(playHaptic)()
     onPressInner?.()
   }, [onPressInner, playHaptic])
diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx
--- a/src/components/forms/DateField/index.web.tsx
+++ b/src/components/forms/DateField/index.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {forwardRef, useCallback} from 'react'
 import {StyleSheet, type TextInput, type TextInputProps} from 'react-native'
 // @ts-expect-error untyped
 import {unstable_createElement} from 'react-native-web'
@@ -11,7 +11,7 @@
 export * as utils from '#/components/forms/DateField/utils'
 export const LabelText = TextField.LabelText
 
-const InputBase = React.forwardRef<HTMLInputElement, TextInputProps>(
+const InputBase = forwardRef<HTMLInputElement, TextInputProps>(
   ({style, ...props}, ref) => {
     return unstable_createElement('input', {
       ...props,
@@ -42,7 +42,7 @@ testID,
   accessibilityHint,
   maximumDate,
 }: DateFieldProps) {
-  const handleOnChange = React.useCallback(
+  const handleOnChange = useCallback(
     (e: any) => {
       const date = e.target.valueAsDate || e.target.value
 
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Keyboard, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -28,7 +28,7 @@ const serverInputControl = useDialogControl()
   const t = useTheme()
   const {_} = useLingui()
 
-  const onPressSelectService = React.useCallback(() => {
+  const onPressSelectService = useCallback(() => {
     Keyboard.dismiss()
     serverInputControl.open()
     onOpenDialog?.()
diff --git a/src/components/forms/InputGroup.tsx b/src/components/forms/InputGroup.tsx
--- a/src/components/forms/InputGroup.tsx
+++ b/src/components/forms/InputGroup.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {Children, cloneElement, Fragment, isValidElement} from 'react'
 import {View} from 'react-native'
 
 import {atoms, useTheme} from '#/alf'
@@ -8,19 +8,19 @@ * NOT FINISHED, just here as a reference
  */
 export function InputGroup(props: React.PropsWithChildren<{}>) {
   const t = useTheme()
-  const children = React.Children.toArray(props.children)
+  const children = Children.toArray(props.children)
   const total = children.length
   return (
     <View style={[atoms.w_full]}>
       {children.map((child, i) => {
-        return React.isValidElement(child) ? (
-          <React.Fragment key={i}>
+        return isValidElement(child) ? (
+          <Fragment key={i}>
             {i > 0 ? (
               <View
                 style={[atoms.border_b, {borderColor: t.palette.contrast_500}]}
               />
             ) : null}
-            {React.cloneElement(child, {
+            {cloneElement(child, {
               // @ts-ignore
               style: [
                 // @ts-ignore
@@ -38,7 +38,7 @@ borderBottomWidth: i < total - 1 ? 0 : undefined,
                 },
               ],
             })}
-          </React.Fragment>
+          </Fragment>
         ) : null
       })}
     </View>
diff --git a/src/components/hooks/useDelayedLoading.ts b/src/components/hooks/useDelayedLoading.ts
--- a/src/components/hooks/useDelayedLoading.ts
+++ b/src/components/hooks/useDelayedLoading.ts
@@ -1,9 +1,9 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 
 export function useDelayedLoading(delay: number, initialState: boolean = true) {
-  const [isLoading, setIsLoading] = React.useState(initialState)
+  const [isLoading, setIsLoading] = useState(initialState)
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timeout: NodeJS.Timeout
     // on initial load, show a loading spinner for a hot sec to prevent flash
     if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay)
diff --git a/src/components/hooks/useFollowMethods.ts b/src/components/hooks/useFollowMethods.ts
--- a/src/components/hooks/useFollowMethods.ts
+++ b/src/components/hooks/useFollowMethods.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -25,7 +25,7 @@ profile,
     logContext,
   )
 
-  const follow = React.useCallback(() => {
+  const follow = useCallback(() => {
     requireAuth(async () => {
       try {
         await queueFollow()
@@ -38,7 +38,7 @@ }
     })
   }, [_, queueFollow, requireAuth])
 
-  const unfollow = React.useCallback(() => {
+  const unfollow = useCallback(() => {
     requireAuth(async () => {
       try {
         await queueUnfollow()
diff --git a/src/components/hooks/useInteractionState.ts b/src/components/hooks/useInteractionState.ts
--- a/src/components/hooks/useInteractionState.ts
+++ b/src/components/hooks/useInteractionState.ts
@@ -1,16 +1,16 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 
 export function useInteractionState() {
-  const [state, setState] = React.useState(false)
+  const [state, setState] = useState(false)
 
-  const onIn = React.useCallback(() => {
+  const onIn = useCallback(() => {
     setState(true)
   }, [])
-  const onOut = React.useCallback(() => {
+  const onOut = useCallback(() => {
     setState(false)
   }, [])
 
-  return React.useMemo(
+  return useMemo(
     () => ({
       state,
       onIn,
diff --git a/src/components/hooks/useRichText.ts b/src/components/hooks/useRichText.ts
--- a/src/components/hooks/useRichText.ts
+++ b/src/components/hooks/useRichText.ts
@@ -1,12 +1,12 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 import {RichText as RichTextAPI} from '@atproto/api'
 
 import {useAgent} from '#/state/session'
 
 export function useRichText(text: string): [RichTextAPI, boolean] {
-  const [prevText, setPrevText] = React.useState(text)
-  const [rawRT, setRawRT] = React.useState(() => new RichTextAPI({text}))
-  const [resolvedRT, setResolvedRT] = React.useState<RichTextAPI | null>(null)
+  const [prevText, setPrevText] = useState(text)
+  const [rawRT, setRawRT] = useState(() => new RichTextAPI({text}))
+  const [resolvedRT, setResolvedRT] = useState<RichTextAPI | null>(null)
   const agent = useAgent()
   if (text !== prevText) {
     setPrevText(text)
@@ -14,7 +14,7 @@ setRawRT(new RichTextAPI({text}))
     setResolvedRT(null)
     // This will queue an immediate re-render
   }
-  React.useEffect(() => {
+  useEffect(() => {
     let ignore = false
     async function resolveRTFacets() {
       // new each time
diff --git a/src/components/hooks/useStarterPackEntry.native.ts b/src/components/hooks/useStarterPackEntry.native.ts
--- a/src/components/hooks/useStarterPackEntry.native.ts
+++ b/src/components/hooks/useStarterPackEntry.native.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 
 import {
   createStarterPackLinkFromAndroidReferrer,
@@ -10,11 +10,11 @@ import {IS_ANDROID} from '#/env'
 import {Referrer, SharedPrefs} from '../../../modules/expo-bluesky-swiss-army'
 
 export function useStarterPackEntry() {
-  const [ready, setReady] = React.useState(false)
+  const [ready, setReady] = useState(false)
   const setActiveStarterPack = useSetActiveStarterPack()
   const hasCheckedForStarterPack = useHasCheckedForStarterPack()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (ready) return
 
     // On Android, we cannot clear the referral link. It gets stored for 90 days and all we can do is query for it. So,
diff --git a/src/components/hooks/useStarterPackEntry.ts b/src/components/hooks/useStarterPackEntry.ts
--- a/src/components/hooks/useStarterPackEntry.ts
+++ b/src/components/hooks/useStarterPackEntry.ts
@@ -1,14 +1,14 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 
 import {httpStarterPackUriToAtUri} from '#/lib/strings/starter-pack'
 import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
 
 export function useStarterPackEntry() {
-  const [ready, setReady] = React.useState(false)
+  const [ready, setReady] = useState(false)
 
   const setActiveStarterPack = useSetActiveStarterPack()
 
-  React.useEffect(() => {
+  useEffect(() => {
     const href = window.location.href
     const atUri = httpStarterPackUriToAtUri(href)
 
diff --git a/src/components/icons/TEMPLATE.tsx b/src/components/icons/TEMPLATE.tsx
--- a/src/components/icons/TEMPLATE.tsx
+++ b/src/components/icons/TEMPLATE.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import {forwardRef} from 'react'
 import Svg, {Path} from 'react-native-svg'
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
-export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
+export const IconTemplate_Stroke2_Corner0_Rounded = forwardRef(
   function LogoImpl(props: Props, ref) {
     const {fill, size, style, ...rest} = useCommonSVGProps(props)
 
@@ -41,7 +41,7 @@ strokeWidth?: number
   strokeLinecap?: 'butt' | 'round' | 'square'
   strokeLinejoin?: 'miter' | 'round' | 'bevel'
 }) {
-  return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+  return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     const hasStroke = strokeWidth > 0
@@ -72,7 +72,7 @@ })
 }
 
 export function createSinglePathSVG2({path}: {path: string}) {
-  return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+  return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
@@ -92,7 +92,7 @@ })
 }
 
 export function createMultiPathSVG({paths}: {paths: string[]}) {
-  return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+  return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
diff --git a/src/components/icons/VerifiedCheck.tsx b/src/components/icons/VerifiedCheck.tsx
--- a/src/components/icons/VerifiedCheck.tsx
+++ b/src/components/icons/VerifiedCheck.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import {forwardRef} from 'react'
 import Svg, {Circle, Path} from 'react-native-svg'
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
-export const VerifiedCheck = React.forwardRef<Svg, Props>(
+export const VerifiedCheck = forwardRef<Svg, Props>(
   function LogoImpl(props, ref) {
     const {fill, size, style, ...rest} = useCommonSVGProps(props)
 
diff --git a/src/components/icons/VerifierCheck.tsx b/src/components/icons/VerifierCheck.tsx
--- a/src/components/icons/VerifierCheck.tsx
+++ b/src/components/icons/VerifierCheck.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import {forwardRef} from 'react'
 import Svg, {Path} from 'react-native-svg'
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
-export const VerifierCheck = React.forwardRef<Svg, Props>(
+export const VerifierCheck = forwardRef<Svg, Props>(
   function LogoImpl(props, ref) {
     const {fill, size, style, ...rest} = useCommonSVGProps(props)
 
diff --git a/src/components/intents/IntentDialogs.tsx b/src/components/intents/IntentDialogs.tsx
--- a/src/components/intents/IntentDialogs.tsx
+++ b/src/components/intents/IntentDialogs.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
@@ -10,17 +10,17 @@ verifyEmailState: {code: string} | undefined
   setVerifyEmailState: (state: {code: string} | undefined) => void
 }
 
-const Context = React.createContext({} as Context)
+const Context = createContext({} as Context)
 Context.displayName = 'IntentDialogsContext'
-export const useIntentDialogs = () => React.useContext(Context)
+export const useIntentDialogs = () => useContext(Context)
 
 export function Provider({children}: {children: React.ReactNode}) {
   const verifyEmailDialogControl = Dialog.useDialogControl()
-  const [verifyEmailState, setVerifyEmailState] = React.useState<
+  const [verifyEmailState, setVerifyEmailState] = useState<
     {code: string} | undefined
   >()
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       verifyEmailDialogControl,
       verifyEmailState,
diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
--- a/src/components/interstitials/Trending.tsx
+++ b/src/components/interstitials/Trending.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {ScrollView, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -36,7 +36,7 @@ const {setTrendingDisabled} = useTrendingSettingsApi()
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noTopics = !isLoading && !error && !trending?.topics?.length
 
-  const onConfirmHide = React.useCallback(() => {
+  const onConfirmHide = useCallback(() => {
     ax.metric('trendingTopics:hide', {context: 'interstitial'})
     setTrendingDisabled(true)
   }, [ax, setTrendingDisabled])
diff --git a/src/components/moderation/Hider.tsx b/src/components/moderation/Hider.tsx
--- a/src/components/moderation/Hider.tsx
+++ b/src/components/moderation/Hider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 import {type ModerationUI} from '@atproto/api'
 
 import {
@@ -21,10 +21,10 @@ allowOverride: boolean
   }
 }
 
-const Context = React.createContext<Context>({} as Context)
+const Context = createContext<Context>({} as Context)
 Context.displayName = 'HiderContext'
 
-export const useHider = () => React.useContext(Context)
+export const useHider = () => useContext(Context)
 
 export function Outer({
   modui,
@@ -38,7 +38,7 @@ modui: ModerationUI | undefined
 }>) {
   const control = useModerationDetailsDialogControl()
   const blur = modui?.blurs[0]
-  const [isContentVisible, setIsContentVisible] = React.useState(
+  const [isContentVisible, setIsContentVisible] = useState(
     isContentVisibleInitialState || !blur,
   )
   const info = useModerationCauseDescription(blur)
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {type ComAtprotoLabelDefs, ToolsOzoneReportDefs} from '@atproto/api'
 import {XRPCError} from '@atproto/xrpc'
@@ -47,12 +47,12 @@
 function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const [appealingLabel, setAppealingLabel] = React.useState<
+  const [appealingLabel, setAppealingLabel] = useState<
     ComAtprotoLabelDefs.Label | undefined
   >(undefined)
   const {labels} = props
   const isAccount = props.type === 'account'
-  const containsSelfLabel = React.useMemo(
+  const containsSelfLabel = useMemo(
     () => labels.some(l => l.src === currentAccount?.did),
     [currentAccount?.did, labels],
   )
@@ -224,7 +224,7 @@ }) {
   const {_} = useLingui()
   const {labeler, strings} = useLabelInfo(label)
   const {gtMobile} = useBreakpoints()
-  const [details, setDetails] = React.useState('')
+  const [details, setDetails] = useState('')
   const {subject} = useLabelSubject({label})
   const isAccountReport = 'did' in subject
   const agent = useAgent()
@@ -273,7 +273,7 @@ Toast.show(_(msg({message: 'Appeal submitted', context: 'toast'})))
     },
   })
 
-  const onSubmit = React.useCallback(() => mutate(), [mutate])
+  const onSubmit = useCallback(() => mutate(), [mutate])
 
   return (
     <>
diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
 import {Pressable, type ScrollView, View} from 'react-native'
 import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -66,11 +73,11 @@ subject?: ReportSubject
   },
 ) {
   const ax = useAnalytics()
-  const subject = React.useMemo(
+  const subject = useMemo(
     () => (props.subject ? parseReportSubject(props.subject) : undefined),
     [props.subject],
   )
-  const onClose = React.useCallback(() => {
+  const onClose = useCallback(() => {
     ax.metric('reportDialog:close', {})
   }, [ax])
   return (
@@ -108,7 +115,7 @@ const ax = useAnalytics()
   const logger = ax.logger.useChild(ax.logger.Context.ReportDialog)
   const t = useTheme()
   const {_} = useLingui()
-  const ref = React.useRef<ScrollView>(null)
+  const ref = useRef<ScrollView>(null)
   const {
     data: allLabelers,
     isLoading: isLabelerLoading,
@@ -118,14 +125,14 @@ } = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
   const isLoading = useDelayedLoading(500, isLabelerLoading)
   const copy = useCopyForSubject(props.subject)
   const {categories, getCategory} = useReportOptions()
-  const [state, dispatch] = React.useReducer(reducer, initialState)
+  const [state, dispatch] = useReducer(reducer, initialState)
 
   /**
    * Submission handling
    */
   const {mutateAsync: submitReport} = useSubmitReportMutation()
-  const [isPending, setPending] = React.useState(false)
-  const [isSuccess, setSuccess] = React.useState(false)
+  const [isPending, setPending] = useState(false)
+  const [isSuccess, setSuccess] = useState(false)
 
   // some reasons ONLY go to Bluesky
   const isBskyOnlyReason = state?.selectedOption?.reason
@@ -139,7 +146,7 @@
   /**
    * Labelers that support this `subject` and its NSID collection
    */
-  const supportedLabelers = React.useMemo(() => {
+  const supportedLabelers = useMemo(() => {
     if (!allLabelers) return []
     return allLabelers
       .filter(l => {
@@ -169,7 +176,8 @@ const supportedReasonTypes: string[] | undefined = l.reasonTypes
         if (supportedReasonTypes === undefined) return true
         return (
           // supports new reason type
-          supportedReasonTypes.includes(state.selectedOption.reason) || // supports old reason type (backwards compat)
+          // supports old reason type (backwards compat)
+          supportedReasonTypes.includes(state.selectedOption.reason) ||
           supportedReasonTypes.includes(
             NEW_TO_OLD_REASONS_MAP[state.selectedOption.reason],
           )
@@ -194,7 +202,7 @@ */
   const isAlwaysBskyLabeler =
     hasSingleSupportedLabeler && (isBskyOnlyReason || isBskyOnlySubject)
 
-  const onSubmit = React.useCallback(async () => {
+  const onSubmit = useCallback(async () => {
     dispatch({type: 'clearError'})
 
     logger.info('submitting')
@@ -587,7 +595,7 @@ }: {
   check: () => boolean
   callback: () => void
 }) {
-  React.useEffect(() => {
+  useEffect(() => {
     if (check()) {
       callback()
     }
@@ -686,7 +694,7 @@ }) {
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['compact'])
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(option)
   }, [onSelect, option])
   return (
@@ -731,7 +739,7 @@ }) {
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['compact'])
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(option)
   }, [onSelect, option])
   return (
@@ -793,7 +801,7 @@ onSelect?: (option: AppBskyLabelerDefs.LabelerViewDetailed) => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(labeler)
   }, [onSelect, labeler])
   const title = getLabelingServiceTitle({
diff --git a/src/components/moderation/ScreenHider.tsx b/src/components/moderation/ScreenHider.tsx
--- a/src/components/moderation/ScreenHider.tsx
+++ b/src/components/moderation/ScreenHider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {
   type StyleProp,
   TouchableWithoutFeedback,
@@ -39,7 +39,7 @@ containerStyle?: StyleProp<ViewStyle>
 }>) {
   const t = useTheme()
   const {_} = useLingui()
-  const [override, setOverride] = React.useState(false)
+  const [override, setOverride] = useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
   const control = useModerationDetailsDialogControl()
diff --git a/src/lib/currency.ts b/src/lib/currency.ts
--- a/src/lib/currency.ts
+++ b/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 @@ options?: Parameters<typeof Intl.NumberFormat>[1],
 ) {
   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 = (
diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx
--- a/src/lib/custom-animations/CountWheel.tsx
+++ b/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 @@ // Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting
   // 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
     }
diff --git a/src/lib/custom-animations/CountWheel.web.tsx b/src/lib/custom-animations/CountWheel.web.tsx
--- a/src/lib/custom-animations/CountWheel.web.tsx
+++ b/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 @@ const t = useTheme()
   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
     }
diff --git a/src/lib/custom-animations/GestureActionView.tsx b/src/lib/custom-animations/GestureActionView.tsx
--- a/src/lib/custom-animations/GestureActionView.tsx
+++ b/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 @@ 'You must provide the first action before the second action',
     )
   }
 
-  const [activeAction, setActiveAction] = React.useState<
+  const [activeAction, setActiveAction] = useState<
     'leftFirst' | 'leftSecond' | 'rightFirst' | 'rightSecond' | null
   >(null)
 
@@ -231,7 +231,7 @@ transform: [{translateX: clampedTransX.get()}],
     }
   })
 
-  const leftSideInterpolation = React.useMemo(() => {
+  const leftSideInterpolation = useMemo(() => {
     return createInterpolation({
       firstColor: actions.leftFirst?.color,
       secondColor: actions.leftSecond?.color,
@@ -241,7 +241,7 @@ side: 'left',
     })
   }, [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 @@ side: 'right',
     })
   }, [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: [
diff --git a/src/lib/custom-animations/GestureActionView.web.tsx b/src/lib/custom-animations/GestureActionView.web.tsx
--- a/src/lib/custom-animations/GestureActionView.web.tsx
+++ b/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
 }
diff --git a/src/lib/custom-animations/LikeIcon.web.tsx b/src/lib/custom-animations/LikeIcon.web.tsx
--- a/src/lib/custom-animations/LikeIcon.web.tsx
+++ b/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 @@ }) {
   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
     }
diff --git a/src/lib/haptics.ts b/src/lib/haptics.ts
--- a/src/lib/haptics.ts
+++ b/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 @@
 export function useHaptics() {
   const isHapticsDisabled = useHapticsDisabled()
 
-  return React.useCallback(
+  return useCallback(
     (strength: 'Light' | 'Medium' | 'Heavy' = 'Medium') => {
       if (isHapticsDisabled || IS_WEB) {
         return
diff --git a/src/lib/hooks/useIntentHandler.ts b/src/lib/hooks/useIntentHandler.ts
--- a/src/lib/hooks/useIntentHandler.ts
+++ b/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 @@ const verifyEmailIntent = useVerifyEmailIntent()
   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 @@ const closeAllActiveElements = useCloseAllActiveElements()
   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({
diff --git a/src/lib/hooks/useOTAUpdates.ts b/src/lib/hooks/useOTAUpdates.ts
--- a/src/lib/hooks/useOTAUpdates.ts
+++ b/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 @@ }
 
 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 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 @@ }
     }, 10e3)
   }, [])
 
-  const onIsTestFlight = React.useCallback(async () => {
+  const onIsTestFlight = useCallback(async () => {
     try {
       await updateTestflight()
     } catch (err: any) {
@@ -163,7 +163,7 @@ }
     }
   }, [])
 
-  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 @@ }, [onIsTestFlight, currentChannel, setCheckTimeout, shouldReceiveUpdates])
 
   // 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
diff --git a/src/lib/moderation.ts b/src/lib/moderation.ts
--- a/src/lib/moderation.ts
+++ b/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 function useLabelSubject({label}: {label: ComAtprotoLabelDefs.Label}): {
   subject: Subject
 } {
-  return React.useMemo(() => {
+  return useMemo(() => {
     const {cid, uri} = label
     if (cid) {
       return {
diff --git a/src/lib/moderation/useModerationCauseDescription.ts b/src/lib/moderation/useModerationCauseDescription.ts
--- a/src/lib/moderation/useModerationCauseDescription.ts
+++ b/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 @@ const {_, i18n} = useLingui()
   const {labelDefs, labelers} = useLabelDefinitions()
   const globalLabelStrings = useGlobalLabelStrings()
 
-  return React.useMemo(() => {
+  return useMemo(() => {
     if (!cause) {
       return {
         icon: Warning,
diff --git a/src/locale/i18nProvider.tsx b/src/locale/i18nProvider.tsx
--- a/src/locale/i18nProvider.tsx
+++ b/src/locale/i18nProvider.tsx
@@ -2,7 +2,6 @@ import {createContext, useContext} from 'react'
 import {i18n} from '@lingui/core'
 import {I18nProvider as DefaultI18nProvider} from '@lingui/react'
 import {type Locale} from 'date-fns'
-import type React from 'react'
 
 import {useLocaleLanguage} from './i18n'
 
diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx
--- a/src/screens/Deactivated.tsx
+++ b/src/screens/Deactivated.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/core/macro'
@@ -38,11 +38,11 @@ const {setShowLoggedOut} = useLoggedOutViewControls()
   const hasOtherAccounts = accounts.length > 1
   const {logoutCurrentAccount} = useSessionApi()
   const agent = useAgent()
-  const [pending, setPending] = React.useState(false)
-  const [error, setError] = React.useState<string | undefined>()
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | undefined>()
   const queryClient = useQueryClient()
 
-  const onSelectAccount = React.useCallback(
+  const onSelectAccount = useCallback(
     (account: SessionAccount) => {
       if (account.did !== currentAccount?.did) {
         onPressSwitchAccount(account, 'SwitchAccount')
@@ -51,11 +51,11 @@ },
     [currentAccount, onPressSwitchAccount],
   )
 
-  const onPressAddAccount = React.useCallback(() => {
+  const onPressAddAccount = useCallback(() => {
     setShowLoggedOut(true)
   }, [setShowLoggedOut])
 
-  const onPressLogout = React.useCallback(() => {
+  const onPressLogout = useCallback(() => {
     if (IS_WEB) {
       // We're switching accounts, which remounts the entire app.
       // On mobile, this gets us Home, but on the web we also need reset the URL.
@@ -67,7 +67,7 @@ }
     logoutCurrentAccount('Deactivated')
   }, [logoutCurrentAccount])
 
-  const handleActivate = React.useCallback(async () => {
+  const handleActivate = useCallback(async () => {
     try {
       setPending(true)
       await agent.com.atproto.server.activateAccount()
diff --git a/src/screens/E2E/SharedPreferencesTesterScreen.tsx b/src/screens/E2E/SharedPreferencesTesterScreen.tsx
--- a/src/screens/E2E/SharedPreferencesTesterScreen.tsx
+++ b/src/screens/E2E/SharedPreferencesTesterScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 
 import {ScrollView} from '#/view/com/util/Views'
@@ -9,7 +9,7 @@ import {Text} from '#/components/Typography'
 import {SharedPrefs} from '../../../modules/expo-bluesky-swiss-army'
 
 export function SharedPreferencesTesterScreen() {
-  const [currentTestOutput, setCurrentTestOutput] = React.useState<string>('')
+  const [currentTestOutput, setCurrentTestOutput] = useState<string>('')
 
   return (
     <Layout.Screen>
diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx
--- a/src/screens/Hashtag.tsx
+++ b/src/screens/Hashtag.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {type ListRenderItemInfo, View} from 'react-native'
 import {type AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -47,29 +47,29 @@ }: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
   const {tag, author} = route.params
   const {_} = useLingui()
 
-  const decodedTag = React.useMemo(() => {
+  const decodedTag = useMemo(() => {
     return decodeURIComponent(tag)
   }, [tag])
 
   const isCashtag = decodedTag.startsWith('$')
 
-  const fullTag = React.useMemo(() => {
+  const fullTag = useMemo(() => {
     // Cashtags already include the $ prefix, hashtags need # added
     return isCashtag ? decodedTag : `#${decodedTag}`
   }, [decodedTag, isCashtag])
 
-  const headerTitle = React.useMemo(() => {
+  const headerTitle = useMemo(() => {
     // Keep cashtags uppercase, lowercase hashtags
     const displayTag = isCashtag ? fullTag.toUpperCase() : fullTag.toLowerCase()
     return enforceLen(displayTag, 24, true, 'middle')
   }, [fullTag, isCashtag])
 
-  const sanitizedAuthor = React.useMemo(() => {
+  const sanitizedAuthor = useMemo(() => {
     if (!author) return ''
     return sanitizeHandle(author)
   }, [author])
 
-  const onShare = React.useCallback(() => {
+  const onShare = useCallback(() => {
     const url = new URL('https://bsky.app')
     url.pathname = `/hashtag/${decodeURIComponent(tag)}`
     if (author) {
@@ -78,16 +78,16 @@ }
     shareUrl(url.toString())
   }, [tag, author])
 
-  const [activeTab, setActiveTab] = React.useState(0)
+  const [activeTab, setActiveTab] = useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPageSelected = React.useCallback(
+  const onPageSelected = useCallback(
     (index: number) => {
       setMinimalShellMode(false)
       setActiveTab(index)
@@ -95,7 +95,7 @@ },
     [setMinimalShellMode],
   )
 
-  const sections = React.useMemo(() => {
+  const sections = useMemo(() => {
     return [
       {
         title: _(msg`Top`),
@@ -177,14 +177,14 @@ active: boolean
 }) {
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
-  const [isPTR, setIsPTR] = React.useState(false)
+  const [isPTR, setIsPTR] = useState(false)
   const t = useTheme()
   const {hasSession} = useSession()
   const trackPostView = usePostViewTracking('Hashtag')
 
   const isCashtag = fullTag.startsWith('$')
 
-  const queryParam = React.useMemo(() => {
+  const queryParam = useMemo(() => {
     // Cashtags need # prefix for search: "#$BTC" or "#$BTC from:author"
     const searchTag = isCashtag ? `#${fullTag}` : fullTag
     if (!author) return searchTag
@@ -203,17 +203,17 @@ fetchNextPage,
     hasNextPage,
   } = useSearchPostsQuery({query: queryParam, sort, enabled: active})
 
-  const posts = React.useMemo(() => {
+  const posts = useMemo(() => {
     return data?.pages.flatMap(page => page.posts) || []
   }, [data])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTR(true)
     await refetch()
     setIsPTR(false)
   }, [refetch])
 
-  const onEndReached = React.useCallback(() => {
+  const onEndReached = useCallback(() => {
     if (isFetchingNextPage || !hasNextPage || error) return
     fetchNextPage()
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
diff --git a/src/screens/Home/NoFeedsPinned.tsx b/src/screens/Home/NoFeedsPinned.tsx
--- a/src/screens/Home/NoFeedsPinned.tsx
+++ b/src/screens/Home/NoFeedsPinned.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {TID} from '@atproto/common-web'
 import {msg} from '@lingui/core/macro'
@@ -27,7 +27,7 @@ const headerOffset = useHeaderOffset()
   const {isPending, mutateAsync: overwriteSavedFeeds} =
     useOverwriteSavedFeedsMutation()
 
-  const addRecommendedFeeds = React.useCallback(async () => {
+  const addRecommendedFeeds = useCallback(async () => {
     let skippedTimeline = false
     let skippedDiscover = false
     let remainingSavedFeeds = []
diff --git a/src/screens/List/ListHiddenScreen.tsx b/src/screens/List/ListHiddenScreen.tsx
--- a/src/screens/List/ListHiddenScreen.tsx
+++ b/src/screens/List/ListHiddenScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {AppBskyGraphDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -45,7 +45,7 @@ const queryClient = useQueryClient()
 
   const isModList = list.purpose === AppBskyGraphDefs.MODLIST
 
-  const [isProcessing, setIsProcessing] = React.useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
   const listBlockMutation = useListBlockMutation()
   const listMuteMutation = useListMuteMutation()
   const {mutateAsync: removeSavedFeed} = useRemoveFeedMutation()
diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx
--- a/src/screens/Login/ForgotPasswordForm.tsx
+++ b/src/screens/Login/ForgotPasswordForm.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useCallback, useState} from 'react'
 import {Keyboard, View} from 'react-native'
 import {type ComAtprotoServerDescribeServer} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -44,7 +44,7 @@ const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [email, setEmail] = useState<string>('')
   const {_} = useLingui()
 
-  const onPressSelectService = React.useCallback(() => {
+  const onPressSelectService = useCallback(() => {
     Keyboard.dismiss()
   }, [])
 
diff --git a/src/screens/Login/FormContainer.tsx b/src/screens/Login/FormContainer.tsx
--- a/src/screens/Login/FormContainer.tsx
+++ b/src/screens/Login/FormContainer.tsx
@@ -1,5 +1,4 @@
 import {type StyleProp, View, type ViewStyle} from 'react-native'
-import type React from 'react'
 
 import {atoms as a, useBreakpoints, useGutters} from '#/alf'
 import {Text} from '#/components/Typography'
diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx
--- a/src/screens/Messages/Conversation.tsx
+++ b/src/screens/Messages/Conversation.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -105,7 +105,7 @@ did: convoState.recipients?.[0].did,
   })
   const recipient = useMaybeProfileShadow(recipientUnshadowed)
 
-  const moderation = React.useMemo(() => {
+  const moderation = useMemo(() => {
     if (!recipient || !moderationOpts) return null
     return moderateProfile(recipient, moderationOpts)
   }, [recipient, moderationOpts])
@@ -113,7 +113,7 @@
   // Because we want to give the list a chance to asynchronously scroll to the end before it is visible to the user,
   // we use `hasScrolled` to determine when to render. With that said however, there is a chance that the chat will be
   // empty. So, we also check for that possible state as well and render once we can.
-  const [hasScrolled, setHasScrolled] = React.useState(false)
+  const [hasScrolled, setHasScrolled] = useState(false)
   const readyToShow =
     hasScrolled ||
     (isConvoActive(convoState) &&
@@ -122,7 +122,7 @@ convoState.items.length === 0)
 
   // Any time that we re-render the `Initializing` state, we have to reset `hasScrolled` to false. After entering this
   // state, we know that we're resetting the list of messages and need to re-scroll to the bottom when they get added.
-  React.useEffect(() => {
+  useEffect(() => {
     if (convoState.status === ConvoStatus.Initializing) {
       setHasScrolled(false)
     }
diff --git a/src/screens/Messages/components/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx
--- a/src/screens/Messages/components/ChatListItem.tsx
+++ b/src/screens/Messages/components/ChatListItem.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import {memo, useCallback, useMemo, useState} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import {
   AppBskyEmbedRecord,
@@ -80,7 +80,7 @@ </ChatListItemReady>
   )
 }
 
-ChatListItem = React.memo(ChatListItem)
+ChatListItem = memo(ChatListItem)
 
 function ChatListItemReady({
   convo,
@@ -104,7 +104,7 @@ const leaveConvoControl = useDialogControl()
   const {gtMobile} = useBreakpoints()
   const profile = useProfileShadow(profileUnshadowed)
   const {mutate: markAsRead} = useMarkAsReadMutation()
-  const moderation = React.useMemo(
+  const moderation = useMemo(
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
   )
diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
--- a/src/screens/Messages/components/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -43,16 +43,16 @@ const {isMobile} = useWebMediaQueries()
   const {_} = useLingui()
   const t = useTheme()
   const {getDraft, clearDraft} = useMessageDraft()
-  const [message, setMessage] = React.useState(getDraft)
+  const [message, setMessage] = useState(getDraft)
 
   const inputStyles = useSharedInputStyles()
-  const isComposing = React.useRef(false)
-  const [isFocused, setIsFocused] = React.useState(false)
-  const [isHovered, setIsHovered] = React.useState(false)
-  const [textAreaHeight, setTextAreaHeight] = React.useState(38)
-  const textAreaRef = React.useRef<HTMLTextAreaElement>(null)
+  const isComposing = useRef(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [textAreaHeight, setTextAreaHeight] = useState(38)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
 
-  const onSubmit = React.useCallback(() => {
+  const onSubmit = useCallback(() => {
     if (!hasEmbed && message.trim() === '') {
       return
     }
@@ -66,7 +66,7 @@ setMessage('')
     setEmbed(undefined)
   }, [message, onSendMessage, _, clearDraft, hasEmbed, setEmbed])
 
-  const onKeyDown = React.useCallback(
+  const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       // Don't submit the form when the Japanese or any other IME is composing
       if (isComposing.current) return
@@ -98,14 +98,11 @@ },
     [onSubmit],
   )
 
-  const onChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setMessage(e.target.value)
-    },
-    [],
-  )
+  const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value)
+  }, [])
 
-  const onEmojiInserted = React.useCallback(
+  const onEmojiInserted = useCallback(
     (emoji: Emoji) => {
       if (!textAreaRef.current) {
         return
@@ -123,7 +120,7 @@ textAreaRef.current.selectionEnd = position + emoji.native.length
     },
     [setMessage],
   )
-  React.useEffect(() => {
+  useEffect(() => {
     textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted)
     return () => {
       textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted)
diff --git a/src/screens/Messages/components/MessageListError.tsx b/src/screens/Messages/components/MessageListError.tsx
--- a/src/screens/Messages/components/MessageListError.tsx
+++ b/src/screens/Messages/components/MessageListError.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -12,7 +12,7 @@
 export function MessageListError({item}: {item: ConvoItem & {type: 'error'}}) {
   const t = useTheme()
   const {_} = useLingui()
-  const {description, help, cta} = React.useMemo(() => {
+  const {description, help, cta} = useMemo(() => {
     return {
       [ConvoItemError.FirehoseFailed]: {
         description: _(msg`This chat was disconnected`),
diff --git a/src/screens/ModerationInteractionSettings/index.tsx b/src/screens/ModerationInteractionSettings/index.tsx
--- a/src/screens/ModerationInteractionSettings/index.tsx
+++ b/src/screens/ModerationInteractionSettings/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -63,9 +63,9 @@ function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) {
   const {_} = useLingui()
   const {mutateAsync: setPostInteractionSettings, isPending} =
     usePostInteractionSettingsMutation()
-  const [error, setError] = React.useState<string | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
 
-  const allowUI = React.useMemo(() => {
+  const allowUI = useMemo(() => {
     return threadgateRecordToAllowUISetting({
       $type: 'app.bsky.feed.threadgate',
       post: '',
@@ -73,7 +73,7 @@ createdAt: new Date().toString(),
       allow: preferences.postInteractionSettings.threadgateAllowRules,
     })
   }, [preferences.postInteractionSettings.threadgateAllowRules])
-  const postgate = React.useMemo(() => {
+  const postgate = useMemo(() => {
     return createPostgateRecord({
       post: '',
       embeddingRules:
@@ -81,17 +81,17 @@ preferences.postInteractionSettings.postgateEmbeddingRules,
     })
   }, [preferences.postInteractionSettings.postgateEmbeddingRules])
 
-  const [maybeEditedAllowUI, setAllowUI] = React.useState(allowUI)
-  const [maybeEditedPostgate, setEditedPostgate] = React.useState(postgate)
+  const [maybeEditedAllowUI, setAllowUI] = useState(allowUI)
+  const [maybeEditedPostgate, setEditedPostgate] = useState(postgate)
 
-  const wasEdited = React.useMemo(() => {
+  const wasEdited = useMemo(() => {
     return (
       !deepEqual(allowUI, maybeEditedAllowUI) ||
       !deepEqual(postgate.embeddingRules, maybeEditedPostgate.embeddingRules)
     )
   }, [postgate, allowUI, maybeEditedAllowUI, maybeEditedPostgate])
 
-  const onSave = React.useCallback(async () => {
+  const onSave = useCallback(async () => {
     setError('')
 
     try {
diff --git a/src/screens/Onboarding/StepInterests/InterestButton.tsx b/src/screens/Onboarding/StepInterests/InterestButton.tsx
--- a/src/screens/Onboarding/StepInterests/InterestButton.tsx
+++ b/src/screens/Onboarding/StepInterests/InterestButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {type TextStyle, View, type ViewStyle} from 'react-native'
 
 import {type Interest, useInterestsDisplayNames} from '#/lib/interests'
@@ -12,7 +12,7 @@ const t = useTheme()
   const interestsDisplayNames = useInterestsDisplayNames()
   const ctx = Toggle.useItemContext()
 
-  const styles = React.useMemo(() => {
+  const styles = useMemo(() => {
     const hovered: ViewStyle[] = [
       {
         backgroundColor:
diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx
--- a/src/screens/Onboarding/StepInterests/index.tsx
+++ b/src/screens/Onboarding/StepInterests/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -27,12 +27,12 @@ const ax = useAnalytics()
   const interestsDisplayNames = useInterestsDisplayNames()
 
   const {state, dispatch} = useOnboardingInternalState()
-  const [saving, setSaving] = React.useState(false)
-  const [selectedInterests, setSelectedInterests] = React.useState<string[]>(
+  const [saving, setSaving] = useState(false)
+  const [selectedInterests, setSelectedInterests] = useState<string[]>(
     state.interestsStepResults.selectedInterests.map(i => i),
   )
 
-  const saveInterests = React.useCallback(async () => {
+  const saveInterests = useCallback(async () => {
     setSaving(true)
 
     try {
diff --git a/src/screens/Onboarding/StepProfile/AvatarCircle.tsx b/src/screens/Onboarding/StepProfile/AvatarCircle.tsx
--- a/src/screens/Onboarding/StepProfile/AvatarCircle.tsx
+++ b/src/screens/Onboarding/StepProfile/AvatarCircle.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
 import {msg} from '@lingui/core/macro'
@@ -22,7 +22,7 @@ const {_} = useLingui()
   const t = useTheme()
   const {avatar} = useAvatar()
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () => ({
       imageContainer: [
         a.rounded_full,
diff --git a/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx b/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
--- a/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
+++ b/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 
 import {type Avatar} from '#/screens/Onboarding/StepProfile/index'
@@ -14,7 +14,7 @@ }) {
   const t = useTheme()
   const Icon = avatar.placeholder.component
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () => ({
       imageContainer: [
         a.rounded_full,
diff --git a/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx b/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx
--- a/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx
+++ b/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -39,7 +39,7 @@ const {_} = useLingui()
   const t = useTheme()
   const isEmojis = type === 'emojis'
 
-  const onSelectEmoji = React.useCallback(
+  const onSelectEmoji = useCallback(
     (emoji: EmojiName) => {
       setAvatar(prev => ({
         ...prev,
@@ -49,7 +49,7 @@ },
     [setAvatar],
   )
 
-  const onSelectColor = React.useCallback(
+  const onSelectColor = useCallback(
     (color: AvatarColor) => {
       setAvatar(prev => ({
         ...prev,
diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
--- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
+++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
@@ -1,11 +1,18 @@
-import React from 'react'
+import {
+  forwardRef,
+  lazy,
+  Suspense,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
 import {View} from 'react-native'
 import type ViewShot from 'react-native-view-shot'
 
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {atoms as a} from '#/alf'
 
-const LazyViewShot = React.lazy(
+const LazyViewShot = lazy(
   // @ts-expect-error dynamic import
   () => import('react-native-view-shot/src/index'),
 )
@@ -18,13 +25,13 @@ }
 
 // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to
 // "screenshot".
-export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
+export const PlaceholderCanvas = forwardRef<PlaceholderCanvasRef, {}>(
   function PlaceholderCanvas({}, ref) {
     const {avatar} = useAvatar()
-    const viewshotRef = React.useRef<ViewShot>(null)
+    const viewshotRef = useRef<ViewShot>(null)
     const Icon = avatar.placeholder.component
 
-    const styles = React.useMemo(
+    const styles = useMemo(
       () => ({
         container: [a.absolute, {top: -2000}],
         imageContainer: [
@@ -36,7 +43,7 @@ }),
       [],
     )
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       capture: async () => {
         if (viewshotRef.current?.capture) {
           return await viewshotRef.current.capture()
@@ -46,7 +53,7 @@ }))
 
     return (
       <View style={styles.container}>
-        <React.Suspense fallback={null}>
+        <Suspense fallback={null}>
           <LazyViewShot
             // @ts-ignore this library doesn't have types
             ref={viewshotRef}
@@ -70,7 +77,7 @@ style={{color: 'white'}}
               />
             </View>
           </LazyViewShot>
-        </React.Suspense>
+        </Suspense>
       </View>
     )
   },
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -1,4 +1,12 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
 import {ImageManipulator, SaveFormat} from 'expo-image-manipulator'
@@ -60,9 +68,9 @@ avatar: Avatar
   setAvatar: React.Dispatch<React.SetStateAction<Avatar>>
 }
 
-const AvatarContext = React.createContext<IAvatarContext>({} as IAvatarContext)
+const AvatarContext = createContext<IAvatarContext>({} as IAvatarContext)
 AvatarContext.displayName = 'AvatarContext'
-export const useAvatar = () => React.useContext(AvatarContext)
+export const useAvatar = () => useContext(AvatarContext)
 
 const randomColor =
   avatarColors[Math.floor(Math.random() * avatarColors.length)]
@@ -76,10 +84,10 @@ const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
   const requestNotificationsPermission = useRequestNotificationsPermission()
 
   const creatorControl = Dialog.useDialogControl()
-  const [error, setError] = React.useState('')
+  const [error, setError] = useState('')
 
   const {state, dispatch} = useOnboardingInternalState()
-  const [avatar, setAvatar] = React.useState<Avatar>({
+  const [avatar, setAvatar] = useState<Avatar>({
     image: state.profileStepResults?.image,
     placeholder: state.profileStepResults.creatorState?.emoji || emojiItems.at,
     backgroundColor:
@@ -87,14 +95,14 @@ state.profileStepResults.creatorState?.backgroundColor || randomColor,
     useCreatedAvatar: state.profileStepResults.isCreatedAvatar,
   })
 
-  const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
+  const canvasRef = useRef<PlaceholderCanvasRef>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     requestNotificationsPermission('StartOnboarding')
   }, [requestNotificationsPermission])
 
   const sheetWrapper = useSheetWrapper()
-  const openPicker = React.useCallback(
+  const openPicker = useCallback(
     async (opts?: ImagePickerOptions) => {
       const response = await sheetWrapper(
         launchImageLibraryAsync({
@@ -139,7 +147,7 @@ },
     [_, setError, sheetWrapper],
   )
 
-  const onContinue = React.useCallback(async () => {
+  const onContinue = useCallback(async () => {
     let imageUri = avatar?.image?.path
 
     // In the event that view-shot didn't load in time and the user pressed continue, this will just be undefined
@@ -167,7 +175,7 @@ dispatch({type: 'next'})
     ax.metric('onboarding:profile:nextPressed', {})
   }, [ax, avatar, dispatch])
 
-  const onDoneCreating = React.useCallback(() => {
+  const onDoneCreating = useCallback(() => {
     setAvatar(prev => ({
       ...prev,
       image: undefined,
@@ -176,7 +184,7 @@ }))
     creatorControl.close()
   }, [creatorControl])
 
-  const openLibrary = React.useCallback(async () => {
+  const openLibrary = useCallback(async () => {
     if (!(await requestPhotoAccessIfNeeded())) {
       return
     }
@@ -225,7 +233,7 @@ setError,
     sheetWrapper,
   ])
 
-  const onSecondaryPress = React.useCallback(() => {
+  const onSecondaryPress = useCallback(() => {
     if (avatar.useCreatedAvatar) {
       openLibrary()
     } else {
@@ -233,7 +241,7 @@ creatorControl.open()
     }
   }, [avatar.useCreatedAvatar, creatorControl, openLibrary])
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       avatar,
       setAvatar,
diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx
--- a/src/screens/Post/PostLikedBy.tsx
+++ b/src/screens/Post/PostLikedBy.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Plural, Trans} from '@lingui/react/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -25,7 +25,7 @@ likeCount = post.likeCount
   }
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx
--- a/src/screens/Post/PostQuotes.tsx
+++ b/src/screens/Post/PostQuotes.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Plural, Trans} from '@lingui/react/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -25,7 +25,7 @@ quoteCount = post.quoteCount
   }
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx
--- a/src/screens/Post/PostRepostedBy.tsx
+++ b/src/screens/Post/PostRepostedBy.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Plural, Trans} from '@lingui/react/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -25,7 +25,7 @@ quoteCount = post.repostCount
   }
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx b/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx
--- a/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx
+++ b/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -71,10 +71,10 @@ const requireAuth = useRequireAuth()
 
   const isFollowing = !!profile.viewer?.following
   const isFollowedBy = !!profile.viewer?.followedBy
-  const [wasFollowing, setWasFollowing] = React.useState<boolean>(isFollowing)
+  const [wasFollowing, setWasFollowing] = useState<boolean>(isFollowing)
 
   // This prevents the button from disappearing as soon as we follow.
-  const showFollowBtn = React.useMemo(
+  const showFollowBtn = useMemo(
     () => !isFollowing || !wasFollowing,
     [isFollowing, wasFollowing],
   )
@@ -90,7 +90,7 @@ * we could do this only on focus because the transition animation gives us time to not notice the
    * sudden rendering of the button. However, on web if we do this, there's an obvious flicker once the
    * button renders. So, we update the state in both cases.
    */
-  React.useEffect(() => {
+  useEffect(() => {
     const updateWasFollowing = () => {
       if (wasFollowing !== isFollowing) {
         setWasFollowing(isFollowing)
@@ -106,7 +106,7 @@ unsubscribeBlur()
     }
   }, [isFollowing, wasFollowing, navigation])
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     if (!isFollowing) {
       requireAuth(async () => {
         try {
diff --git a/src/screens/Profile/ErrorState.tsx b/src/screens/Profile/ErrorState.tsx
--- a/src/screens/Profile/ErrorState.tsx
+++ b/src/screens/Profile/ErrorState.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -16,7 +16,7 @@ const t = useTheme()
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
 
-  const onPressBack = React.useCallback(() => {
+  const onPressBack = useCallback(() => {
     if (navigation.canGoBack()) {
       navigation.goBack()
     } else {
diff --git a/src/screens/Profile/Header/GrowableAvatar.tsx b/src/screens/Profile/Header/GrowableAvatar.tsx
--- a/src/screens/Profile/Header/GrowableAvatar.tsx
+++ b/src/screens/Profile/Header/GrowableAvatar.tsx
@@ -5,7 +5,6 @@ interpolate,
   type SharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated'
-import type React from 'react'
 
 import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
 import {IS_IOS} from '#/env'
diff --git a/src/screens/Profile/Header/GrowableBanner.tsx b/src/screens/Profile/Header/GrowableBanner.tsx
--- a/src/screens/Profile/Header/GrowableBanner.tsx
+++ b/src/screens/Profile/Header/GrowableBanner.tsx
@@ -13,7 +13,6 @@ } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {BlurView} from 'expo-blur'
 import {useIsFetching} from '@tanstack/react-query'
-import type React from 'react'
 
 import {RQKEY_ROOT as STARTERPACK_RQKEY_ROOT} from '#/state/queries/actor-starter-packs'
 import {RQKEY_ROOT as FEED_RQKEY_ROOT} from '#/state/queries/post-feed'
diff --git a/src/screens/Profile/KnownFollowers.tsx b/src/screens/Profile/KnownFollowers.tsx
--- a/src/screens/Profile/KnownFollowers.tsx
+++ b/src/screens/Profile/KnownFollowers.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -51,7 +51,7 @@ const initialNumToRender = useInitialNumToRender()
 
   const {name} = route.params
 
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {
     data: resolvedDid,
     isLoading: isDidLoading,
@@ -67,7 +67,7 @@ error,
     refetch,
   } = useProfileKnownFollowersQuery(resolvedDid)
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -77,7 +77,7 @@ }
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || !!error) return
     try {
       await fetchNextPage()
@@ -86,7 +86,7 @@ logger.error('Failed to load more followers', {message: err})
     }
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
 
-  const followers = React.useMemo(() => {
+  const followers = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.followers)
     }
@@ -96,7 +96,7 @@
   const isError = Boolean(resolveError || error)
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Profile/ProfileFollowers.tsx b/src/screens/Profile/ProfileFollowers.tsx
--- a/src/screens/Profile/ProfileFollowers.tsx
+++ b/src/screens/Profile/ProfileFollowers.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Plural} from '@lingui/react/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -24,7 +24,7 @@ did: resolvedDid,
   })
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Profile/ProfileFollows.tsx b/src/screens/Profile/ProfileFollows.tsx
--- a/src/screens/Profile/ProfileFollows.tsx
+++ b/src/screens/Profile/ProfileFollows.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Plural} from '@lingui/react/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -24,7 +24,7 @@ did: resolvedDid,
   })
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Profile/ProfileLabelerLikedBy.tsx b/src/screens/Profile/ProfileLabelerLikedBy.tsx
--- a/src/screens/Profile/ProfileLabelerLikedBy.tsx
+++ b/src/screens/Profile/ProfileLabelerLikedBy.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
@@ -22,7 +22,7 @@ const uri = makeRecordUri(handleOrDid, 'app.bsky.labeler.service', 'self')
   const {_} = useLingui()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/screens/Profile/components/ProfileFeedHeader.tsx b/src/screens/Profile/components/ProfileFeedHeader.tsx
--- a/src/screens/Profile/components/ProfileFeedHeader.tsx
+++ b/src/screens/Profile/components/ProfileFeedHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {AtUri} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -95,7 +95,7 @@ const playHaptic = useHaptics()
 
   const {data: preferences} = usePreferencesQuery()
 
-  const [likeUri, setLikeUri] = React.useState(info.likeUri || '')
+  const [likeUri, setLikeUri] = useState(info.likeUri || '')
   const likeCount =
     (info.likeCount || 0) +
     (likeUri && !info.likeUri ? 1 : !likeUri && info.likeUri ? -1 : 0)
@@ -401,7 +401,7 @@ const {mutateAsync: unlikeFeed, isPending: isUnlikePending} =
     useUnlikeMutation()
 
   const isLiked = !!likeUri
-  const feedRkey = React.useMemo(() => new AtUri(info.uri).rkey, [info.uri])
+  const feedRkey = useMemo(() => new AtUri(info.uri).rkey, [info.uri])
 
   const onToggleLiked = async () => {
     try {
@@ -427,14 +427,14 @@ logger.error('Failed to toggle like', {message: err})
     }
   }
 
-  const onPressShare = React.useCallback(() => {
+  const onPressShare = useCallback(() => {
     playHaptic()
     const url = toShareUrl(info.route.href)
     shareUrl(url)
     ax.metric('feed:share', {feedUrl: info.uri})
   }, [info, playHaptic])
 
-  const onPressReport = React.useCallback(() => {
+  const onPressReport = useCallback(() => {
     reportDialogControl.open()
   }, [reportDialogControl])
 
diff --git a/src/screens/Search/components/StarterPackCard.tsx b/src/screens/Search/components/StarterPackCard.tsx
--- a/src/screens/Search/components/StarterPackCard.tsx
+++ b/src/screens/Search/components/StarterPackCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyGraphDefs,
@@ -143,7 +143,7 @@ const moderationOpts = useModerationOpts()
   const computedTotal = (total ?? numPending) - numPending
   const circlesCount = numPending + 1 // add total at end
   const widthPerc = 100 / circlesCount
-  const [size, setSize] = React.useState<number | null>(null)
+  const [size, setSize] = useState<number | null>(null)
 
   const isPending = (numPending && profiles.length === 0) || !moderationOpts
 
diff --git a/src/screens/Settings/components/DeactivateAccountDialog.tsx b/src/screens/Settings/components/DeactivateAccountDialog.tsx
--- a/src/screens/Settings/components/DeactivateAccountDialog.tsx
+++ b/src/screens/Settings/components/DeactivateAccountDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -36,10 +36,10 @@ const t = useTheme()
   const {_} = useLingui()
   const agent = useAgent()
   const {logoutCurrentAccount} = useSessionApi()
-  const [pending, setPending] = React.useState(false)
-  const [error, setError] = React.useState<string | undefined>()
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | undefined>()
 
-  const handleDeactivate = React.useCallback(async () => {
+  const handleDeactivate = useCallback(async () => {
     try {
       setPending(true)
       await agent.com.atproto.server.deactivateAccount({})
diff --git a/src/screens/Settings/components/Email2FAToggle.tsx b/src/screens/Settings/components/Email2FAToggle.tsx
--- a/src/screens/Settings/components/Email2FAToggle.tsx
+++ b/src/screens/Settings/components/Email2FAToggle.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -17,7 +17,7 @@ const {currentAccount} = useSession()
   const disableDialogControl = useDialogControl()
   const emailDialogControl = useEmailDialogControl()
 
-  const onToggle = React.useCallback(() => {
+  const onToggle = useCallback(() => {
     emailDialogControl.open({
       id: EmailDialogScreenID.Manage2FA,
     })
diff --git a/src/screens/Settings/components/PwiOptOut.tsx b/src/screens/Settings/components/PwiOptOut.tsx
--- a/src/screens/Settings/components/PwiOptOut.tsx
+++ b/src/screens/Settings/components/PwiOptOut.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {type $Typed, ComAtprotoLabelDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -26,7 +26,7 @@ const isOptedOut =
     profile?.labels?.some(l => l.val === '!no-unauthenticated') || false
   const canToggle = profile && !updateProfile.isPending
 
-  const onToggleOptOut = React.useCallback(() => {
+  const onToggleOptOut = useCallback(() => {
     if (!profile) {
       return
     }
diff --git a/src/screens/Signup/StepCaptcha/CaptchaWebView.web.tsx b/src/screens/Signup/StepCaptcha/CaptchaWebView.web.tsx
--- a/src/screens/Signup/StepCaptcha/CaptchaWebView.web.tsx
+++ b/src/screens/Signup/StepCaptcha/CaptchaWebView.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect} from 'react'
 import {StyleSheet} from 'react-native'
 
 // @ts-ignore web only, we will always redirect to the app on web (CORS)
@@ -15,7 +15,7 @@ stateParam: string
   onSuccess: (code: string) => void
   onError: (error: unknown) => void
 }) {
-  React.useEffect(() => {
+  useEffect(() => {
     const timeout = setTimeout(() => {
       onError({
         errorMessage: 'User did not complete the captcha within 30 seconds',
@@ -27,7 +27,7 @@ clearTimeout(timeout)
     }
   }, [onError])
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     // @ts-ignore web
     const frame: HTMLIFrameElement = document.getElementById(
       'captcha-iframe',
diff --git a/src/screens/Signup/StepCaptcha/index.tsx b/src/screens/Signup/StepCaptcha/index.tsx
--- a/src/screens/Signup/StepCaptcha/index.tsx
+++ b/src/screens/Signup/StepCaptcha/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {ActivityIndicator, Platform, View} from 'react-native'
 import ReactNativeDeviceAttest from 'react-native-device-attest'
 import {msg} from '@lingui/core/macro'
@@ -75,10 +75,10 @@ const ax = useAnalytics()
   const theme = useTheme()
   const {state, dispatch} = useSignupContext()
 
-  const [completed, setCompleted] = React.useState(false)
+  const [completed, setCompleted] = useState(false)
 
-  const stateParam = React.useMemo(() => nanoid(15), [])
-  const url = React.useMemo(() => {
+  const stateParam = useMemo(() => nanoid(15), [])
+  const url = useMemo(() => {
     const newUrl = new URL(state.serviceUrl)
     newUrl.pathname = CAPTCHA_PATH
     newUrl.searchParams.set(
@@ -107,7 +107,7 @@ token,
     payload,
   ])
 
-  const onSuccess = React.useCallback(
+  const onSuccess = useCallback(
     (code: string) => {
       setCompleted(true)
       ax.metric('signup:captchaSuccess', {})
@@ -119,7 +119,7 @@ },
     [ax, dispatch],
   )
 
-  const onError = React.useCallback(
+  const onError = useCallback(
     (error?: unknown) => {
       dispatch({
         type: 'setError',
@@ -134,7 +134,7 @@ },
     [_, ax, dispatch, state.handle],
   )
 
-  const onBackPress = React.useCallback(() => {
+  const onBackPress = useCallback(() => {
     logger.error('Signup Flow Error', {
       errorMessage:
         'User went back from captcha step. Possibly encountered an error.',
diff --git a/src/screens/Signup/StepInfo/index.tsx b/src/screens/Signup/StepInfo/index.tsx
--- a/src/screens/Signup/StepInfo/index.tsx
+++ b/src/screens/Signup/StepInfo/index.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {type TextInput, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -89,10 +89,10 @@ ? !isUnderAge(state.dateOfBirth.toISOString(), 18)
     : true
   const isDeviceGeolocationGranted = useIsDeviceGeolocationGranted()
 
-  const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
+  const [hasWarnedEmail, setHasWarnedEmail] = useState<boolean>(false)
 
-  const tldtsRef = React.useRef<typeof tldts>(undefined)
-  React.useEffect(() => {
+  const tldtsRef = useRef<typeof tldts>(undefined)
+  useEffect(() => {
     // @ts-expect-error - valid path
     import('tldts/dist/index.cjs.min.js').then(tldts => {
       tldtsRef.current = tldts
diff --git a/src/screens/Signup/state.ts b/src/screens/Signup/state.ts
--- a/src/screens/Signup/state.ts
+++ b/src/screens/Signup/state.ts
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {createContext, useCallback, useContext} from 'react'
 import {LayoutAnimation} from 'react-native'
 import {
   ComAtprotoServerCreateAccount,
@@ -250,9 +250,9 @@ interface IContext {
   state: SignupState
   dispatch: React.Dispatch<SignupAction>
 }
-export const SignupContext = React.createContext<IContext>({} as IContext)
+export const SignupContext = createContext<IContext>({} as IContext)
 SignupContext.displayName = 'SignupContext'
-export const useSignupContext = () => React.useContext(SignupContext)
+export const useSignupContext = () => useContext(SignupContext)
 
 export function useSubmitSignup() {
   const ax = useAnalytics()
diff --git a/src/screens/SignupQueued.tsx b/src/screens/SignupQueued.tsx
--- a/src/screens/SignupQueued.tsx
+++ b/src/screens/SignupQueued.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {Modal, ScrollView, View} from 'react-native'
 import {SystemBars} from 'react-native-edge-to-edge'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -27,15 +27,15 @@ const onboardingDispatch = useOnboardingDispatch()
   const {logoutCurrentAccount} = useSessionApi()
   const agent = useAgent()
 
-  const [isProcessing, setProcessing] = React.useState(false)
-  const [estimatedTime, setEstimatedTime] = React.useState<string | undefined>(
+  const [isProcessing, setProcessing] = useState(false)
+  const [estimatedTime, setEstimatedTime] = useState<string | undefined>(
     undefined,
   )
-  const [placeInQueue, setPlaceInQueue] = React.useState<number | undefined>(
+  const [placeInQueue, setPlaceInQueue] = useState<number | undefined>(
     undefined,
   )
 
-  const checkStatus = React.useCallback(async () => {
+  const checkStatus = useCallback(async () => {
     setProcessing(true)
     try {
       const res = await agent.com.atproto.temp.checkSignupQueue()
@@ -65,7 +65,7 @@ onboardingDispatch,
     agent,
   ])
 
-  React.useEffect(() => {
+  useEffect(() => {
     checkStatus()
     const interval = setInterval(checkStatus, 60e3)
     return () => clearInterval(interval)
diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {
@@ -75,7 +75,7 @@ starterPack.list &&
     AppBskyGraphDefs.validateStarterPackView(starterPack) &&
     AppBskyGraphStarterpack.validateRecord(starterPack.record)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isErrorStarterPack || (starterPack && !isValid)) {
       setScreenState(LoggedOutScreenState.S_LoginOrCreateAccount)
     }
@@ -128,8 +128,7 @@ const {isTabletOrDesktop} = useWebMediaQueries()
   const androidDialogControl = useDialogControl()
   const [descriptionRt] = useRichText(record.description || '')
 
-  const [appClipOverlayVisible, setAppClipOverlayVisible] =
-    React.useState(false)
+  const [appClipOverlayVisible, setAppClipOverlayVisible] = useState(false)
 
   const listItemsCount = starterPack.list?.listItemCount ?? 0
 
diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/src/screens/StarterPack/StarterPackScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {
@@ -201,16 +201,16 @@ const qrCodeDialogControl = useDialogControl()
   const shareDialogControl = useDialogControl()
 
   const shortenLink = useShortenLink()
-  const [link, setLink] = React.useState<string>()
-  const [imageLoaded, setImageLoaded] = React.useState(false)
+  const [link, setLink] = useState<string>()
+  const [imageLoaded, setImageLoaded] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     ax.metric('starterPack:opened', {
       starterPack: starterPack.uri,
     })
   }, [ax, starterPack.uri])
 
-  const onOpenShareDialog = React.useCallback(() => {
+  const onOpenShareDialog = useCallback(() => {
     const rkey = new AtUri(starterPack.uri).rkey
     shortenLink(makeStarterPackLink(starterPack.creator.did, rkey)).then(
       res => {
@@ -227,7 +227,7 @@ })
     shareDialogControl.open()
   }, [shareDialogControl, shortenLink, starterPack])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (routeParams.new) {
       onOpenShareDialog()
     }
@@ -316,7 +316,7 @@ const setActiveStarterPack = useSetActiveStarterPack()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const {captureAction} = useProgressGuideControls()
 
-  const [isProcessing, setIsProcessing] = React.useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
 
   const {record, creator} = starterPack
   const isOwn = creator?.did === currentAccount?.did
@@ -325,7 +325,7 @@ const ax = useAnalytics()
 
   const navigation = useNavigation<NavigationProp>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onFocus = () => {
       if (hasSession) return
       setActiveStarterPack({
@@ -731,7 +731,7 @@ const {_} = useLingui()
   const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
   const {gtMobile} = useBreakpoints()
-  const [isProcessing, setIsProcessing] = React.useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
 
   const goBack = () => {
     if (navigation.canGoBack()) {
diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx
--- a/src/screens/StarterPack/Wizard/State.tsx
+++ b/src/screens/StarterPack/Wizard/State.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useReducer} from 'react'
 import {
   type AppBskyFeedDefs,
   type AppBskyGraphDefs,
@@ -41,12 +41,12 @@ }
 
 type TStateContext = [State, (action: Action) => void]
 
-const StateContext = React.createContext<TStateContext>([
+const StateContext = createContext<TStateContext>([
   {} as State,
   (_: Action) => {},
 ])
 StateContext.displayName = 'StarterPackWizardStateContext'
-export const useWizardState = () => React.useContext(StateContext)
+export const useWizardState = () => useContext(StateContext)
 
 function reducer(state: State, action: Action): State {
   let updatedState = state
@@ -157,7 +157,7 @@ targetDid,
     }
   }
 
-  const [state, dispatch] = React.useReducer(reducer, null, createInitialState)
+  const [state, dispatch] = useReducer(reducer, null, createInitialState)
 
   return (
     <StateContext.Provider value={[state, dispatch]}>
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect} from 'react'
 import {Keyboard, View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -179,14 +179,14 @@ staleTime: 0,
   })
   const parsed = parseStarterPackUri(currentStarterPack?.uri)
 
-  React.useEffect(() => {
+  useEffect(() => {
     navigation.setOptions({
       gestureEnabled: false,
     })
   }, [navigation])
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(true)
 
       return () => {
diff --git a/src/screens/Topic.tsx b/src/screens/Topic.tsx
--- a/src/screens/Topic.tsx
+++ b/src/screens/Topic.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {type ListRenderItemInfo, View} from 'react-native'
 import {type AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -39,26 +39,26 @@ }: NativeStackScreenProps<CommonNavigatorParams, 'Topic'>) {
   const {topic} = route.params
   const {_} = useLingui()
 
-  const headerTitle = React.useMemo(() => {
+  const headerTitle = useMemo(() => {
     return enforceLen(decodeURIComponent(topic), 24, true, 'middle')
   }, [topic])
 
-  const onShare = React.useCallback(() => {
+  const onShare = useCallback(() => {
     const url = new URL('https://bsky.app')
     url.pathname = `/topic/${topic}`
     shareUrl(url.toString())
   }, [topic])
 
-  const [activeTab, setActiveTab] = React.useState(0)
+  const [activeTab, setActiveTab] = useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPageSelected = React.useCallback(
+  const onPageSelected = useCallback(
     (index: number) => {
       setMinimalShellMode(false)
       setActiveTab(index)
@@ -66,7 +66,7 @@ },
     [setMinimalShellMode],
   )
 
-  const sections = React.useMemo(() => {
+  const sections = useMemo(() => {
     return [
       {
         title: _(msg`Top`),
@@ -135,7 +135,7 @@ active: boolean
 }) {
   const {_} = useLingui()
   const initialNumToRender = useInitialNumToRender()
-  const [isPTR, setIsPTR] = React.useState(false)
+  const [isPTR, setIsPTR] = useState(false)
   const trackPostView = usePostViewTracking('Topic')
 
   const {
@@ -154,17 +154,17 @@ sort,
     enabled: active,
   })
 
-  const posts = React.useMemo(() => {
+  const posts = useMemo(() => {
     return data?.pages.flatMap(page => page.posts) || []
   }, [data])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTR(true)
     await refetch()
     setIsPTR(false)
   }, [refetch])
 
-  const onEndReached = React.useCallback(() => {
+  const onEndReached = useCallback(() => {
     if (isFetchingNextPage || !hasNextPage || error) return
     fetchNextPage()
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
diff --git a/src/state/a11y.tsx b/src/state/a11y.tsx
--- a/src/state/a11y.tsx
+++ b/src/state/a11y.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useMemo, useState} from 'react'
 import {AccessibilityInfo} from 'react-native'
 
 import {IS_WEB} from '#/env'
 import {PlatformInfo} from '../../modules/expo-bluesky-swiss-army'
 
-const Context = React.createContext({
+const Context = createContext({
   reduceMotionEnabled: false,
   screenReaderEnabled: false,
 })
 Context.displayName = 'A11yContext'
 
 export function useA11y() {
-  return React.useContext(Context)
+  return useContext(Context)
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(() =>
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(() =>
     PlatformInfo.getIsReducedMotionEnabled(),
   )
-  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
       'reduceMotionChanged',
       enabled => {
@@ -49,7 +49,7 @@ screenReaderChangedSubscription.remove()
     }
   }, [])
 
-  const ctx = React.useMemo(() => {
+  const ctx = useMemo(() => {
     return {
       reduceMotionEnabled,
       /**
diff --git a/src/state/cache/thread-mutes.tsx b/src/state/cache/thread-mutes.tsx
--- a/src/state/cache/thread-mutes.tsx
+++ b/src/state/cache/thread-mutes.tsx
@@ -1,4 +1,10 @@
-import React, {useEffect} from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 import {useAgent, useSession} from '../session'
@@ -6,17 +12,15 @@
 type StateContext = Map<string, boolean>
 type SetStateContext = (uri: string, value: boolean) => void
 
-const stateContext = React.createContext<StateContext>(new Map())
+const stateContext = createContext<StateContext>(new Map())
 stateContext.displayName = 'ThreadMutesStateContext'
-const setStateContext = React.createContext<SetStateContext>(
-  (_: string) => false,
-)
+const setStateContext = createContext<SetStateContext>((_: string) => false)
 setStateContext.displayName = 'ThreadMutesSetStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState<StateContext>(() => new Map())
+  const [state, setState] = useState<StateContext>(() => new Map())
 
-  const setThreadMute = React.useCallback(
+  const setThreadMute = useCallback(
     (uri: string, value: boolean) => {
       setState(prev => {
         const next = new Map(prev)
@@ -39,16 +43,16 @@ )
 }
 
 export function useMutedThreads() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useIsThreadMuted(uri: string, defaultValue = false) {
-  const state = React.useContext(stateContext)
+  const state = useContext(stateContext)
   return state.get(uri) ?? defaultValue
 }
 
 export function useSetThreadMute() {
-  return React.useContext(setStateContext)
+  return useContext(setStateContext)
 }
 
 function useMigrateMutes(setThreadMute: SetStateContext) {
diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
 import {type DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
@@ -25,10 +32,10 @@ setDialogIsOpen(id: string, isOpen: boolean): void
   setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
 }
 
-const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
+const DialogContext = createContext<IDialogContext>({} as IDialogContext)
 DialogContext.displayName = 'DialogContext'
 
-const DialogControlContext = React.createContext<IDialogControlContext>(
+const DialogControlContext = createContext<IDialogControlContext>(
   {} as IDialogControlContext,
 )
 DialogControlContext.displayName = 'DialogControlContext'
@@ -37,31 +44,31 @@ /**
  * The number of dialogs that are fully expanded. This is used to determine the background color of the status bar
  * on iOS.
  */
-const DialogFullyExpandedCountContext = React.createContext<number>(0)
+const DialogFullyExpandedCountContext = createContext<number>(0)
 DialogFullyExpandedCountContext.displayName = 'DialogFullyExpandedCountContext'
 
 export function useDialogStateContext() {
-  return React.useContext(DialogContext)
+  return useContext(DialogContext)
 }
 
 export function useDialogStateControlContext() {
-  return React.useContext(DialogControlContext)
+  return useContext(DialogControlContext)
 }
 
 /** The number of dialogs that are fully expanded */
 export function useDialogFullyExpandedCountContext() {
-  return React.useContext(DialogFullyExpandedCountContext)
+  return useContext(DialogFullyExpandedCountContext)
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
+  const [fullyExpandedCount, setFullyExpandedCount] = useState(0)
 
-  const activeDialogs = React.useRef<
+  const activeDialogs = useRef<
     Map<string, React.MutableRefObject<DialogControlRefProps>>
   >(new Map())
-  const openDialogs = React.useRef<Set<string>>(new Set())
+  const openDialogs = useRef<Set<string>>(new Set())
 
-  const closeAllDialogs = React.useCallback(() => {
+  const closeAllDialogs = useCallback(() => {
     if (IS_WEB) {
       openDialogs.current.forEach(id => {
         const dialog = activeDialogs.current.get(id)
@@ -75,7 +82,7 @@ return false
     }
   }, [])
 
-  const setDialogIsOpen = React.useCallback((id: string, isOpen: boolean) => {
+  const setDialogIsOpen = useCallback((id: string, isOpen: boolean) => {
     if (isOpen) {
       openDialogs.current.add(id)
     } else {
@@ -83,14 +90,14 @@ openDialogs.current.delete(id)
     }
   }, [])
 
-  const context = React.useMemo<IDialogContext>(
+  const context = useMemo<IDialogContext>(
     () => ({
       activeDialogs,
       openDialogs,
     }),
     [activeDialogs, openDialogs],
   )
-  const controls = React.useMemo(
+  const controls = useMemo(
     () => ({
       closeAllDialogs,
       setDialogIsOpen,
diff --git a/src/state/home-badge.tsx b/src/state/home-badge.tsx
--- a/src/state/home-badge.tsx
+++ b/src/state/home-badge.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 
 type StateContext = boolean
 type ApiContext = (hasNew: boolean) => void
 
-const stateContext = React.createContext<StateContext>(false)
+const stateContext = createContext<StateContext>(false)
 stateContext.displayName = 'HomeBadgeStateContext'
-const apiContext = React.createContext<ApiContext>((_: boolean) => {})
+const apiContext = createContext<ApiContext>((_: boolean) => {})
 apiContext.displayName = 'HomeBadgeApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(false)
+  const [state, setState] = useState(false)
   return (
     <stateContext.Provider value={state}>
       <apiContext.Provider value={setState}>{children}</apiContext.Provider>
@@ -18,9 +18,9 @@ )
 }
 
 export function useHomeBadge() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetHomeBadge() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx
--- a/src/state/lightbox.tsx
+++ b/src/state/lightbox.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
@@ -10,14 +10,14 @@ images: ImageSource[]
   index: number
 }
 
-const LightboxContext = React.createContext<{
+const LightboxContext = createContext<{
   activeLightbox: Lightbox | null
 }>({
   activeLightbox: null,
 })
 LightboxContext.displayName = 'LightboxContext'
 
-const LightboxControlContext = React.createContext<{
+const LightboxControlContext = createContext<{
   openLightbox: (lightbox: Omit<Lightbox, 'id'>) => void
   closeLightbox: () => boolean
 }>({
@@ -27,9 +27,7 @@ })
 LightboxControlContext.displayName = 'LightboxControlContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [activeLightbox, setActiveLightbox] = React.useState<Lightbox | null>(
-    null,
-  )
+  const [activeLightbox, setActiveLightbox] = useState<Lightbox | null>(null)
 
   const openLightbox = useNonReactiveCallback(
     (lightbox: Omit<Lightbox, 'id'>) => {
@@ -51,14 +49,14 @@ setActiveLightbox(null)
     return wasActive
   })
 
-  const state = React.useMemo(
+  const state = useMemo(
     () => ({
       activeLightbox,
     }),
     [activeLightbox],
   )
 
-  const methods = React.useMemo(
+  const methods = useMemo(
     () => ({
       openLightbox,
       closeLightbox,
@@ -76,9 +74,9 @@ )
 }
 
 export function useLightbox() {
-  return React.useContext(LightboxContext)
+  return useContext(LightboxContext)
 }
 
 export function useLightboxControls() {
-  return React.useContext(LightboxControlContext)
+  return useContext(LightboxControlContext)
 }
diff --git a/src/state/messages/convo/index.tsx b/src/state/messages/convo/index.tsx
--- a/src/state/messages/convo/index.tsx
+++ b/src/state/messages/convo/index.tsx
@@ -1,4 +1,11 @@
-import React, {useContext, useState, useSyncExternalStore} from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+} from 'react'
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import {useFocusEffect} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -25,7 +32,7 @@ import {useAgent} from '#/state/session'
 
 export * from '#/state/messages/convo/util'
 
-const ChatContext = React.createContext<ConvoState | null>(null)
+const ChatContext = createContext<ConvoState | null>(null)
 ChatContext.displayName = 'ChatContext'
 
 export function useConvo() {
@@ -82,7 +89,7 @@
   const appState = useAppState()
   const isActive = appState === 'active'
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       if (isActive) {
         convo.resume()
         markAsRead({convoId})
@@ -95,7 +102,7 @@ }
     }, [isActive, convo, convoId, markAsRead]),
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return convo.on(event => {
       switch (event.type) {
         case 'invalidate-block-state': {
diff --git a/src/state/messages/current-convo-id.tsx b/src/state/messages/current-convo-id.tsx
--- a/src/state/messages/current-convo-id.tsx
+++ b/src/state/messages/current-convo-id.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
-const CurrentConvoIdContext = React.createContext<{
+const CurrentConvoIdContext = createContext<{
   currentConvoId: string | undefined
   setCurrentConvoId: (convoId: string | undefined) => void
 }>({
@@ -10,7 +10,7 @@ })
 CurrentConvoIdContext.displayName = 'CurrentConvoIdContext'
 
 export function useCurrentConvoId() {
-  const ctx = React.useContext(CurrentConvoIdContext)
+  const ctx = useContext(CurrentConvoIdContext)
   if (!ctx) {
     throw new Error(
       'useCurrentConvoId must be used within a CurrentConvoIdProvider',
@@ -24,10 +24,8 @@ children,
 }: {
   children: React.ReactNode
 }) {
-  const [currentConvoId, setCurrentConvoId] = React.useState<
-    string | undefined
-  >()
-  const ctx = React.useMemo(
+  const [currentConvoId, setCurrentConvoId] = useState<string | undefined>()
+  const ctx = useMemo(
     () => ({currentConvoId, setCurrentConvoId}),
     [currentConvoId],
   )
diff --git a/src/state/messages/events/index.tsx b/src/state/messages/events/index.tsx
--- a/src/state/messages/events/index.tsx
+++ b/src/state/messages/events/index.tsx
@@ -1,16 +1,14 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useState} from 'react'
 import {AppState} from 'react-native'
 
 import {MessagesEventBus} from '#/state/messages/events/agent'
 import {useAgent, useSession} from '#/state/session'
 
-const MessagesEventBusContext = React.createContext<MessagesEventBus | null>(
-  null,
-)
+const MessagesEventBusContext = createContext<MessagesEventBus | null>(null)
 MessagesEventBusContext.displayName = 'MessagesEventBusContext'
 
 export function useMessagesEventBus() {
-  const ctx = React.useContext(MessagesEventBusContext)
+  const ctx = useContext(MessagesEventBusContext)
   if (!ctx) {
     throw new Error(
       'useMessagesEventBus must be used within a MessagesEventBusProvider',
@@ -45,14 +43,14 @@ }: {
   children: React.ReactNode
 }) {
   const agent = useAgent()
-  const [bus] = React.useState(
+  const [bus] = useState(
     () =>
       new MessagesEventBus({
         agent,
       }),
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     bus.resume()
 
     return () => {
@@ -60,7 +58,7 @@ bus.suspend()
     }
   }, [bus])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleAppStateChange = (nextAppState: string) => {
       if (nextAppState === 'active') {
         bus.resume()
diff --git a/src/state/messages/index.tsx b/src/state/messages/index.tsx
--- a/src/state/messages/index.tsx
+++ b/src/state/messages/index.tsx
@@ -1,5 +1,3 @@
-import type React from 'react'
-
 import {CurrentConvoIdProvider} from '#/state/messages/current-convo-id'
 import {MessagesEventBusProvider} from '#/state/messages/events'
 import {ListConvosProvider} from '#/state/queries/messages/list-conversations'
diff --git a/src/state/messages/message-drafts.tsx b/src/state/messages/message-drafts.tsx
--- a/src/state/messages/message-drafts.tsx
+++ b/src/state/messages/message-drafts.tsx
@@ -1,15 +1,22 @@
-import React, {useEffect, useMemo, useReducer, useRef} from 'react'
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react'
 
 import {useCurrentConvoId} from './current-convo-id'
 
-const MessageDraftsContext = React.createContext<{
+const MessageDraftsContext = createContext<{
   state: State
   dispatch: React.Dispatch<Actions>
 } | null>(null)
 MessageDraftsContext.displayName = 'MessageDraftsContext'
 
 function useMessageDraftsContext() {
-  const ctx = React.useContext(MessageDraftsContext)
+  const ctx = useContext(MessageDraftsContext)
   if (!ctx) {
     throw new Error(
       'useMessageDrafts must be used within a MessageDraftsContext',
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 
@@ -25,7 +25,7 @@
   // Lists
   | UserAddRemoveListsModal
 
-const ModalContext = React.createContext<{
+const ModalContext = createContext<{
   isModalActive: boolean
   activeModals: Modal[]
 }>({
@@ -34,7 +34,7 @@ activeModals: [],
 })
 ModalContext.displayName = 'ModalContext'
 
-const ModalControlContext = React.createContext<{
+const ModalControlContext = createContext<{
   openModal: (modal: Modal) => void
   closeModal: () => boolean
   closeAllModals: () => boolean
@@ -46,7 +46,7 @@ })
 ModalControlContext.displayName = 'ModalControlContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [activeModals, setActiveModals] = React.useState<Modal[]>([])
+  const [activeModals, setActiveModals] = useState<Modal[]>([])
 
   const openModal = useNonReactiveCallback((modal: Modal) => {
     setActiveModals(modals => [...modals, modal])
@@ -66,7 +66,7 @@ setActiveModals([])
     return wasActive
   })
 
-  const state = React.useMemo(
+  const state = useMemo(
     () => ({
       isModalActive: activeModals.length > 0,
       activeModals,
@@ -74,7 +74,7 @@ }),
     [activeModals],
   )
 
-  const methods = React.useMemo(
+  const methods = useMemo(
     () => ({
       openModal,
       closeModal,
@@ -96,12 +96,12 @@ /**
  * @deprecated use the dialog system from `#/components/Dialog.tsx`
  */
 export function useModals() {
-  return React.useContext(ModalContext)
+  return useContext(ModalContext)
 }
 
 /**
  * @deprecated use the dialog system from `#/components/Dialog.tsx`
  */
 export function useModalControls() {
-  return React.useContext(ModalControlContext)
+  return useContext(ModalControlContext)
 }
diff --git a/src/state/preferences/alt-text-required.tsx b/src/state/preferences/alt-text-required.tsx
--- a/src/state/preferences/alt-text-required.tsx
+++ b/src/state/preferences/alt-text-required.tsx
@@ -1,25 +1,29 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['requireAltTextEnabled']
 type SetContext = (v: persisted.Schema['requireAltTextEnabled']) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   persisted.defaults.requireAltTextEnabled,
 )
 stateContext.displayName = 'AltTextRequiredStateContext'
-const setContext = React.createContext<SetContext>(
+const setContext = createContext<SetContext>(
   (_: persisted.Schema['requireAltTextEnabled']) => {},
 )
 setContext.displayName = 'AltTextRequiredSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(
-    persisted.get('requireAltTextEnabled'),
-  )
+  const [state, setState] = useState(persisted.get('requireAltTextEnabled'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (requireAltTextEnabled: persisted.Schema['requireAltTextEnabled']) => {
       setState(requireAltTextEnabled)
       persisted.write('requireAltTextEnabled', requireAltTextEnabled)
@@ -27,7 +31,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'requireAltTextEnabled',
       nextRequireAltTextEnabled => {
@@ -46,9 +50,9 @@ )
 }
 
 export function useRequireAltTextEnabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetRequireAltTextEnabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/preferences/autoplay.tsx b/src/state/preferences/autoplay.tsx
--- a/src/state/preferences/autoplay.tsx
+++ b/src/state/preferences/autoplay.tsx
@@ -1,23 +1,27 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = boolean
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   Boolean(persisted.defaults.disableAutoplay),
 )
 stateContext.displayName = 'AutoplayStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'AutoplaySetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState(
-    Boolean(persisted.get('disableAutoplay')),
-  )
+  const [state, setState] = useState(Boolean(persisted.get('disableAutoplay')))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (autoplayDisabled: persisted.Schema['disableAutoplay']) => {
       setState(Boolean(autoplayDisabled))
       persisted.write('disableAutoplay', autoplayDisabled)
@@ -25,7 +29,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('disableAutoplay', nextDisableAutoplay => {
       setState(Boolean(nextDisableAutoplay))
     })
@@ -40,5 +44,5 @@ </stateContext.Provider>
   )
 }
 
-export const useAutoplayDisabled = () => React.useContext(stateContext)
-export const useSetAutoplayDisabled = () => React.useContext(setContext)
+export const useAutoplayDisabled = () => useContext(stateContext)
+export const useSetAutoplayDisabled = () => useContext(setContext)
diff --git a/src/state/preferences/disable-haptics.tsx b/src/state/preferences/disable-haptics.tsx
--- a/src/state/preferences/disable-haptics.tsx
+++ b/src/state/preferences/disable-haptics.tsx
@@ -1,23 +1,27 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = boolean
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   Boolean(persisted.defaults.disableHaptics),
 )
 stateContext.displayName = 'DisableHapticsStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'DisableHapticsSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState(
-    Boolean(persisted.get('disableHaptics')),
-  )
+  const [state, setState] = useState(Boolean(persisted.get('disableHaptics')))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (hapticsEnabled: persisted.Schema['disableHaptics']) => {
       setState(Boolean(hapticsEnabled))
       persisted.write('disableHaptics', hapticsEnabled)
@@ -25,7 +29,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('disableHaptics', nextDisableHaptics => {
       setState(Boolean(nextDisableHaptics))
     })
@@ -40,5 +44,5 @@ </stateContext.Provider>
   )
 }
 
-export const useHapticsDisabled = () => React.useContext(stateContext)
-export const useSetHapticsDisabled = () => React.useContext(setContext)
+export const useHapticsDisabled = () => useContext(stateContext)
+export const useSetHapticsDisabled = () => useContext(setContext)
diff --git a/src/state/preferences/external-embeds-prefs.tsx b/src/state/preferences/external-embeds-prefs.tsx
--- a/src/state/preferences/external-embeds-prefs.tsx
+++ b/src/state/preferences/external-embeds-prefs.tsx
@@ -1,4 +1,10 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import {type EmbedPlayerSource} from '#/lib/strings/embed-player'
 import * as persisted from '#/state/persisted'
@@ -9,17 +15,17 @@ source: EmbedPlayerSource,
   value: 'show' | 'hide' | undefined,
 ) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   persisted.defaults.externalEmbeds,
 )
 stateContext.displayName = 'ExternalEmbedsPrefsStateContext'
-const setContext = React.createContext<SetContext>({} as SetContext)
+const setContext = createContext<SetContext>({} as SetContext)
 setContext.displayName = 'ExternalEmbedsPrefsSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('externalEmbeds'))
+  const [state, setState] = useState(persisted.get('externalEmbeds'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (source: EmbedPlayerSource, value: 'show' | 'hide' | undefined) => {
       setState(prev => {
         persisted.write('externalEmbeds', {
@@ -36,7 +42,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('externalEmbeds', nextExternalEmbeds => {
       setState(nextExternalEmbeds)
     })
@@ -52,9 +58,9 @@ )
 }
 
 export function useExternalEmbedsPrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetExternalEmbedPref() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/preferences/hidden-posts.tsx b/src/state/preferences/hidden-posts.tsx
--- a/src/state/preferences/hidden-posts.tsx
+++ b/src/state/preferences/hidden-posts.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -11,20 +18,18 @@ hidePost: ({uri}: {uri: string}) => void
   unhidePost: ({uri}: {uri: string}) => void
 }
 
-const stateContext = React.createContext<StateContext>(
-  persisted.defaults.hiddenPosts,
-)
+const stateContext = createContext<StateContext>(persisted.defaults.hiddenPosts)
 stateContext.displayName = 'HiddenPostsStateContext'
-const apiContext = React.createContext<ApiContext>({
+const apiContext = createContext<ApiContext>({
   hidePost: () => {},
   unhidePost: () => {},
 })
 apiContext.displayName = 'HiddenPostsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('hiddenPosts'))
+  const [state, setState] = useState(persisted.get('hiddenPosts'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (fn: SetStateCb) => {
       const s = fn(persisted.get('hiddenPosts'))
       setState(s)
@@ -33,7 +38,7 @@ },
     [setState],
   )
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       hidePost: ({uri}: {uri: string}) => {
         setStateWrapped(s => [...(s || []), uri])
@@ -45,7 +50,7 @@ }),
     [setStateWrapped],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('hiddenPosts', nextHiddenPosts => {
       setState(nextHiddenPosts)
     })
@@ -59,9 +64,9 @@ )
 }
 
 export function useHiddenPosts() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useHiddenPostsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx
--- a/src/state/preferences/in-app-browser.tsx
+++ b/src/state/preferences/in-app-browser.tsx
@@ -1,23 +1,29 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['useInAppBrowser']
 type SetContext = (v: persisted.Schema['useInAppBrowser']) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   persisted.defaults.useInAppBrowser,
 )
 stateContext.displayName = 'InAppBrowserStateContext'
-const setContext = React.createContext<SetContext>(
+const setContext = createContext<SetContext>(
   (_: persisted.Schema['useInAppBrowser']) => {},
 )
 setContext.displayName = 'InAppBrowserSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('useInAppBrowser'))
+  const [state, setState] = useState(persisted.get('useInAppBrowser'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (inAppBrowser: persisted.Schema['useInAppBrowser']) => {
       setState(inAppBrowser)
       persisted.write('useInAppBrowser', inAppBrowser)
@@ -25,7 +31,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('useInAppBrowser', nextUseInAppBrowser => {
       setState(nextUseInAppBrowser)
     })
@@ -41,9 +47,9 @@ )
 }
 
 export function useInAppBrowser() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetInAppBrowser() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx
--- a/src/state/preferences/index.tsx
+++ b/src/state/preferences/index.tsx
@@ -1,5 +1,3 @@
-import type React from 'react'
-
 import {Provider as AltTextRequiredProvider} from './alt-text-required'
 import {Provider as AutoplayProvider} from './autoplay'
 import {Provider as DisableHapticsProvider} from './disable-haptics'
diff --git a/src/state/preferences/kawaii.tsx b/src/state/preferences/kawaii.tsx
--- a/src/state/preferences/kawaii.tsx
+++ b/src/state/preferences/kawaii.tsx
@@ -1,19 +1,23 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 import {IS_WEB} from '#/env'
 
 type StateContext = persisted.Schema['kawaii']
 
-const stateContext = React.createContext<StateContext>(
-  persisted.defaults.kawaii,
-)
+const stateContext = createContext<StateContext>(persisted.defaults.kawaii)
 stateContext.displayName = 'KawaiiStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('kawaii'))
+  const [state, setState] = useState(persisted.get('kawaii'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (kawaii: persisted.Schema['kawaii']) => {
       setState(kawaii)
       persisted.write('kawaii', kawaii)
@@ -21,13 +25,13 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('kawaii', nextKawaii => {
       setState(nextKawaii)
     })
   }, [setStateWrapped])
 
-  React.useEffect(() => {
+  useEffect(() => {
     // dumb and stupid but it's web only so just refresh the page if you want to change it
 
     if (IS_WEB) {
@@ -47,5 +51,5 @@ return <stateContext.Provider value={state}>{children}</stateContext.Provider>
 }
 
 export function useKawaiiMode() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
diff --git a/src/state/preferences/label-defs.tsx b/src/state/preferences/label-defs.tsx
--- a/src/state/preferences/label-defs.tsx
+++ b/src/state/preferences/label-defs.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext} from 'react'
 import {
   type AppBskyLabelerDefs,
   type InterpretedLabelValueDefinition,
@@ -11,7 +11,7 @@ labelDefs: Record<string, InterpretedLabelValueDefinition[]>
   labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   labelDefs: {},
   labelers: [],
 })
@@ -23,5 +23,5 @@ return <stateContext.Provider value={state}>{children}</stateContext.Provider>
 }
 
 export function useLabelDefinitions() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
diff --git a/src/state/preferences/languages.tsx b/src/state/preferences/languages.tsx
--- a/src/state/preferences/languages.tsx
+++ b/src/state/preferences/languages.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 import {type AppLanguage} from '#/locale/languages'
 import * as persisted from '#/state/persisted'
@@ -16,11 +23,11 @@ savePostLanguageToHistory: () => void
   setAppLanguage: (code2: AppLanguage) => void
 }
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   persisted.defaults.languagePrefs,
 )
 stateContext.displayName = 'LanguagePrefsStateContext'
-const apiContext = React.createContext<ApiContext>({
+const apiContext = createContext<ApiContext>({
   setPrimaryLanguage: (_: string) => {},
   setPostLanguage: (_: string) => {},
   setContentLanguages: (_: string[]) => {},
@@ -30,9 +37,9 @@ })
 apiContext.displayName = 'LanguagePrefsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(() => persisted.get('languagePrefs'))
+  const [state, setState] = useState(() => persisted.get('languagePrefs'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (fn: SetStateCb) => {
       const s = fn(persisted.get('languagePrefs'))
       setState(s)
@@ -41,13 +48,13 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('languagePrefs', nextLanguagePrefs => {
       setState(nextLanguagePrefs)
     })
   }, [setStateWrapped])
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       setPrimaryLanguage(code2: string) {
         setStateWrapped(s => ({...s, primaryLanguage: code2}))
@@ -102,11 +109,11 @@ )
 }
 
 export function useLanguagePrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useLanguagePrefsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
 
 export function getContentLanguages() {
diff --git a/src/state/preferences/large-alt-badge.tsx b/src/state/preferences/large-alt-badge.tsx
--- a/src/state/preferences/large-alt-badge.tsx
+++ b/src/state/preferences/large-alt-badge.tsx
@@ -1,25 +1,29 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['largeAltBadgeEnabled']
 type SetContext = (v: persisted.Schema['largeAltBadgeEnabled']) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   persisted.defaults.largeAltBadgeEnabled,
 )
 stateContext.displayName = 'LargeAltBadgeStateContext'
-const setContext = React.createContext<SetContext>(
+const setContext = createContext<SetContext>(
   (_: persisted.Schema['largeAltBadgeEnabled']) => {},
 )
 setContext.displayName = 'LargeAltBadgeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(
-    persisted.get('largeAltBadgeEnabled'),
-  )
+  const [state, setState] = useState(persisted.get('largeAltBadgeEnabled'))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (largeAltBadgeEnabled: persisted.Schema['largeAltBadgeEnabled']) => {
       setState(largeAltBadgeEnabled)
       persisted.write('largeAltBadgeEnabled', largeAltBadgeEnabled)
@@ -27,7 +31,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'largeAltBadgeEnabled',
       nextLargeAltBadgeEnabled => {
@@ -46,9 +50,9 @@ )
 }
 
 export function useLargeAltBadgeEnabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetLargeAltBadgeEnabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/preferences/subtitles.tsx b/src/state/preferences/subtitles.tsx
--- a/src/state/preferences/subtitles.tsx
+++ b/src/state/preferences/subtitles.tsx
@@ -1,23 +1,27 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = boolean
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   Boolean(persisted.defaults.subtitlesEnabled),
 )
 stateContext.displayName = 'SubtitlesStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'SubtitlesSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState(
-    Boolean(persisted.get('subtitlesEnabled')),
-  )
+  const [state, setState] = useState(Boolean(persisted.get('subtitlesEnabled')))
 
-  const setStateWrapped = React.useCallback(
+  const setStateWrapped = useCallback(
     (subtitlesEnabled: persisted.Schema['subtitlesEnabled']) => {
       setState(Boolean(subtitlesEnabled))
       persisted.write('subtitlesEnabled', subtitlesEnabled)
@@ -25,7 +29,7 @@ },
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('subtitlesEnabled', nextSubtitlesEnabled => {
       setState(Boolean(nextSubtitlesEnabled))
     })
@@ -40,5 +44,5 @@ </stateContext.Provider>
   )
 }
 
-export const useSubtitlesEnabled = () => React.useContext(stateContext)
-export const useSetSubtitlesEnabled = () => React.useContext(setContext)
+export const useSubtitlesEnabled = () => useContext(stateContext)
+export const useSetSubtitlesEnabled = () => useContext(setContext)
diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx
--- a/src/state/preferences/trending.tsx
+++ b/src/state/preferences/trending.tsx
@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -18,22 +25,22 @@ hidden: Exclude<persisted.Schema['trendingVideoDisabled'], undefined>,
   ): void
 }
 
-const StateContext = React.createContext<StateContext>({
+const StateContext = createContext<StateContext>({
   trendingDisabled: Boolean(persisted.defaults.trendingDisabled),
   trendingVideoDisabled: Boolean(persisted.defaults.trendingVideoDisabled),
 })
 StateContext.displayName = 'TrendingStateContext'
-const ApiContext = React.createContext<ApiContext>({
+const ApiContext = createContext<ApiContext>({
   setTrendingDisabled() {},
   setTrendingVideoDisabled() {},
 })
 ApiContext.displayName = 'TrendingApiContext'
 
 function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
-  const [value, _set] = React.useState(() => {
+  const [value, _set] = useState(() => {
     return Boolean(persisted.get(key))
   })
-  const set = React.useCallback<
+  const set = useCallback<
     (value: Exclude<persisted.Schema[T], undefined>) => void
   >(
     hidden => {
@@ -42,7 +49,7 @@ persisted.write(key, hidden)
     },
     [key, _set],
   )
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(key, hidden => {
       _set(Boolean(hidden))
     })
@@ -60,11 +67,11 @@
   /*
    * Context
    */
-  const state = React.useMemo(
+  const state = useMemo(
     () => ({trendingDisabled, trendingVideoDisabled}),
     [trendingDisabled, trendingVideoDisabled],
   )
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({setTrendingDisabled, setTrendingVideoDisabled}),
     [setTrendingDisabled, setTrendingVideoDisabled],
   )
@@ -77,9 +84,9 @@ )
 }
 
 export function useTrendingSettings() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useTrendingSettingsApi() {
-  return React.useContext(ApiContext)
+  return useContext(ApiContext)
 }
diff --git a/src/state/preferences/used-starter-packs.tsx b/src/state/preferences/used-starter-packs.tsx
--- a/src/state/preferences/used-starter-packs.tsx
+++ b/src/state/preferences/used-starter-packs.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useState} from 'react'
 
 import * as persisted from '#/state/persisted'
 
 type StateContext = boolean | undefined
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(false)
+const stateContext = createContext<StateContext>(false)
 stateContext.displayName = 'UsedStarterPacksStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'UsedStarterPacksSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState<StateContext>(() =>
+  const [state, setState] = useState<StateContext>(() =>
     persisted.get('hasCheckedForStarterPack'),
   )
 
@@ -20,7 +20,7 @@ setState(v)
     persisted.write('hasCheckedForStarterPack', v)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'hasCheckedForStarterPack',
       nextHasCheckedForStarterPack => {
@@ -38,5 +38,5 @@ </stateContext.Provider>
   )
 }
 
-export const useHasCheckedForStarterPack = () => React.useContext(stateContext)
-export const useSetHasCheckedForStarterPack = () => React.useContext(setContext)
+export const useHasCheckedForStarterPack = () => useContext(stateContext)
+export const useSetHasCheckedForStarterPack = () => useContext(setContext)
diff --git a/src/state/queries/actor-autocomplete.ts b/src/state/queries/actor-autocomplete.ts
--- a/src/state/queries/actor-autocomplete.ts
+++ b/src/state/queries/actor-autocomplete.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {
   type AppBskyActorDefs,
   moderateProfile,
@@ -47,7 +47,7 @@ })
         : undefined
       return res?.data.actors || []
     },
-    select: React.useCallback(
+    select: useCallback(
       (data: AppBskyActorDefs.ProfileViewBasic[]) => {
         return computeSuggestions({
           q: prefix,
@@ -67,7 +67,7 @@ const queryClient = useQueryClient()
   const moderationOpts = useModerationOpts()
   const agent = useAgent()
 
-  return React.useCallback(
+  return useCallback(
     async ({query, limit = 8}: {query: string; limit?: number}) => {
       query = query.toLowerCase()
       let res
diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts
--- a/src/state/queries/handle.ts
+++ b/src/state/queries/handle.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {useMutation, useQueryClient} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'
@@ -16,7 +16,7 @@ export function useFetchHandle() {
   const queryClient = useQueryClient()
   const agent = useAgent()
 
-  return React.useCallback(
+  return useCallback(
     async (handleOrDid: string) => {
       if (handleOrDid.startsWith('did:')) {
         const res = await queryClient.fetchQuery({
@@ -55,7 +55,7 @@ export function useFetchDid() {
   const queryClient = useQueryClient()
   const agent = useAgent()
 
-  return React.useCallback(
+  return useCallback(
     async (handleOrDid: string) => {
       return queryClient.fetchQuery({
         staleTime: STALE.INFINITY,
diff --git a/src/state/queries/notifications/unread.tsx b/src/state/queries/notifications/unread.tsx
--- a/src/state/queries/notifications/unread.tsx
+++ b/src/state/queries/notifications/unread.tsx
@@ -2,7 +2,14 @@ /**
  * A kind of companion API to ./feed.ts. See that file for more info.
  */
 
-import React, {useRef} from 'react'
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {AppState} from 'react-native'
 import {useQueryClient} from '@tanstack/react-query'
 import EventEmitter from 'eventemitter3'
@@ -33,10 +40,10 @@ }) => Promise<void>
   getCachedUnreadPage: () => FeedPage | undefined
 }
 
-const stateContext = React.createContext<StateContext>('')
+const stateContext = createContext<StateContext>('')
 stateContext.displayName = 'NotificationsUnreadStateContext'
 
-const apiContext = React.createContext<ApiContext>({
+const apiContext = createContext<ApiContext>({
   async markAllRead() {},
   async checkUnread() {},
   getCachedUnreadPage: () => undefined,
@@ -49,17 +56,17 @@ const agent = useAgent()
   const queryClient = useQueryClient()
   const moderationOpts = useModerationOpts()
 
-  const [numUnread, setNumUnread] = React.useState('')
+  const [numUnread, setNumUnread] = useState('')
 
-  const checkUnreadRef = React.useRef<ApiContext['checkUnread'] | null>(null)
-  const cacheRef = React.useRef<CachedFeedPage>({
+  const checkUnreadRef = useRef<ApiContext['checkUnread'] | null>(null)
+  const cacheRef = useRef<CachedFeedPage>({
     usableInFeed: false,
     syncedAt: new Date(),
     data: undefined,
     unreadCount: 0,
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     function markAsUnusable() {
       if (cacheRef.current) {
         cacheRef.current.usableInFeed = false
@@ -72,7 +79,7 @@ }
   }, [])
 
   // periodic sync
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasSession || !checkUnreadRef.current) {
       return
     }
@@ -85,7 +92,7 @@ return () => clearInterval(interval)
   }, [hasSession])
 
   // listen for broadcasts
-  React.useEffect(() => {
+  useEffect(() => {
     const listener = ({data}: MessageEvent) => {
       cacheRef.current = {
         usableInFeed: false,
@@ -109,7 +116,7 @@
   const isFetchingRef = useRef(false)
 
   // create API
-  const api = React.useMemo<ApiContext>(() => {
+  const api = useMemo<ApiContext>(() => {
     return {
       async markAllRead() {
         // update server
@@ -211,11 +218,11 @@ )
 }
 
 export function useUnreadNotifications() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useUnreadNotificationsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
 
 function countUnread(page: FeedPage) {
diff --git a/src/state/queries/post-feed.ts b/src/state/queries/post-feed.ts
--- a/src/state/queries/post-feed.ts
+++ b/src/state/queries/post-feed.ts
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {AppState} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -164,7 +164,7 @@ */
   const fetchLimit = MIN_POSTS
 
   // Make sure this doesn't invalidate unless really needed.
-  const selectArgs = React.useMemo(
+  const selectArgs = useMemo(
     () => ({
       feedTuners,
       moderationOpts,
diff --git a/src/state/queries/postgate/index.ts b/src/state/queries/postgate/index.ts
--- a/src/state/queries/postgate/index.ts
+++ b/src/state/queries/postgate/index.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useRef} from 'react'
 import {
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
@@ -174,7 +174,7 @@ export function useToggleQuoteDetachmentMutation() {
   const agent = useAgent()
   const queryClient = useQueryClient()
   const getPosts = useGetPosts()
-  const prevEmbed = React.useRef<AppBskyFeedDefs.PostView['embed']>(undefined)
+  const prevEmbed = useRef<AppBskyFeedDefs.PostView['embed']>(undefined)
 
   return useMutation({
     mutationFn: async ({
diff --git a/src/state/queries/preferences/moderation.ts b/src/state/queries/preferences/moderation.ts
--- a/src/state/queries/preferences/moderation.ts
+++ b/src/state/queries/preferences/moderation.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {
   BskyAgent,
   DEFAULT_LABEL_SETTINGS,
@@ -36,7 +36,7 @@ }
   const labelers = useLabelersDetailedInfoQuery({dids})
   const isLoading = prefs.isLoading || labelers.isLoading
   const error = prefs.error || labelers.error
-  return React.useMemo(() => {
+  return useMemo(() => {
     return {
       isLoading,
       error,
@@ -48,7 +48,7 @@ }
 
 export function useLabelDefinitionsQuery() {
   const labelers = useMyLabelersQuery()
-  return React.useMemo(() => {
+  return useMemo(() => {
     return {
       labelDefs: Object.fromEntries(
         (labelers.data || []).map(labeler => [
diff --git a/src/state/queries/search-posts.ts b/src/state/queries/search-posts.ts
--- a/src/state/queries/search-posts.ts
+++ b/src/state/queries/search-posts.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useRef} from 'react'
 import {
   type AppBskyActorDefs,
   type AppBskyFeedDefs,
@@ -39,14 +39,14 @@ enabled?: boolean
 }) {
   const agent = useAgent()
   const moderationOpts = useModerationOpts()
-  const selectArgs = React.useMemo(
+  const selectArgs = useMemo(
     () => ({
       isSearchingSpecificUser: /from:(\w+)/.test(query),
       moderationOpts,
     }),
     [query, moderationOpts],
   )
-  const lastRun = React.useRef<{
+  const lastRun = useRef<{
     data: InfiniteData<AppBskyFeedSearchPosts.OutputSchema>
     args: typeof selectArgs
     result: InfiniteData<AppBskyFeedSearchPosts.OutputSchema>
@@ -72,7 +72,7 @@ },
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,
     enabled: enabled ?? !!moderationOpts,
-    select: React.useCallback(
+    select: useCallback(
       (data: InfiniteData<AppBskyFeedSearchPosts.OutputSchema>) => {
         const {moderationOpts, isSearchingSpecificUser} = selectArgs
 
diff --git a/src/state/queries/trending/useGetTrendsQuery.ts b/src/state/queries/trending/useGetTrendsQuery.ts
--- a/src/state/queries/trending/useGetTrendsQuery.ts
+++ b/src/state/queries/trending/useGetTrendsQuery.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo} from 'react'
 import {type AppBskyUnspeccedGetTrends, hasMutedWord} from '@atproto/api'
 import {useQuery} from '@tanstack/react-query'
 
@@ -18,7 +18,7 @@
 export function useGetTrendsQuery() {
   const agent = useAgent()
   const {data: preferences} = usePreferencesQuery()
-  const mutedWords = React.useMemo(() => {
+  const mutedWords = useMemo(() => {
     return preferences?.moderationPrefs?.mutedWords || []
   }, [preferences?.moderationPrefs])
 
@@ -41,7 +41,7 @@ },
       )
       return data
     },
-    select: React.useCallback(
+    select: useCallback(
       (data: AppBskyUnspeccedGetTrends.OutputSchema) => {
         return {
           trends: (data.trends ?? []).filter(t => {
diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx
--- a/src/state/shell/color-mode.tsx
+++ b/src/state/shell/color-mode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useMemo, useState} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -11,23 +11,19 @@ setColorMode: (v: persisted.Schema['colorMode']) => void
   setDarkTheme: (v: persisted.Schema['darkTheme']) => void
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   colorMode: 'system',
   darkTheme: 'dark',
 })
 stateContext.displayName = 'ColorModeStateContext'
-const setContext = React.createContext<SetContext>({} as SetContext)
+const setContext = createContext<SetContext>({} as SetContext)
 setContext.displayName = 'ColorModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [colorMode, setColorMode] = React.useState(() =>
-    persisted.get('colorMode'),
-  )
-  const [darkTheme, setDarkTheme] = React.useState(() =>
-    persisted.get('darkTheme'),
-  )
+  const [colorMode, setColorMode] = useState(() => persisted.get('colorMode'))
+  const [darkTheme, setDarkTheme] = useState(() => persisted.get('darkTheme'))
 
-  const stateContextValue = React.useMemo(
+  const stateContextValue = useMemo(
     () => ({
       colorMode,
       darkTheme,
@@ -35,7 +31,7 @@ }),
     [colorMode, darkTheme],
   )
 
-  const setContextValue = React.useMemo(
+  const setContextValue = useMemo(
     () => ({
       setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
         setColorMode(_colorMode)
@@ -49,7 +45,7 @@ }),
     [],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
       setDarkTheme(nextDarkTheme)
     })
@@ -72,9 +68,9 @@ )
 }
 
 export function useThemePrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetThemePrefs() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/shell/composer/index.tsx b/src/state/shell/composer/index.tsx
--- a/src/state/shell/composer/index.tsx
+++ b/src/state/shell/composer/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 import {
   type AppBskyActorDefs,
   type AppBskyFeedDefs,
@@ -65,9 +65,9 @@ openComposer: (opts: ComposerOpts) => void
   closeComposer: () => boolean
 }
 
-const stateContext = React.createContext<StateContext>(undefined)
+const stateContext = createContext<StateContext>(undefined)
 stateContext.displayName = 'ComposerStateContext'
-const controlsContext = React.createContext<ControlsContext>({
+const controlsContext = createContext<ControlsContext>({
   openComposer(_opts: ComposerOpts) {},
   closeComposer() {
     return false
@@ -77,7 +77,7 @@ controlsContext.displayName = 'ComposerControlsContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const {_} = useLingui()
-  const [state, setState] = React.useState<StateContext>()
+  const [state, setState] = useState<StateContext>()
   const queryClient = useQueryClient()
 
   const openComposer = useNonReactiveCallback((opts: ComposerOpts) => {
@@ -135,7 +135,7 @@
     return wasOpen
   })
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       openComposer,
       closeComposer,
@@ -153,12 +153,12 @@ )
 }
 
 export function useComposerState() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useComposerControls() {
-  const {closeComposer} = React.useContext(controlsContext)
-  return React.useMemo(() => ({closeComposer}), [closeComposer])
+  const {closeComposer} = useContext(controlsContext)
+  return useMemo(() => ({closeComposer}), [closeComposer])
 }
 
 /**
@@ -168,6 +168,6 @@ *
  * @deprecated use `#/lib/hooks/useOpenComposer` instead
  */
 export function useOpenComposer() {
-  const {openComposer} = React.useContext(controlsContext)
-  return React.useMemo(() => ({openComposer}), [openComposer])
+  const {openComposer} = useContext(controlsContext)
+  return useMemo(() => ({openComposer}), [openComposer])
 }
diff --git a/src/state/shell/composer/useComposerKeyboardShortcut.tsx b/src/state/shell/composer/useComposerKeyboardShortcut.tsx
--- a/src/state/shell/composer/useComposerKeyboardShortcut.tsx
+++ b/src/state/shell/composer/useComposerKeyboardShortcut.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect} from 'react'
 
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {useDialogStateContext} from '#/state/dialogs'
@@ -46,7 +46,7 @@ const {activeLightbox} = useLightbox()
   const isDrawerOpen = useIsDrawerOpen()
   const {hasSession} = useSession()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasSession) {
       return
     }
diff --git a/src/state/shell/drawer-swipe-disabled.tsx b/src/state/shell/drawer-swipe-disabled.tsx
--- a/src/state/shell/drawer-swipe-disabled.tsx
+++ b/src/state/shell/drawer-swipe-disabled.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 
 type StateContext = boolean
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(false)
+const stateContext = createContext<StateContext>(false)
 stateContext.displayName = 'DrawerSwipeDisabledStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'DrawerSwipeDisabledSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(false)
+  const [state, setState] = useState(false)
   return (
     <stateContext.Provider value={state}>
       <setContext.Provider value={setState}>{children}</setContext.Provider>
@@ -18,9 +18,9 @@ )
 }
 
 export function useIsDrawerSwipeDisabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetDrawerSwipeDisabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/shell/logged-out.tsx b/src/state/shell/logged-out.tsx
--- a/src/state/shell/logged-out.tsx
+++ b/src/state/shell/logged-out.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
 import {useSession} from '#/state/session'
 import {useActiveStarterPack} from '#/state/shell/starter-pack'
@@ -35,13 +35,13 @@ */
   clearRequestedAccount: () => void
 }
 
-const StateContext = React.createContext<State>({
+const StateContext = createContext<State>({
   showLoggedOut: false,
   requestedAccountSwitchTo: undefined,
 })
 StateContext.displayName = 'LoggedOutStateContext'
 
-const ControlsContext = React.createContext<Controls>({
+const ControlsContext = createContext<Controls>({
   setShowLoggedOut: () => {},
   requestSwitchToAccount: () => {},
   clearRequestedAccount: () => {},
@@ -52,7 +52,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const activeStarterPack = useActiveStarterPack()
   const {hasSession} = useSession()
   const shouldShowStarterPack = Boolean(activeStarterPack?.uri) && !hasSession
-  const [state, setState] = React.useState<State>({
+  const [state, setState] = useState<State>({
     showLoggedOut: shouldShowStarterPack,
     requestedAccountSwitchTo: shouldShowStarterPack
       ? IS_WEB
@@ -61,7 +61,7 @@ : 'new'
       : undefined,
   })
 
-  const controls = React.useMemo<Controls>(
+  const controls = useMemo<Controls>(
     () => ({
       setShowLoggedOut(show) {
         setState(s => ({
@@ -96,9 +96,9 @@ )
 }
 
 export function useLoggedOutView() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useLoggedOutViewControls() {
-  return React.useContext(ControlsContext)
+  return useContext(ControlsContext)
 }
diff --git a/src/state/shell/minimal-mode.tsx b/src/state/shell/minimal-mode.tsx
--- a/src/state/shell/minimal-mode.tsx
+++ b/src/state/shell/minimal-mode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useMemo} from 'react'
 import {
   type SharedValue,
   useSharedValue,
@@ -11,7 +11,7 @@ footerMode: SharedValue<number>
 }
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   headerMode: {
     value: 0,
     addListener() {},
@@ -34,13 +34,13 @@ set() {},
   },
 })
 stateContext.displayName = 'MinimalModeStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'MinimalModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerMode = useSharedValue(0)
   const footerMode = useSharedValue(0)
-  const setMode = React.useCallback(
+  const setMode = useCallback(
     (v: boolean) => {
       'worklet'
       headerMode.set(() =>
@@ -56,7 +56,7 @@ )
     },
     [headerMode, footerMode],
   )
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       headerMode,
       footerMode,
@@ -71,9 +71,9 @@ )
 }
 
 export function useMinimalShellMode() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetMinimalShellMode() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }
diff --git a/src/state/shell/onboarding.tsx b/src/state/shell/onboarding.tsx
--- a/src/state/shell/onboarding.tsx
+++ b/src/state/shell/onboarding.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useReducer} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -26,11 +26,11 @@ isActive: boolean
 }
 export type DispatchContext = (action: Action) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   compute(persisted.defaults.onboarding),
 )
 stateContext.displayName = 'OnboardingStateContext'
-const dispatchContext = React.createContext<DispatchContext>((_: Action) => {})
+const dispatchContext = createContext<DispatchContext>((_: Action) => {})
 dispatchContext.displayName = 'OnboardingDispatchContext'
 
 function reducer(state: StateContext, action: Action): StateContext {
@@ -74,12 +74,12 @@ }
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, dispatch] = React.useReducer(
+  const [state, dispatch] = useReducer(
     reducer,
     compute(persisted.get('onboarding')),
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('onboarding', nextOnboarding => {
       const next = nextOnboarding.step
       // TODO we've introduced a footgun
@@ -102,11 +102,11 @@ )
 }
 
 export function useOnboardingState() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useOnboardingDispatch() {
-  return React.useContext(dispatchContext)
+  return useContext(dispatchContext)
 }
 
 export function isOnboardingActive() {
diff --git a/src/state/shell/post-progress.tsx b/src/state/shell/post-progress.tsx
--- a/src/state/shell/post-progress.tsx
+++ b/src/state/shell/post-progress.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext} from 'react'
 
 interface PostProgressState {
   progress: number
@@ -6,7 +6,7 @@ status: 'pending' | 'success' | 'error' | 'idle'
   error?: string
 }
 
-const PostProgressContext = React.createContext<PostProgressState>({
+const PostProgressContext = createContext<PostProgressState>({
   progress: 0,
   status: 'idle',
 })
@@ -15,5 +15,5 @@
 export function Provider() {}
 
 export function usePostProgress() {
-  return React.useContext(PostProgressContext)
+  return useContext(PostProgressContext)
 }
diff --git a/src/state/shell/progress-guide.tsx b/src/state/shell/progress-guide.tsx
--- a/src/state/shell/progress-guide.tsx
+++ b/src/state/shell/progress-guide.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {createContext, useContext, useMemo, useRef, useState} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -44,10 +44,10 @@ | Like10AndFollow7ProgressGuide
   | Follow10ProgressGuide
   | undefined
 
-const ProgressGuideContext = React.createContext<ProgressGuide>(undefined)
+const ProgressGuideContext = createContext<ProgressGuide>(undefined)
 ProgressGuideContext.displayName = 'ProgressGuideContext'
 
-const ProgressGuideControlContext = React.createContext<{
+const ProgressGuideControlContext = createContext<{
   startProgressGuide(guide: ProgressGuideName): void
   endProgressGuide(): void
   captureAction(action: ProgressGuideAction, count?: number): void
@@ -59,7 +59,7 @@ })
 ProgressGuideControlContext.displayName = 'ProgressGuideControlContext'
 
 export function useProgressGuide(guide: ProgressGuideName) {
-  const ctx = React.useContext(ProgressGuideContext)
+  const ctx = useContext(ProgressGuideContext)
   if (ctx?.guide === guide) {
     return ctx
   }
@@ -67,7 +67,7 @@ return undefined
 }
 
 export function useProgressGuideControls() {
-  return React.useContext(ProgressGuideControlContext)
+  return useContext(ProgressGuideControlContext)
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
@@ -101,21 +101,21 @@ return maybeWronglyTypedProgressGuide
   }, [isPending, variables, preferences])
 
   const [localGuideState, setLocalGuideState] =
-    React.useState<ProgressGuide>(undefined)
+    useState<ProgressGuide>(undefined)
 
   if (activeProgressGuide && !localGuideState) {
     // hydrate from the server if needed
     setLocalGuideState(activeProgressGuide)
   }
 
-  const firstLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const fifthLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const tenthLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
+  const firstLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const fifthLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const tenthLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
 
-  const fifthFollowToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const tenthFollowToastRef = React.useRef<ProgressGuideToastRef | null>(null)
+  const fifthFollowToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const tenthFollowToastRef = useRef<ProgressGuideToastRef | null>(null)
 
-  const controls = React.useMemo(() => {
+  const controls = useMemo(() => {
     return {
       startProgressGuide(guide: ProgressGuideName) {
         if (guide === 'like-10-and-follow-7') {
diff --git a/src/state/shell/shell-layout.tsx b/src/state/shell/shell-layout.tsx
--- a/src/state/shell/shell-layout.tsx
+++ b/src/state/shell/shell-layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo} from 'react'
 import {type SharedValue, useSharedValue} from 'react-native-reanimated'
 
 type StateContext = {
@@ -6,7 +6,7 @@ headerHeight: SharedValue<number>
   footerHeight: SharedValue<number>
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   headerHeight: {
     value: 0,
     addListener() {},
@@ -34,7 +34,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerHeight = useSharedValue(0)
   const footerHeight = useSharedValue(0)
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       headerHeight,
       footerHeight,
@@ -46,5 +46,5 @@ return <stateContext.Provider value={value}>{children}</stateContext.Provider>
 }
 
 export function useShellLayout() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
diff --git a/src/state/shell/starter-pack.tsx b/src/state/shell/starter-pack.tsx
--- a/src/state/shell/starter-pack.tsx
+++ b/src/state/shell/starter-pack.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 
 type StateContext =
   | {
@@ -8,13 +8,13 @@ }
   | undefined
 type SetContext = (v: StateContext) => void
 
-const stateContext = React.createContext<StateContext>(undefined)
+const stateContext = createContext<StateContext>(undefined)
 stateContext.displayName = 'ActiveStarterPackStateContext'
-const setContext = React.createContext<SetContext>((_: StateContext) => {})
+const setContext = createContext<SetContext>((_: StateContext) => {})
 setContext.displayName = 'ActiveStarterPackSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState<StateContext>()
+  const [state, setState] = useState<StateContext>()
 
   return (
     <stateContext.Provider value={state}>
@@ -23,5 +23,5 @@ </stateContext.Provider>
   )
 }
 
-export const useActiveStarterPack = () => React.useContext(stateContext)
-export const useSetActiveStarterPack = () => React.useContext(setContext)
+export const useActiveStarterPack = () => useContext(stateContext)
+export const useSetActiveStarterPack = () => useContext(setContext)
diff --git a/src/state/shell/tick-every-minute.tsx b/src/state/shell/tick-every-minute.tsx
--- a/src/state/shell/tick-every-minute.tsx
+++ b/src/state/shell/tick-every-minute.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useState} from 'react'
 
 type StateContext = number
 
-const stateContext = React.createContext<StateContext>(0)
+const stateContext = createContext<StateContext>(0)
 stateContext.displayName = 'TickEveryMinuteContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [tick, setTick] = React.useState(Date.now())
-  React.useEffect(() => {
+  const [tick, setTick] = useState(Date.now())
+  useEffect(() => {
     const i = setInterval(() => {
       setTick(Date.now())
     }, 60_000)
@@ -17,5 +17,5 @@ return <stateContext.Provider value={tick}>{children}</stateContext.Provider>
 }
 
 export function useTickEveryMinute() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
diff --git a/src/state/threadgate-hidden-replies.tsx b/src/state/threadgate-hidden-replies.tsx
--- a/src/state/threadgate-hidden-replies.tsx
+++ b/src/state/threadgate-hidden-replies.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useMemo, useState} from 'react'
 import {type AppBskyFeedThreadgate} from '@atproto/api'
 
 type StateContext = {
@@ -10,25 +10,25 @@ addHiddenReplyUri: (uri: string) => void
   removeHiddenReplyUri: (uri: string) => void
 }
 
-const StateContext = React.createContext<StateContext>({
+const StateContext = createContext<StateContext>({
   uris: new Set(),
   recentlyUnhiddenUris: new Set(),
 })
 StateContext.displayName = 'ThreadgateHiddenRepliesStateContext'
 
-const ApiContext = React.createContext<ApiContext>({
+const ApiContext = createContext<ApiContext>({
   addHiddenReplyUri: () => {},
   removeHiddenReplyUri: () => {},
 })
 ApiContext.displayName = 'ThreadgateHiddenRepliesApiContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [uris, setHiddenReplyUris] = React.useState<Set<string>>(new Set())
-  const [recentlyUnhiddenUris, setRecentlyUnhiddenUris] = React.useState<
-    Set<string>
-  >(new Set())
+  const [uris, setHiddenReplyUris] = useState<Set<string>>(new Set())
+  const [recentlyUnhiddenUris, setRecentlyUnhiddenUris] = useState<Set<string>>(
+    new Set(),
+  )
 
-  const stateCtx = React.useMemo(
+  const stateCtx = useMemo(
     () => ({
       uris,
       recentlyUnhiddenUris,
@@ -36,7 +36,7 @@ }),
     [uris, recentlyUnhiddenUris],
   )
 
-  const apiCtx = React.useMemo(
+  const apiCtx = useMemo(
     () => ({
       addHiddenReplyUri(uri: string) {
         setHiddenReplyUris(prev => new Set(prev.add(uri)))
@@ -64,11 +64,11 @@ )
 }
 
 export function useThreadgateHiddenReplyUris() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useThreadgateHiddenReplyUrisAPI() {
-  return React.useContext(ApiContext)
+  return useContext(ApiContext)
 }
 
 export function useMergedThreadgateHiddenReplies({
@@ -77,7 +77,7 @@ }: {
   threadgateRecord?: AppBskyFeedThreadgate.Record
 }) {
   const {uris, recentlyUnhiddenUris} = useThreadgateHiddenReplyUris()
-  return React.useMemo(() => {
+  return useMemo(() => {
     const set = new Set([...(threadgateRecord?.hiddenReplies || []), ...uris])
     for (const uri of recentlyUnhiddenUris) {
       set.delete(uri)
@@ -88,7 +88,7 @@ }
 
 export function useMergeThreadgateHiddenReplies() {
   const {uris, recentlyUnhiddenUris} = useThreadgateHiddenReplyUris()
-  return React.useCallback(
+  return useCallback(
     (threadgate?: AppBskyFeedThreadgate.Record) => {
       const set = new Set([...(threadgate?.hiddenReplies || []), ...uris])
       for (const uri of recentlyUnhiddenUris) {
diff --git a/src/state/userActionHistory.ts b/src/state/userActionHistory.ts
--- a/src/state/userActionHistory.ts
+++ b/src/state/userActionHistory.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 
 const LIKE_WINDOW = 100
 const FOLLOW_WINDOW = 100
@@ -45,7 +45,7 @@ return userActionHistory
 }
 
 export function useActionHistorySnapshot() {
-  return React.useState(() => getActionHistory())[0]
+  return useState(() => getActionHistory())[0]
 }
 
 export function like(postUris: string[]) {
diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx
--- a/src/view/com/auth/SplashScreen.web.tsx
+++ b/src/view/com/auth/SplashScreen.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/core/macro'
@@ -33,9 +33,9 @@ }) => {
   const {_} = useLingui()
   const t = useTheme()
   const {isTabletOrMobile: IS_WEB_MOBILE} = useWebMediaQueries()
-  const [showClipOverlay, setShowClipOverlay] = React.useState(false)
+  const [showClipOverlay, setShowClipOverlay] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const getParams = new URLSearchParams(window.location.search)
     const clip = getParams.get('clip')
     if (clip === 'true') {
diff --git a/src/view/com/composer/AltTextCounterWrapper.tsx b/src/view/com/composer/AltTextCounterWrapper.tsx
--- a/src/view/com/composer/AltTextCounterWrapper.tsx
+++ b/src/view/com/composer/AltTextCounterWrapper.tsx
@@ -1,5 +1,4 @@
 import {View} from 'react-native'
-import type React from 'react'
 
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -1,4 +1,6 @@
-import React, {
+import {
+  Fragment,
+  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -299,7 +301,7 @@ },
     [activePost.id],
   )
 
-  const selectVideo = React.useCallback(
+  const selectVideo = useCallback(
     (postId: string, asset: ImagePickerAsset) => {
       const abortController = new AbortController()
       composerDispatch({
@@ -485,7 +487,7 @@ },
     [_, agent, currentDid, composerDispatch],
   )
 
-  const handleSelectDraft = React.useCallback(
+  const handleSelectDraft = useCallback(
     async (draftSummary: DraftSummary) => {
       logger.debug('loading draft for editing', {
         draftId: draftSummary.id,
@@ -553,7 +555,7 @@ clearThumbnailCache(queryClient)
     revokeAllMediaUrls()
   }, [closeComposer, queryClient])
 
-  const getDraftSaveError = React.useCallback(
+  const getDraftSaveError = useCallback(
     (e: unknown): string => {
       if (e instanceof AppBskyDraftCreateDraft.DraftLimitReachedError) {
         return _(msg`You've reached the maximum number of drafts`)
@@ -563,7 +565,7 @@ },
     [_],
   )
 
-  const validateDraftTextOrError = React.useCallback((): boolean => {
+  const validateDraftTextOrError = useCallback((): boolean => {
     const tooLong = composerState.thread.posts.some(
       post => post.richtext.graphemeLength > MAX_DRAFT_GRAPHEME_LENGTH,
     )
@@ -578,7 +580,7 @@ }
     return true
   }, [composerState.thread.posts, _])
 
-  const handleSaveDraft = React.useCallback(async () => {
+  const handleSaveDraft = useCallback(async () => {
     setError('')
     if (!validateDraftTextOrError()) {
       return
@@ -621,7 +623,7 @@ getDraftSaveError,
   ])
 
   // Save without closing - for use by DraftsButton
-  const saveCurrentDraft = React.useCallback(async (): Promise<{
+  const saveCurrentDraft = useCallback(async (): Promise<{
     success: boolean
   }> => {
     setError('')
@@ -648,7 +650,7 @@ getDraftSaveError,
   ])
 
   // Handle discard action - fires metric and closes composer
-  const handleDiscard = React.useCallback(() => {
+  const handleDiscard = useCallback(() => {
     const posts = thread.posts
     const hasContent = posts.some(
       post =>
@@ -665,7 +667,7 @@ onClose()
   }, [thread.posts, ax, onClose])
 
   // Check if composer is empty (no content to save)
-  const isComposerEmpty = React.useMemo(() => {
+  const isComposerEmpty = useMemo(() => {
     // Has multiple posts means it's not empty
     if (thread.posts.length > 1) return false
 
@@ -683,7 +685,7 @@ return true
   }, [thread.posts])
 
   // Clear the composer (discard current content)
-  const handleClearComposer = React.useCallback(() => {
+  const handleClearComposer = useCallback(() => {
     composerDispatch({
       type: 'clear',
       initInteractionSettings: preferences?.postInteractionSettings,
@@ -794,7 +796,7 @@ post.embed.media.video.status === 'error'
         ),
     )
 
-  const onPressPublish = React.useCallback(async () => {
+  const onPressPublish = useCallback(async () => {
     if (isPublishing) {
       return
     }
@@ -1015,7 +1017,7 @@ const onComposerPostPublish = useNonReactiveCallback(() => {
     onPressPublish()
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (publishOnUpload) {
       let erroredVideos = 0
       let uploadingVideos = 0
@@ -1181,7 +1183,7 @@ onContentSizeChange={onScrollViewContentSizeChange}
             onLayout={onScrollViewLayout}>
             {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
             {thread.posts.map((post, index) => (
-              <React.Fragment key={post.id + (composerState.draftId ?? '')}>
+              <Fragment key={post.id + (composerState.draftId ?? '')}>
                 <ComposerPost
                   post={post}
                   dispatch={composerDispatch}
@@ -1201,7 +1203,7 @@ />
                 {IS_WEBFooterSticky && post.id === activePost.id && (
                   <View style={styles.stickyFooterWeb}>{footer}</View>
                 )}
-              </React.Fragment>
+              </Fragment>
             ))}
           </Animated.ScrollView>
           {!IS_WEBFooterSticky && footer}
@@ -1273,7 +1275,7 @@ </BottomSheetPortalProvider>
   )
 }
 
-let ComposerPost = React.memo(function ComposerPost({
+let ComposerPost = memo(function ComposerPost({
   post,
   dispatch,
   textInput,
diff --git a/src/view/com/composer/KeyboardAccessory.tsx b/src/view/com/composer/KeyboardAccessory.tsx
--- a/src/view/com/composer/KeyboardAccessory.tsx
+++ b/src/view/com/composer/KeyboardAccessory.tsx
@@ -1,7 +1,6 @@
 import {View} from 'react-native'
 import {KeyboardStickyView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import type React from 'react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {IS_WEB} from '#/env'
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {memo, useMemo, useState} from 'react'
 import {
   findNodeHandle,
   type ImageStyle,
@@ -37,7 +37,7 @@ dispatch: (action: PostAction) => void
 }
 
 export let Gallery = (props: GalleryProps): React.ReactNode => {
-  const [containerInfo, setContainerInfo] = React.useState<Dimensions>()
+  const [containerInfo, setContainerInfo] = useState<Dimensions>()
 
   const onLayout = (evt: LayoutChangeEvent) => {
     const {width, height} = evt.nativeEvent.layout
@@ -55,7 +55,7 @@ ) : undefined}
     </View>
   )
 }
-Gallery = React.memo(Gallery)
+Gallery = memo(Gallery)
 
 interface GalleryInnerProps extends GalleryProps {
   containerInfo: Dimensions
@@ -64,39 +64,38 @@
 const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
   const {isMobile} = useWebMediaQueries()
 
-  const {altTextControlStyle, imageControlsStyle, imageStyle} =
-    React.useMemo(() => {
-      const side =
-        images.length === 1
-          ? 250
-          : (containerInfo.width - IMAGE_GAP * (images.length - 1)) /
-            images.length
+  const {altTextControlStyle, imageControlsStyle, imageStyle} = useMemo(() => {
+    const side =
+      images.length === 1
+        ? 250
+        : (containerInfo.width - IMAGE_GAP * (images.length - 1)) /
+          images.length
 
-      const isOverflow = isMobile && images.length > 2
+    const isOverflow = isMobile && images.length > 2
 
-      return {
-        altTextControlStyle: isOverflow
-          ? {left: 4, bottom: 4}
+    return {
+      altTextControlStyle: isOverflow
+        ? {left: 4, bottom: 4}
+        : !isMobile && images.length < 3
+          ? {left: 8, top: 8}
+          : {left: 4, top: 4},
+      imageControlsStyle: {
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        position: 'absolute' as const,
+        ...(isOverflow
+          ? {top: 4, right: 4, gap: 4}
           : !isMobile && images.length < 3
-            ? {left: 8, top: 8}
-            : {left: 4, top: 4},
-        imageControlsStyle: {
-          display: 'flex' as const,
-          flexDirection: 'row' as const,
-          position: 'absolute' as const,
-          ...(isOverflow
-            ? {top: 4, right: 4, gap: 4}
-            : !isMobile && images.length < 3
-              ? {top: 8, right: 8, gap: 8}
-              : {top: 4, right: 4, gap: 4}),
-          zIndex: 1,
-        },
-        imageStyle: {
-          height: side,
-          width: side,
-        },
-      }
-    }, [images.length, containerInfo, isMobile])
+            ? {top: 8, right: 8, gap: 8}
+            : {top: 4, right: 4, gap: 4}),
+        zIndex: 1,
+      },
+      imageStyle: {
+        height: side,
+        width: side,
+      },
+    }
+  }, [images.length, containerInfo, isMobile])
 
   return images.length !== 0 ? (
     <>
diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useMemo, useRef} from 'react'
 import {Pressable, useWindowDimensions, View} from 'react-native'
 import Picker from '@emoji-mart/react'
 import {msg} from '@lingui/core/macro'
@@ -52,9 +52,9 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
   const {_} = useLingui()
   const {height, width} = useWindowDimensions()
 
-  const isShiftDown = React.useRef(false)
+  const isShiftDown = useRef(false)
 
-  const position = React.useMemo(() => {
+  const position = useMemo(() => {
     if (pinToTop) {
       return {
         top: state.pos.top - PICKER_HEIGHT + HEIGHT_OFFSET - 10,
@@ -86,7 +86,7 @@ }
     }
   }, [state.pos, height, width, pinToTop])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!state.isOpen) return
 
     const onKeyDown = (e: KeyboardEvent) => {
diff --git a/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts b/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts
--- a/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts
+++ b/src/view/com/composer/text-input/web/useWebPreloadEmoji.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {init} from 'emoji-mart'
 
 /**
@@ -11,7 +11,7 @@ * Preload the emoji picker data to prevent flash.
  * {@link https://github.com/missive/emoji-mart/blob/16978d04a766eec6455e2e8bb21cd8dc0b3c7436/README.md?plain=1#L194}
  */
 export function useWebPreloadEmoji({immediate}: {immediate?: boolean} = {}) {
-  const preload = React.useCallback(async () => {
+  const preload = useCallback(async () => {
     if (loadRequested) return
     loadRequested = true
     try {
diff --git a/src/view/com/composer/videos/SubtitleFilePicker.tsx b/src/view/com/composer/videos/SubtitleFilePicker.tsx
--- a/src/view/com/composer/videos/SubtitleFilePicker.tsx
+++ b/src/view/com/composer/videos/SubtitleFilePicker.tsx
@@ -3,7 +3,6 @@ import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
-import type React from 'react'
 
 import {logger} from '#/logger'
 import * as Toast from '#/view/com/util/Toast'
diff --git a/src/view/com/home/HomeHeader.tsx b/src/view/com/home/HomeHeader.tsx
--- a/src/view/com/home/HomeHeader.tsx
+++ b/src/view/com/home/HomeHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo} from 'react'
 import {useNavigation} from '@react-navigation/native'
 
 import {type NavigationProp} from '#/lib/routes/types'
@@ -19,7 +19,7 @@ const {feeds, onSelect: onSelectProp} = props
   const {hasSession} = useSession()
   const navigation = useNavigation<NavigationProp>()
 
-  const hasPinnedCustom = React.useMemo<boolean>(() => {
+  const hasPinnedCustom = useMemo<boolean>(() => {
     if (!hasSession) return false
     return feeds.some(tab => {
       const isFollowing = tab.uri === 'following'
@@ -27,7 +27,7 @@ return !isFollowing
     })
   }, [feeds, hasSession])
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     const pinnedNames = feeds.map(f => f.displayName)
     if (!hasPinnedCustom) {
       return pinnedNames.concat('Feeds ✨')
@@ -35,11 +35,11 @@ }
     return pinnedNames
   }, [hasPinnedCustom, feeds])
 
-  const onPressFeedsLink = React.useCallback(() => {
+  const onPressFeedsLink = useCallback(() => {
     navigation.navigate('Feeds')
   }, [navigation])
 
-  const onSelect = React.useCallback(
+  const onSelect = useCallback(
     (index: number) => {
       if (!hasPinnedCustom && index === items.length - 1) {
         onPressFeedsLink()
diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -2,7 +2,6 @@ import {type JSX} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {memo, useState} from 'react'
 import {ActivityIndicator, StyleSheet} from 'react-native'
 import {
   Gesture,
@@ -472,4 +472,4 @@ 'worklet'
   return withSpring(value, {overshootClamping: true})
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree.
  *
  */
 
-import React, {useState} from 'react'
+import {memo, useState} from 'react'
 import {ActivityIndicator, StyleSheet} from 'react-native'
 import {
   Gesture,
@@ -363,4 +363,4 @@ width: rectWidth,
   }
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
@@ -1,6 +1,6 @@
 // default implementation fallback for web
 
-import React from 'react'
+import {memo} from 'react'
 import {View} from 'react-native'
 import {type PanGesture} from 'react-native-gesture-handler'
 import {type SharedValue} from 'react-native-reanimated'
@@ -44,4 +44,4 @@ const ImageItem = (_props: Props) => {
   return <View />
 }
 
-export default React.memo(ImageItem)
+export default memo(ImageItem)
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -7,7 +7,7 @@ *
  */
 // Original code copied and simplified from the link below as the codebase is currently not maintained:
 // https://github.com/jobtoday/react-native-image-viewing
-import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {
   LayoutAnimation,
   PixelRatio,
@@ -104,7 +104,7 @@ if (!activeLightbox && nextLightbox) {
     setActiveLightbox(nextLightbox)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!nextLightbox) {
       return
     }
@@ -150,7 +150,7 @@ }
     },
   )
 
-  const onFlyAway = React.useCallback(() => {
+  const onFlyAway = useCallback(() => {
     'worklet'
     openProgress.set(0)
     runOnJS(onRequestClose)()
@@ -216,7 +216,7 @@ const [isScaled, setIsScaled] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [imageIndex, setImageIndex] = useState(initialImageIndex)
   const [showControls, setShowControls] = useState(true)
-  const [isAltExpanded, setAltExpanded] = React.useState(false)
+  const [isAltExpanded, setAltExpanded] = useState(false)
   const dismissSwipeTranslateY = useSharedValue(0)
   const isFlyingAway = useSharedValue(false)
 
@@ -418,7 +418,7 @@ safeAreaRef: AnimatedRef<View>
   openProgress: SharedValue<number>
   dismissSwipeTranslateY: SharedValue<number>
 }) {
-  const [fetchedDims, setFetchedDims] = React.useState<Dimensions | null>(null)
+  const [fetchedDims, setFetchedDims] = useState<Dimensions | null>(null)
   const dims = fetchedDims ?? imageSrc.dimensions ?? imageSrc.thumbDimensions
   let imageAspect: number | undefined
   if (dims) {
@@ -432,7 +432,7 @@ const {
     width: widthDelayedForJSThreadOnly,
     height: heightDelayedForJSThreadOnly,
   } = useWindowDimensions()
-  const measureSafeArea = React.useCallback(() => {
+  const measureSafeArea = useCallback(() => {
     'worklet'
     let safeArea: Rect | null = measure(safeAreaRef)
     if (!safeArea) {
@@ -563,7 +563,7 @@ onPressSave: (uri: string) => void
   onPressShare: (uri: string) => void
 }) {
   const {alt: altText, uri} = images[index]
-  const isMomentumScrolling = React.useRef(false)
+  const isMomentumScrolling = useRef(false)
   return (
     <ScrollView
       style={styles.footerScrollView}
diff --git a/src/view/com/lists/ListMembers.tsx b/src/view/com/lists/ListMembers.tsx
--- a/src/view/com/lists/ListMembers.tsx
+++ b/src/view/com/lists/ListMembers.tsx
@@ -1,4 +1,4 @@
-import React, {type JSX, useCallback} from 'react'
+import {type JSX, useCallback, useMemo, useState} from 'react'
 import {
   Dimensions,
   type GestureResponderEvent,
@@ -57,7 +57,7 @@ desktopFixedHeightOffset?: number
 }) {
   const t = useTheme()
   const {_} = useLingui()
-  const [isRefreshing, setIsRefreshing] = React.useState(false)
+  const [isRefreshing, setIsRefreshing] = useState(false)
   const {openModal} = useModalControls()
   const {currentAccount} = useSession()
   const moderationOpts = useModerationOpts()
@@ -77,7 +77,7 @@ const isEmpty = !isFetching && !data?.pages[0].items.length
   const isOwner =
     currentAccount && data?.pages[0].list.creator.did === currentAccount.did
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     let items: any[] = []
     if (isFetched) {
       if (isEmpty && isError) {
@@ -102,7 +102,7 @@
   // events
   // =
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsRefreshing(true)
     try {
       await refetch()
@@ -112,7 +112,7 @@ }
     setIsRefreshing(false)
   }, [refetch, setIsRefreshing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetching || !hasNextPage || isError) return
     try {
       await fetchNextPage()
@@ -121,11 +121,11 @@ logger.error('Failed to load more lists', {message: err})
     }
   }, [isFetching, hasNextPage, isError, fetchNextPage])
 
-  const onPressRetryLoadMore = React.useCallback(() => {
+  const onPressRetryLoadMore = useCallback(() => {
     fetchNextPage()
   }, [fetchNextPage])
 
-  const onPressEditMembership = React.useCallback(
+  const onPressEditMembership = useCallback(
     (e: GestureResponderEvent, profile: bsky.profile.AnyProfileView) => {
       e.preventDefault()
       openModal({
@@ -141,7 +141,7 @@
   // rendering
   // =
 
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({item}: {item: any}) => {
       if (item === EMPTY_ITEM) {
         return renderEmptyState()
diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx
--- a/src/view/com/lists/MyLists.tsx
+++ b/src/view/com/lists/MyLists.tsx
@@ -1,4 +1,4 @@
-import React, {type JSX} from 'react'
+import {type JSX, useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   FlatList as RNFlatList,
@@ -45,12 +45,12 @@ const pal = usePalette('default')
   const t = useTheme()
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {data, isFetching, isFetched, isError, error, refetch} =
     useMyListsQuery(filter)
   const isEmpty = !isFetching && !data?.length
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     let items: any[] = []
     if (isError && isEmpty) {
       items = items.concat([ERROR_ITEM])
@@ -85,7 +85,7 @@
   // events
   // =
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -98,7 +98,7 @@
   // rendering
   // =
 
-  const renderItemInner = React.useCallback(
+  const renderItemInner = useCallback(
     ({item, index}: {item: any; index: number}) => {
       if (item === EMPTY) {
         return (
diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx
--- a/src/view/com/modals/UserAddRemoveLists.tsx
+++ b/src/view/com/modals/UserAddRemoveLists.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
@@ -56,7 +56,7 @@ const onPressDone = useCallback(() => {
     closeModal()
   }, [closeModal])
 
-  const listStyle = React.useMemo(() => {
+  const listStyle = useMemo(() => {
     if (IS_WEB_MOBILE) {
       return [pal.border, {height: screenHeight / 2}]
     } else if (IS_WEB) {
@@ -141,8 +141,8 @@ }) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const [isProcessing, setIsProcessing] = React.useState(false)
-  const membership = React.useMemo(
+  const [isProcessing, setIsProcessing] = useState(false)
+  const membership = useMemo(
     () => getMembership(memberships, list.uri, subject),
     [memberships, list.uri, subject],
   )
diff --git a/src/view/com/notifications/NotificationFeed.tsx b/src/view/com/notifications/NotificationFeed.tsx
--- a/src/view/com/notifications/NotificationFeed.tsx
+++ b/src/view/com/notifications/NotificationFeed.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   type ListRenderItemInfo,
@@ -45,7 +45,7 @@ ListHeaderComponent?: ListProps['ListHeaderComponent']
   refreshNotifications: () => Promise<void>
 }) {
   const initialNumToRender = useInitialNumToRender()
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const trackPostView = usePostViewTracking('Notifications')
@@ -70,7 +70,7 @@ // the `.find()` won't need to go any further than the first page -sfn
   const isEmpty =
     !isFetching && !data?.pages.find(page => page.items.length > 0)
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     let arr: any[] = []
     if (isFetched) {
       if (isEmpty) {
@@ -89,7 +89,7 @@ }
     return arr
   }, [isFetched, isError, isEmpty, data])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     try {
       setIsPTRing(true)
       await refreshNotifications()
@@ -102,7 +102,7 @@ setIsPTRing(false)
     }
   }, [refreshNotifications, setIsPTRing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetching || !hasNextPage || isError) return
 
     try {
@@ -112,11 +112,11 @@ logger.error('Failed to load more notifications', {message: err})
     }
   }, [isFetching, hasNextPage, isError, fetchNextPage])
 
-  const onPressRetryLoadMore = React.useCallback(() => {
+  const onPressRetryLoadMore = useCallback(() => {
     fetchNextPage()
   }, [fetchNextPage])
 
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({item, index}: ListRenderItemInfo<any>) => {
       if (item === EMPTY_FEED_ITEM) {
         return (
@@ -150,7 +150,7 @@ },
     [moderationOpts, _, onPressRetryLoadMore, filter],
   )
 
-  const FeedFooter = React.useCallback(
+  const FeedFooter = useCallback(
     () =>
       isFetchingNextPage ? (
         <View style={styles.feedFooter}>
@@ -162,7 +162,7 @@ ),
     [isFetchingNextPage],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!enabled) {
       setIsPTRing(false)
     }
diff --git a/src/view/com/pager/PagerHeaderContext.tsx b/src/view/com/pager/PagerHeaderContext.tsx
--- a/src/view/com/pager/PagerHeaderContext.tsx
+++ b/src/view/com/pager/PagerHeaderContext.tsx
@@ -1,9 +1,9 @@
-import React, {useContext} from 'react'
+import {createContext, useContext, useMemo} from 'react'
 import {type SharedValue} from 'react-native-reanimated'
 
 import {IS_NATIVE} from '#/env'
 
-export const PagerHeaderContext = React.createContext<{
+export const PagerHeaderContext = createContext<{
   scrollY: SharedValue<number>
   headerHeight: number
 } | null>(null)
@@ -24,7 +24,7 @@ scrollY: SharedValue<number>
   headerHeight: number
   children: React.ReactNode
 }) {
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({scrollY, headerHeight}),
     [scrollY, headerHeight],
   )
diff --git a/src/view/com/posts/CustomFeedEmptyState.tsx b/src/view/com/posts/CustomFeedEmptyState.tsx
--- a/src/view/com/posts/CustomFeedEmptyState.tsx
+++ b/src/view/com/posts/CustomFeedEmptyState.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
@@ -23,7 +23,7 @@ export function CustomFeedEmptyState() {
   const ax = useAnalytics()
   const feedFeedback = useFeedFeedbackContext()
   const {currentAccount} = useSession()
-  const hasLoggedDiscoverEmptyErrorRef = React.useRef(false)
+  const hasLoggedDiscoverEmptyErrorRef = useRef(false)
 
   useEffect(() => {
     // Log the empty feed error event
@@ -44,7 +44,7 @@ const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
-  const onPressFindAccounts = React.useCallback(() => {
+  const onPressFindAccounts = useCallback(() => {
     if (IS_WEB) {
       navigation.navigate('Search', {})
     } else {
diff --git a/src/view/com/posts/FeedShutdownMsg.tsx b/src/view/com/posts/FeedShutdownMsg.tsx
--- a/src/view/com/posts/FeedShutdownMsg.tsx
+++ b/src/view/com/posts/FeedShutdownMsg.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -38,7 +38,7 @@ )
   const hasFeedPinned = Boolean(feedConfig)
   const hasDiscoverPinned = Boolean(discoverFeedConfig?.pinned)
 
-  const onRemoveFeed = React.useCallback(async () => {
+  const onRemoveFeed = useCallback(async () => {
     try {
       if (feedConfig) {
         await removeFeed(feedConfig)
@@ -58,7 +58,7 @@ logger.error('Failed to update feeds', {message: err})
     }
   }, [removeFeed, feedConfig, _, hasDiscoverPinned, setSelectedFeed])
 
-  const onReplaceFeed = React.useCallback(async () => {
+  const onReplaceFeed = useCallback(async () => {
     try {
       await replaceFeedWithDiscover({
         forYouFeedConfig: feedConfig,
diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx
--- a/src/view/com/posts/FollowingEmptyState.tsx
+++ b/src/view/com/posts/FollowingEmptyState.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
@@ -20,7 +20,7 @@ const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
-  const onPressFindAccounts = React.useCallback(() => {
+  const onPressFindAccounts = useCallback(() => {
     if (IS_WEB) {
       navigation.navigate('Search', {})
     } else {
@@ -29,7 +29,7 @@ navigation.popToTop()
     }
   }, [navigation])
 
-  const onPressDiscoverFeeds = React.useCallback(() => {
+  const onPressDiscoverFeeds = useCallback(() => {
     navigation.navigate('Feeds')
   }, [navigation])
 
diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx
--- a/src/view/com/posts/FollowingEndOfFeed.tsx
+++ b/src/view/com/posts/FollowingEndOfFeed.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Dimensions, StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
@@ -19,7 +19,7 @@ const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
-  const onPressFindAccounts = React.useCallback(() => {
+  const onPressFindAccounts = useCallback(() => {
     if (IS_WEB) {
       navigation.navigate('Search', {})
     } else {
@@ -28,7 +28,7 @@ navigation.popToTop()
     }
   }, [navigation])
 
-  const onPressDiscoverFeeds = React.useCallback(() => {
+  const onPressDiscoverFeeds = useCallback(() => {
     navigation.navigate('Feeds')
   }, [navigation])
 
diff --git a/src/view/com/posts/PostFeedErrorMessage.tsx b/src/view/com/posts/PostFeedErrorMessage.tsx
--- a/src/view/com/posts/PostFeedErrorMessage.tsx
+++ b/src/view/com/posts/PostFeedErrorMessage.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -48,7 +48,7 @@ onPressTryAgain: () => void
   savedFeedConfig?: AppBskyActorDefs.SavedFeed
 }) {
   const {_: _l} = useLingui()
-  const knownError = React.useMemo(
+  const knownError = useMemo(
     () => detectKnownError(feedDesc, error),
     [feedDesc, error],
   )
@@ -101,7 +101,7 @@ }) {
   const pal = usePalette('default')
   const {_: _l} = useLingui()
   const navigation = useNavigation<NavigationProp>()
-  const msg = React.useMemo(
+  const msg = useMemo(
     () =>
       ({
         [KnownError.Unknown]: '',
@@ -135,15 +135,15 @@ const [ownerDid] = safeParseFeedgenUri(uri)
   const removePromptControl = Prompt.usePromptControl()
   const {mutateAsync: removeFeed} = useRemoveFeedMutation()
 
-  const onViewProfile = React.useCallback(() => {
+  const onViewProfile = useCallback(() => {
     navigation.navigate('Profile', {name: ownerDid})
   }, [navigation, ownerDid])
 
-  const onPressRemoveFeed = React.useCallback(() => {
+  const onPressRemoveFeed = useCallback(() => {
     removePromptControl.open()
   }, [removePromptControl])
 
-  const onRemoveFeed = React.useCallback(async () => {
+  const onRemoveFeed = useCallback(async () => {
     try {
       if (!savedFeedConfig) return
       await removeFeed(savedFeedConfig)
@@ -158,7 +158,7 @@ logger.error('Failed to remove feed', {message: err})
     }
   }, [removeFeed, _l, savedFeedConfig])
 
-  const cta = React.useMemo(() => {
+  const cta = useMemo(() => {
     switch (knownError) {
       case KnownError.FeedSignedInOnly: {
         return null
diff --git a/src/view/com/posts/ViewFullThread.tsx b/src/view/com/posts/ViewFullThread.tsx
--- a/src/view/com/posts/ViewFullThread.tsx
+++ b/src/view/com/posts/ViewFullThread.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {StyleSheet, View} from 'react-native'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '@atproto/api'
@@ -19,7 +19,7 @@ onIn: onHoverIn,
     onOut: onHoverOut,
   } = useInteractionState()
   const pal = usePalette('default')
-  const itemHref = React.useMemo(() => {
+  const itemHref = useMemo(() => {
     const urip = new AtUri(uri)
     return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
   }, [uri])
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -47,7 +47,7 @@ const navigation = useNavigation()
   const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
 
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {
     data: resolvedDid,
     isLoading: isDidLoading,
@@ -66,7 +66,7 @@
   const isError = !!resolveError || !!error
   const isMe = resolvedDid === currentAccount?.did
 
-  const followers = React.useMemo(() => {
+  const followers = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.followers)
     }
@@ -74,11 +74,11 @@ return []
   }, [data])
 
   // Track pagination events - fire for page 3+ (pages 1-2 may auto-load)
-  const paginationTrackingRef = React.useRef<{
+  const paginationTrackingRef = useRef<{
     did: string | undefined
     page: number
   }>({did: undefined, page: 0})
-  React.useEffect(() => {
+  useEffect(() => {
     const currentPageCount = data?.pages?.length || 0
     // Reset tracking when profile changes
     if (paginationTrackingRef.current.did !== resolvedDid) {
@@ -99,7 +99,7 @@ }
     paginationTrackingRef.current.page = currentPageCount
   }, [ax, data?.pages?.length, resolvedDid, followers.length])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -109,7 +109,7 @@ }
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || !!error) return
     try {
       await fetchNextPage()
@@ -118,14 +118,14 @@ logger.error('Failed to load more followers', {message: err})
     }
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
 
-  const renderItemWithContext = React.useCallback(
+  const renderItemWithContext = useCallback(
     ({item, index}: {item: ActorDefs.ProfileView; index: number}) =>
       renderItem({item, index, contextProfileDid: resolvedDid}),
     [resolvedDid],
   )
 
   // track pageview
-  React.useEffect(() => {
+  useEffect(() => {
     if (resolvedDid) {
       ax.metric('profile:followers:view', {
         contextProfileDid: resolvedDid,
@@ -135,11 +135,11 @@ }
   }, [ax, resolvedDid, isMe])
 
   // track seen items
-  const seenItemsRef = React.useRef<Set<string>>(new Set())
-  React.useEffect(() => {
+  const seenItemsRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
     seenItemsRef.current.clear()
   }, [resolvedDid])
-  const onItemSeen = React.useCallback(
+  const onItemSeen = useCallback(
     (item: ActorDefs.ProfileView) => {
       if (seenItemsRef.current.has(item.did)) {
         return
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -50,7 +50,7 @@ const initialNumToRender = useInitialNumToRender()
   const {currentAccount} = useSession()
   const navigation = useNavigation<NavigationProp>()
 
-  const onPressFindAccounts = React.useCallback(() => {
+  const onPressFindAccounts = useCallback(() => {
     if (IS_WEB) {
       navigation.navigate('Search', {})
     } else {
@@ -59,7 +59,7 @@ navigation.popToTop()
     }
   }, [navigation])
 
-  const [isPTRing, setIsPTRing] = React.useState(false)
+  const [isPTRing, setIsPTRing] = useState(false)
   const {
     data: resolvedDid,
     isLoading: isDidLoading,
@@ -78,7 +78,7 @@
   const isError = !!resolveError || !!error
   const isMe = resolvedDid === currentAccount?.did
 
-  const follows = React.useMemo(() => {
+  const follows = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.follows)
     }
@@ -86,11 +86,11 @@ return []
   }, [data])
 
   // Track pagination events - fire for page 3+ (pages 1-2 may auto-load)
-  const paginationTrackingRef = React.useRef<{
+  const paginationTrackingRef = useRef<{
     did: string | undefined
     page: number
   }>({did: undefined, page: 0})
-  React.useEffect(() => {
+  useEffect(() => {
     const currentPageCount = data?.pages?.length || 0
     // Reset tracking when profile changes
     if (paginationTrackingRef.current.did !== resolvedDid) {
@@ -111,7 +111,7 @@ }
     paginationTrackingRef.current.page = currentPageCount
   }, [ax, data?.pages?.length, resolvedDid, follows.length])
 
-  const onRefresh = React.useCallback(async () => {
+  const onRefresh = useCallback(async () => {
     setIsPTRing(true)
     try {
       await refetch()
@@ -121,7 +121,7 @@ }
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
-  const onEndReached = React.useCallback(async () => {
+  const onEndReached = useCallback(async () => {
     if (isFetchingNextPage || !hasNextPage || !!error) return
     try {
       await fetchNextPage()
@@ -130,14 +130,14 @@ logger.error('Failed to load more follows', {error: err})
     }
   }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
 
-  const renderItemWithContext = React.useCallback(
+  const renderItemWithContext = useCallback(
     ({item, index}: {item: ActorDefs.ProfileView; index: number}) =>
       renderItem({item, index, contextProfileDid: resolvedDid}),
     [resolvedDid],
   )
 
   // track pageview
-  React.useEffect(() => {
+  useEffect(() => {
     if (resolvedDid) {
       ax.metric('profile:following:view', {
         contextProfileDid: resolvedDid,
@@ -147,11 +147,11 @@ }
   }, [ax, resolvedDid, isMe])
 
   // track seen items
-  const seenItemsRef = React.useRef<Set<string>>(new Set())
-  React.useEffect(() => {
+  const seenItemsRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
     seenItemsRef.current.clear()
   }, [resolvedDid])
-  const onItemSeen = React.useCallback(
+  const onItemSeen = useCallback(
     (item: ActorDefs.ProfileView) => {
       if (seenItemsRef.current.has(item.did)) {
         return
diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx
--- a/src/view/com/profile/ProfileMenu.tsx
+++ b/src/view/com/profile/ProfileMenu.tsx
@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import {memo, useCallback, useMemo} from 'react'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -108,29 +108,29 @@ const goLiveDialogControl = useDialogControl()
   const goLiveDisabledDialogControl = useDialogControl()
   const addToStarterPacksDialogControl = useDialogControl()
 
-  const showLoggedOutWarning = React.useMemo(() => {
+  const showLoggedOutWarning = useMemo(() => {
     return (
       profile.did !== currentAccount?.did &&
       !!profile.labels?.find(label => label.val === '!no-unauthenticated')
     )
   }, [currentAccount, profile])
 
-  const invalidateProfileQuery = React.useCallback(() => {
+  const invalidateProfileQuery = useCallback(() => {
     queryClient.invalidateQueries({
       queryKey: profileQueryKey(profile.did),
     })
   }, [queryClient, profile.did])
 
-  const onPressAddToStarterPacks = React.useCallback(() => {
+  const onPressAddToStarterPacks = useCallback(() => {
     ax.metric('profile:addToStarterPack', {})
     addToStarterPacksDialogControl.open()
   }, [addToStarterPacksDialogControl])
 
-  const onPressShare = React.useCallback(() => {
+  const onPressShare = useCallback(() => {
     shareUrl(toShareUrl(makeProfileLink(profile)))
   }, [profile])
 
-  const onPressAddRemoveLists = React.useCallback(() => {
+  const onPressAddRemoveLists = useCallback(() => {
     openModal({
       name: 'user-add-remove-lists',
       subject: profile.did,
@@ -141,7 +141,7 @@ onRemove: invalidateProfileQuery,
     })
   }, [profile, openModal, invalidateProfileQuery])
 
-  const onPressMuteAccount = React.useCallback(async () => {
+  const onPressMuteAccount = useCallback(async () => {
     if (profile.viewer?.muted) {
       try {
         await queueUnmute()
@@ -165,7 +165,7 @@ }
     }
   }, [ax, profile.viewer?.muted, queueUnmute, _, queueMute])
 
-  const blockAccount = React.useCallback(async () => {
+  const blockAccount = useCallback(async () => {
     if (profile.viewer?.blocking) {
       try {
         await queueUnblock()
@@ -189,7 +189,7 @@ }
     }
   }, [ax, profile.viewer?.blocking, _, queueUnblock, queueBlock])
 
-  const onPressFollowAccount = React.useCallback(async () => {
+  const onPressFollowAccount = useCallback(async () => {
     try {
       await queueFollow()
       Toast.show(_(msg({message: 'Account followed', context: 'toast'})))
@@ -201,7 +201,7 @@ }
     }
   }, [_, ax, queueFollow])
 
-  const onPressUnfollowAccount = React.useCallback(async () => {
+  const onPressUnfollowAccount = useCallback(async () => {
     try {
       await queueUnfollow()
       Toast.show(_(msg({message: 'Account unfollowed', context: 'toast'})))
@@ -213,19 +213,19 @@ }
     }
   }, [_, ax, queueUnfollow])
 
-  const onPressReportAccount = React.useCallback(() => {
+  const onPressReportAccount = useCallback(() => {
     reportDialogControl.open()
   }, [reportDialogControl])
 
-  const onPressShareATUri = React.useCallback(() => {
+  const onPressShareATUri = useCallback(() => {
     shareText(`at://${profile.did}`)
   }, [profile.did])
 
-  const onPressShareDID = React.useCallback(() => {
+  const onPressShareDID = useCallback(() => {
     shareText(profile.did)
   }, [profile.did])
 
-  const onPressSearch = React.useCallback(() => {
+  const onPressSearch = useCallback(() => {
     navigation.navigate('ProfileSearch', {name: profile.handle})
   }, [navigation, profile.handle])
 
diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
--- a/src/view/com/profile/ProfileSubpageHeader.tsx
+++ b/src/view/com/profile/ProfileSubpageHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {Pressable, View} from 'react-native'
 import Animated, {
   measure,
@@ -60,7 +60,7 @@ const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
   const aviRef = useAnimatedRef()
 
-  const _openLightbox = React.useCallback(
+  const _openLightbox = useCallback(
     (uri: string, thumbRect: MeasuredDimensions | null) => {
       openLightbox({
         images: [
@@ -83,7 +83,7 @@ },
     [openLightbox],
   )
 
-  const onPressAvi = React.useCallback(() => {
+  const onPressAvi = useCallback(() => {
     if (
       avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
     ) {
diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx
--- a/src/view/com/util/BottomSheetCustomBackdrop.tsx
+++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx
@@ -8,7 +8,6 @@ } from 'react-native-reanimated'
 import {type BottomSheetBackdropProps} from '@discord/bottom-sheet/src'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 export function createCustomBackdrop(
   onClose?: () => void,
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
--- a/src/view/com/util/EmptyState.tsx
+++ b/src/view/com/util/EmptyState.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {isValidElement} from 'react'
 import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
 import {View} from 'react-native'
 
@@ -45,7 +45,7 @@ if (!icon) {
       return placeholderIcon
     }
 
-    if (React.isValidElement(icon)) {
+    if (isValidElement(icon)) {
       return icon
     }
 
@@ -77,7 +77,7 @@ a.self_center,
           a.rounded_full,
           a.mt_5xl,
           {height: 64, width: 64},
-          React.isValidElement(icon)
+          isValidElement(icon)
             ? a.bg_transparent
             : [isTabletOrDesktop && {marginTop: 50}],
         ]}>
diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx
--- a/src/view/com/util/MainScrollProvider.tsx
+++ b/src/view/com/util/MainScrollProvider.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react'
+import {useCallback, useEffect} from 'react'
 import {type NativeScrollEvent} from 'react-native'
 import {
   clamp,
@@ -25,7 +25,7 @@ const startDragOffset = useSharedValue<number | null>(null)
   const startMode = useSharedValue<number | null>(null)
   const didJustRestoreScroll = useSharedValue<boolean>(false)
 
-  const setMode = React.useCallback(
+  const setMode = useCallback(
     (v: boolean) => {
       'worklet'
       headerMode.set(() =>
diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx
--- a/src/view/com/util/ViewSelector.tsx
+++ b/src/view/com/util/ViewSelector.tsx
@@ -1,4 +1,13 @@
-import React, {type JSX, useEffect, useState} from 'react'
+import {
+  forwardRef,
+  type JSX,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
@@ -25,7 +34,7 @@ export type ViewSelectorHandle = {
   scrollToTop: () => void
 }
 
-export const ViewSelector = React.forwardRef<
+export const ViewSelector = forwardRef<
   ViewSelectorHandle,
   {
     sections: string[]
@@ -61,14 +70,14 @@ ref,
 ) {
   const pal = usePalette('default')
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
-  const flatListRef = React.useRef<FlatList_INTERNAL>(null)
+  const flatListRef = useRef<FlatList_INTERNAL>(null)
 
   // events
   // =
 
-  const keyExtractor = React.useCallback((item: any) => item._reactKey, [])
+  const keyExtractor = useCallback((item: any) => item._reactKey, [])
 
-  const onPressSelection = React.useCallback(
+  const onPressSelection = useCallback(
     (index: number) => setSelectedIndex(clamp(index, 0, sections.length)),
     [setSelectedIndex, sections],
   )
@@ -76,7 +85,7 @@ useEffect(() => {
     onSelectView?.(selectedIndex)
   }, [selectedIndex, onSelectView])
 
-  React.useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({
     scrollToTop: () => {
       flatListRef.current?.scrollToOffset({offset: 0})
     },
@@ -85,7 +94,7 @@
   // rendering
   // =
 
-  const renderItemInternal = React.useCallback(
+  const renderItemInternal = useCallback(
     ({item}: {item: any}) => {
       if (item === HEADER_ITEM) {
         if (renderHeader) {
@@ -107,10 +116,7 @@ },
     [sections, selectedIndex, onPressSelection, renderHeader, renderItem],
   )
 
-  const data = React.useMemo(
-    () => [HEADER_ITEM, SELECTOR_ITEM, ...items],
-    [items],
-  )
+  const data = useMemo(() => [HEADER_ITEM, SELECTOR_ITEM, ...items], [items])
   return (
     <FlatList_INTERNAL
       // @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -12,7 +12,7 @@ * consistent layout. It also provides <CenteredView> for views that
  * need to match layout but which aren't scrolled.
  */
 
-import React from 'react'
+import {forwardRef} from 'react'
 import {
   type FlatList,
   type FlatListProps,
@@ -37,7 +37,7 @@
 /**
  * @deprecated use `Layout` components
  */
-export const CenteredView = React.forwardRef(function CenteredView(
+export const CenteredView = forwardRef(function CenteredView(
   {
     style,
     topBorder,
@@ -66,7 +66,7 @@ }
   return <View ref={ref} style={style} {...props} />
 })
 
-export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
+export const FlatList_INTERNAL = forwardRef(function FlatListImpl<ItemT>(
   {
     contentContainerStyle,
     style,
@@ -141,7 +141,7 @@
 /**
  * @deprecated use `Layout` components
  */
-export const ScrollView = React.forwardRef(function ScrollViewImpl(
+export const ScrollView = forwardRef(function ScrollViewImpl(
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
   ref: React.Ref<Animated.ScrollView>,
 ) {
diff --git a/src/view/com/util/WebAuxClickWrapper.tsx b/src/view/com/util/WebAuxClickWrapper.tsx
--- a/src/view/com/util/WebAuxClickWrapper.tsx
+++ b/src/view/com/util/WebAuxClickWrapper.tsx
@@ -1,5 +1,4 @@
 import {Platform} from 'react-native'
-import type React from 'react'
 
 const onMouseUp = (e: React.MouseEvent & {target: HTMLElement}) => {
   // Only handle whenever it is the middle button
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {
   ActivityIndicator,
   type GestureResponderEvent,
@@ -148,8 +148,8 @@ },
     },
   )
 
-  const [isLoading, setIsLoading] = React.useState(false)
-  const onPressWrapped = React.useCallback(
+  const [isLoading, setIsLoading] = useState(false)
+  const onPressWrapped = useCallback(
     async (event: GestureResponderEvent) => {
       event.stopPropagation()
       event.preventDefault()
@@ -160,7 +160,7 @@ },
     [onPress, withLoading],
   )
 
-  const getStyle = React.useCallback(
+  const getStyle = useCallback(
     (state: PressableStateCallbackType) => {
       const arr = [typeOuterStyle, styles.outer, style]
       if (state.pressed) {
@@ -173,7 +173,7 @@ },
     [typeOuterStyle, style],
   )
 
-  const renderChildern = React.useCallback(() => {
+  const renderChildern = useCallback(() => {
     if (!label) {
       return children
     }
diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx
--- a/src/view/com/util/layouts/LoggedOutLayout.tsx
+++ b/src/view/com/util/layouts/LoggedOutLayout.tsx
@@ -1,5 +1,4 @@
 import {ScrollView, StyleSheet, View} from 'react-native'
-import type React from 'react'
 
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {StyleSheet, type TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
@@ -57,7 +57,7 @@ )
     }
   }
 
-  const textProps = React.useMemo(() => {
+  const textProps = useMemo(() => {
     const typography = theme.typography[type]
     const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
 
diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx
--- a/src/view/icons/Logo.tsx
+++ b/src/view/icons/Logo.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {forwardRef} from 'react'
 import {type TextProps} from 'react-native'
 import Svg, {
   Defs,
@@ -20,7 +20,7 @@ fill?: PathProps['fill']
   style?: TextProps['style']
 } & Omit<SvgProps, 'style'>
 
-export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
+export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
   const t = useTheme()
   const {fill, ...rest} = props
   const gradient = fill === 'sky'
diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx
--- a/src/view/screens/CommunityGuidelines.tsx
+++ b/src/view/screens/CommunityGuidelines.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -28,7 +28,7 @@ const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx
--- a/src/view/screens/CopyrightPolicy.tsx
+++ b/src/view/screens/CopyrightPolicy.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -25,7 +25,7 @@ const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {ScrollView, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -28,9 +28,7 @@ export const DebugScreen = ({}: NativeStackScreenProps<
   CommonNavigatorParams,
   'Debug'
 >) => {
-  const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
-    'light',
-  )
+  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light')
   const onToggleColorScheme = () => {
     setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
   }
@@ -50,7 +48,7 @@ function DebugInner({}: {
   colorScheme: 'light' | 'dark'
   onToggleColorScheme: () => void
 }) {
-  const [currentView, setCurrentView] = React.useState<number>(0)
+  const [currentView, setCurrentView] = useState<number>(0)
   const pal = usePalette('default')
   const {_} = useLingui()
 
diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx
--- a/src/view/screens/DebugMod.tsx
+++ b/src/view/screens/DebugMod.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -65,13 +65,13 @@ CommonNavigatorParams,
   'DebugMod'
 >) => {
   const t = useTheme()
-  const [scenario, setScenario] = React.useState<string[]>(['label'])
-  const [scenarioSwitches, setScenarioSwitches] = React.useState<string[]>([])
-  const [label, setLabel] = React.useState<string[]>([LABEL_VALUES[0]])
-  const [target, setTarget] = React.useState<string[]>(['account'])
-  const [visibility, setVisiblity] = React.useState<string[]>(['warn'])
+  const [scenario, setScenario] = useState<string[]>(['label'])
+  const [scenarioSwitches, setScenarioSwitches] = useState<string[]>([])
+  const [label, setLabel] = useState<string[]>([LABEL_VALUES[0]])
+  const [target, setTarget] = useState<string[]>(['account'])
+  const [visibility, setVisiblity] = useState<string[]>(['warn'])
   const [customLabelDef, setCustomLabelDef] =
-    React.useState<ComAtprotoLabelDefs.LabelValueDefinition>({
+    useState<ComAtprotoLabelDefs.LabelValueDefinition>({
       identifier: 'custom',
       blurs: 'content',
       severity: 'alert',
@@ -84,7 +84,7 @@ description: 'A custom label created in this test environment',
         },
       ],
     })
-  const [view, setView] = React.useState<string[]>(['post'])
+  const [view, setView] = useState<string[]>(['post'])
   const labelStrings = useGlobalLabelStrings()
   const {currentAccount} = useSession()
 
@@ -101,7 +101,7 @@
   const did =
     isTargetMe && currentAccount ? currentAccount.did : 'did:web:bob.test'
 
-  const profile = React.useMemo(() => {
+  const profile = useMemo(() => {
     const mockedProfile = mock.profileViewBasic({
       handle: `bob.test`,
       displayName: 'Bob Robertson',
@@ -146,7 +146,7 @@ 'https://bsky.social/about/images/social-card-default-gradient.png'
     return mockedProfile
   }, [scenario, target, label, isSelfLabel, did, isFollowing, currentAccount])
 
-  const post = React.useMemo(() => {
+  const post = useMemo(() => {
     return mock.postView({
       record: mock.post({
         text: "This is the body of the post. It's where the text goes. You get the idea.",
@@ -195,7 +195,7 @@ },
     })
   }, [scenario, label, target, profile, isSelfLabel, did])
 
-  const replyNotif = React.useMemo(() => {
+  const replyNotif = useMemo(() => {
     const notif = mock.replyNotification({
       record: mock.post({
         text: "This is the body of the post. It's where the text goes. You get the idea.",
@@ -231,7 +231,7 @@ })
     return item
   }, [scenario, label, target, profile, isSelfLabel, did])
 
-  const followNotif = React.useMemo(() => {
+  const followNotif = useMemo(() => {
     const notif = mock.followNotification({
       author: profile,
       subjectDid: currentAccount?.did || '',
@@ -240,7 +240,7 @@ const [item] = groupNotifications([notif])
     return item
   }, [profile, currentAccount])
 
-  const modOpts = React.useMemo(() => {
+  const modOpts = useMemo(() => {
     return {
       userDid: isLoggedOut ? '' : isTargetMe ? did : 'did:web:alice.test',
       prefs: {
@@ -265,10 +265,10 @@ },
     }
   }, [label, visibility, noAdult, isLoggedOut, isTargetMe, did, customLabelDef])
 
-  const profileModeration = React.useMemo(() => {
+  const profileModeration = useMemo(() => {
     return moderateProfile(profile, modOpts)
   }, [profile, modOpts])
-  const postModeration = React.useMemo(() => {
+  const postModeration = useMemo(() => {
     return moderatePost(post, modOpts)
   }, [post, modOpts])
 
@@ -706,7 +706,7 @@ }
 
 function Toggler({label, children}: React.PropsWithChildren<{label: string}>) {
   const t = useTheme()
-  const [show, setShow] = React.useState(false)
+  const [show, setShow] = useState(false)
   return (
     <View style={a.mb_md}>
       <View
@@ -738,7 +738,7 @@ function SmallToggler({
   label,
   children,
 }: React.PropsWithChildren<{label: string}>) {
-  const [show, setShow] = React.useState(false)
+  const [show, setShow] = useState(false)
   return (
     <View>
       <View style={[a.flex_row]}>
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useMemo, useRef, useState} from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {type AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -108,8 +108,8 @@ export function FeedsScreen(_props: Props) {
   const pal = usePalette('default')
   const {openComposer} = useOpenComposer()
   const {isMobile} = useWebMediaQueries()
-  const [query, setQuery] = React.useState('')
-  const [isPTR, setIsPTR] = React.useState(false)
+  const [query, setQuery] = useState('')
+  const [isPTR, setIsPTR] = useState(false)
   const {
     data: savedFeeds,
     isPlaceholderData: isSavedFeedsPlaceholder,
@@ -135,20 +135,20 @@ isPending: isSearchPending,
     error: searchError,
   } = useSearchPopularFeedsMutation()
   const {hasSession} = useSession()
-  const listRef = React.useRef<ListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
 
   /**
    * A search query is present. We may not have search results yet.
    */
   const isUserSearching = query.length > 1
-  const debouncedSearch = React.useMemo(
+  const debouncedSearch = useMemo(
     () => debounce(q => search(q), 500), // debounce for 500ms
     [search],
   )
-  const onPressCompose = React.useCallback(() => {
+  const onPressCompose = useCallback(() => {
     openComposer({logContext: 'Fab'})
   }, [openComposer])
-  const onChangeQuery = React.useCallback(
+  const onChangeQuery = useCallback(
     (text: string) => {
       setQuery(text)
       if (text.length > 1) {
@@ -160,15 +160,15 @@ }
     },
     [setQuery, refetchPopularFeeds, debouncedSearch, resetSearch],
   )
-  const onPressCancelSearch = React.useCallback(() => {
+  const onPressCancelSearch = useCallback(() => {
     setQuery('')
     refetchPopularFeeds()
     resetSearch()
   }, [refetchPopularFeeds, setQuery, resetSearch])
-  const onSubmitQuery = React.useCallback(() => {
+  const onSubmitQuery = useCallback(() => {
     debouncedSearch(query)
   }, [query, debouncedSearch])
-  const onPullToRefresh = React.useCallback(async () => {
+  const onPullToRefresh = useCallback(async () => {
     setIsPTR(true)
     await Promise.all([
       refetchSavedFeeds().catch(_e => undefined),
@@ -176,7 +176,7 @@ refetchPopularFeeds().catch(_e => undefined),
     ])
     setIsPTR(false)
   }, [setIsPTR, refetchSavedFeeds, refetchPopularFeeds])
-  const onEndReached = React.useCallback(() => {
+  const onEndReached = useCallback(() => {
     if (
       isPopularFeedsFetching ||
       isUserSearching ||
@@ -194,12 +194,12 @@ fetchNextPopularFeedsPage,
   ])
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     let slices: FlatlistSlice[] = []
     const hasActualSavedCount =
       !isSavedFeedsPlaceholder ||
@@ -383,7 +383,7 @@ const searchBarIndex = items.findIndex(
     item => item.type === 'popularFeedsHeader',
   )
 
-  const onChangeSearchFocus = React.useCallback(
+  const onChangeSearchFocus = useCallback(
     (focus: boolean) => {
       if (focus && searchBarIndex > -1) {
         if (IS_NATIVE) {
@@ -408,7 +408,7 @@ },
     [searchBarIndex, isMobile],
   )
 
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({item}: {item: FlatlistSlice}) => {
       if (item.type === 'error') {
         return <ErrorMessage message={item.error} />
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react'
 import {ActivityIndicator, StyleSheet} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 
@@ -47,7 +47,7 @@ const {currentAccount} = useSession()
   const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
     usePinnedFeedsInfos()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (IS_WEB && !currentAccount) {
       const getParams = new URLSearchParams(window.location.search)
       const splash = getParams.get('splash')
@@ -106,7 +106,7 @@ preferences: UsePreferencesQueryResponse
   pinnedFeedInfos: SavedFeedSourceInfo[]
 }) {
   const ax = useAnalytics()
-  const allFeeds = React.useMemo(
+  const allFeeds = useMemo(
     () => pinnedFeedInfos.map(f => f.feedDescriptor),
     [pinnedFeedInfos],
   )
@@ -121,13 +121,13 @@
   useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
   useOTAUpdates()
 
-  React.useEffect(() => {
+  useEffect(() => {
     requestNotificationsPermission('Home')
   }, [requestNotificationsPermission])
 
-  const pagerRef = React.useRef<PagerRef>(null)
-  const lastPagerReportedIndexRef = React.useRef(selectedIndex)
-  React.useLayoutEffect(() => {
+  const pagerRef = useRef<PagerRef>(null)
+  const lastPagerReportedIndexRef = useRef(selectedIndex)
+  useLayoutEffect(() => {
     // Since the pager is not a controlled component, adjust it imperatively
     // if the selected index gets out of sync with what it last reported.
     // This is supposed to only happen on the web when you use the right nav.
@@ -140,7 +140,7 @@
   const {hasSession} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
@@ -158,7 +158,7 @@ }
     }),
   )
 
-  const onPageSelected = React.useCallback(
+  const onPageSelected = useCallback(
     (index: number) => {
       setMinimalShellMode(false)
       const maybeFeed = allFeeds[index]
@@ -179,11 +179,11 @@ },
     [ax, setSelectedFeed, setMinimalShellMode, allFeeds],
   )
 
-  const onPressSelected = React.useCallback(() => {
+  const onPressSelected = useCallback(() => {
     emitSoftReset()
   }, [])
 
-  const onPageScrollStateChanged = React.useCallback(
+  const onPageScrollStateChanged = useCallback(
     (state: 'idle' | 'dragging' | 'settling') => {
       'worklet'
       if (state === 'dragging') {
@@ -195,7 +195,7 @@ )
 
   const [demoMode] = useDemoMode()
 
-  const renderTabBar = React.useCallback(
+  const renderTabBar = useCallback(
     (props: RenderTabBarFnProps) => {
       if (demoMode) {
         return (
@@ -222,15 +222,15 @@ },
     [onPressSelected, pinnedFeedInfos, demoMode],
   )
 
-  const renderFollowingEmptyState = React.useCallback(() => {
+  const renderFollowingEmptyState = useCallback(() => {
     return <FollowingEmptyState />
   }, [])
 
-  const renderCustomFeedEmptyState = React.useCallback(() => {
+  const renderCustomFeedEmptyState = useCallback(() => {
     return <CustomFeedEmptyState />
   }, [])
 
-  const homeFeedParams = React.useMemo<FeedParams>(() => {
+  const homeFeedParams = useMemo<FeedParams>(() => {
     return {
       mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
       mergeFeedSources: preferences.feedViewPrefs.lab_mergeFeedEnabled
diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx
--- a/src/view/screens/NotFound.tsx
+++ b/src/view/screens/NotFound.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -25,13 +25,13 @@ const navigation = useNavigation<NavigationProp>()
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
   const canGoBack = navigation.canGoBack()
-  const onPressHome = React.useCallback(() => {
+  const onPressHome = useCallback(() => {
     if (canGoBack) {
       navigation.goBack()
     } else {
diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx
--- a/src/view/screens/PrivacyPolicy.tsx
+++ b/src/view/screens/PrivacyPolicy.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -25,7 +25,7 @@ const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useRef, useState} from 'react'
 import {View} from 'react-native'
 
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -18,11 +18,9 @@ const withMenu = Dialog.useDialogControl()
   const testDialog = Dialog.useDialogControl()
   const {closeAllDialogs} = useDialogStateControlContext()
   const unmountTestDialog = Dialog.useDialogControl()
-  const [reducedMotionEnabled, setReducedMotionEnabled] =
-    React.useState<boolean>()
-  const [shouldRenderUnmountTest, setShouldRenderUnmountTest] =
-    React.useState(false)
-  const unmountTestInterval = React.useRef<number>(undefined)
+  const [reducedMotionEnabled, setReducedMotionEnabled] = useState<boolean>()
+  const [shouldRenderUnmountTest, setShouldRenderUnmountTest] = useState(false)
+  const unmountTestInterval = useRef<number>(undefined)
 
   const onUnmountTestStartPressWithClose = () => {
     setShouldRenderUnmountTest(true)
diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx
--- a/src/view/screens/Storybook/Forms.tsx
+++ b/src/view/screens/Storybook/Forms.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useRef, useState} from 'react'
 import {type TextInput, View} from 'react-native'
 
 import {APP_LANGUAGES} from '#/lib/../locale/languages'
@@ -16,21 +16,21 @@ import * as Select from '#/components/Select'
 import {H1, H3} from '#/components/Typography'
 
 export function Forms() {
-  const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
-  const [toggleGroupBValues, setToggleGroupBValues] = React.useState(['a', 'b'])
-  const [toggleGroupCValues, setToggleGroupCValues] = React.useState(['a', 'b'])
-  const [toggleGroupDValues, setToggleGroupDValues] = React.useState(['warn'])
-  const [segmentedControlValue, setSegmentedControlValue] = React.useState<
+  const [toggleGroupAValues, setToggleGroupAValues] = useState(['a'])
+  const [toggleGroupBValues, setToggleGroupBValues] = useState(['a', 'b'])
+  const [toggleGroupCValues, setToggleGroupCValues] = useState(['a', 'b'])
+  const [toggleGroupDValues, setToggleGroupDValues] = useState(['warn'])
+  const [segmentedControlValue, setSegmentedControlValue] = useState<
     'hide' | 'warn' | 'show'
   >('warn')
 
-  const [value, setValue] = React.useState('')
-  const [date, setDate] = React.useState('2001-01-01')
-  const [countryCode, setCountryCode] = React.useState<CountryCode>('US')
-  const [phoneNumber, setPhoneNumber] = React.useState('')
-  const [lang, setLang] = React.useState('en')
+  const [value, setValue] = useState('')
+  const [date, setDate] = useState('2001-01-01')
+  const [countryCode, setCountryCode] = useState<CountryCode>('US')
+  const [phoneNumber, setPhoneNumber] = useState('')
+  const [lang, setLang] = useState('en')
 
-  const inputRef = React.useRef<TextInput>(null)
+  const inputRef = useRef<TextInput>(null)
 
   return (
     <View style={[a.gap_4xl, a.align_start]}>
diff --git a/src/view/screens/Storybook/ListContained.tsx b/src/view/screens/Storybook/ListContained.tsx
--- a/src/view/screens/Storybook/ListContained.tsx
+++ b/src/view/screens/Storybook/ListContained.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo, useRef, useState} from 'react'
 import {View} from 'react-native'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
@@ -8,10 +8,10 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
 
 export function ListContained() {
-  const [animated, setAnimated] = React.useState(false)
-  const ref = React.useRef<ListMethods>(null)
+  const [animated, setAnimated] = useState(false)
+  const ref = useRef<ListMethods>(null)
 
-  const data = React.useMemo(() => {
+  const data = useMemo(() => {
     return Array.from({length: 100}, (_, i) => ({
       id: i,
       text: `Message ${i}`,
diff --git a/src/view/screens/Storybook/Storybook.tsx b/src/view/screens/Storybook/Storybook.tsx
--- a/src/view/screens/Storybook/Storybook.tsx
+++ b/src/view/screens/Storybook/Storybook.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
@@ -28,7 +28,7 @@ import {Typography} from './Typography'
 
 export default function Storybook() {
   const {setColorMode, setDarkTheme} = useSetThemePrefs()
-  const [showContainedList, setShowContainedList] = React.useState(false)
+  const [showContainedList, setShowContainedList] = useState(false)
   const navigation = useNavigation<NavigationProp>()
   const requestDeviceGeolocation = useRequestDeviceGeolocation()
   const {setDeviceGeolocation} = useDeviceGeolocationApi()
diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx
--- a/src/view/screens/Support.tsx
+++ b/src/view/screens/Support.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -25,7 +25,7 @@ const setMinimalShellMode = useSetMinimalShellMode()
   const {_} = useLingui()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx
--- a/src/view/screens/TermsOfService.tsx
+++ b/src/view/screens/TermsOfService.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -25,7 +25,7 @@ const setMinimalShellMode = useSetMinimalShellMode()
   const {_} = useLingui()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
diff --git a/src/view/shell/Composer.ios.tsx b/src/view/shell/Composer.ios.tsx
--- a/src/view/shell/Composer.ios.tsx
+++ b/src/view/shell/Composer.ios.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect, useRef} from 'react'
 import {Modal, View} from 'react-native'
 
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -14,9 +14,9 @@ const state = useComposerState()
   const ref = useComposerCancelRef()
 
   const open = !!state
-  const prevOpen = React.useRef(open)
+  const prevOpen = useRef(open)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (open && !prevOpen.current) {
       setFullyExpandedCount(c => c + 1)
     } else if (!open && prevOpen.current) {
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
@@ -41,23 +41,20 @@ const {isModalActive} = useModals()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
-  const [pickerState, setPickerState] = React.useState<EmojiPickerState>({
+  const [pickerState, setPickerState] = useState<EmojiPickerState>({
     isOpen: false,
     pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
   })
 
-  const onOpenPicker = React.useCallback(
-    (pos: EmojiPickerPosition | undefined) => {
-      if (!pos) return
-      setPickerState({
-        isOpen: true,
-        pos,
-      })
-    },
-    [],
-  )
+  const onOpenPicker = useCallback((pos: EmojiPickerPosition | undefined) => {
+    if (!pos) return
+    setPickerState({
+      isOpen: true,
+      pos,
+    })
+  }, [])
 
-  const onClosePicker = React.useCallback(() => {
+  const onClosePicker = useCallback(() => {
     setPickerState(prev => ({
       ...prev,
       isOpen: false,
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -1,4 +1,4 @@
-import React, {type ComponentProps, type JSX} from 'react'
+import {type ComponentProps, type JSX, memo, useCallback} from 'react'
 import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, plural} from '@lingui/core/macro'
@@ -130,7 +130,7 @@ </Text>
     </TouchableOpacity>
   )
 }
-DrawerProfileCard = React.memo(DrawerProfileCard)
+DrawerProfileCard = memo(DrawerProfileCard)
 export {DrawerProfileCard}
 
 let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
@@ -152,7 +152,7 @@
   // events
   // =
 
-  const onPressTab = React.useCallback(
+  const onPressTab = useCallback(
     (tab: 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile') => {
       const state = navigation.getState()
       setDrawerOpen(false)
@@ -193,48 +193,45 @@ },
     [navigation, setDrawerOpen, currentAccount],
   )
 
-  const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
+  const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
 
-  const onPressSearch = React.useCallback(
-    () => onPressTab('Search'),
-    [onPressTab],
-  )
+  const onPressSearch = useCallback(() => onPressTab('Search'), [onPressTab])
 
-  const onPressMessages = React.useCallback(
+  const onPressMessages = useCallback(
     () => onPressTab('Messages'),
     [onPressTab],
   )
 
-  const onPressNotifications = React.useCallback(
+  const onPressNotifications = useCallback(
     () => onPressTab('Notifications'),
     [onPressTab],
   )
 
-  const onPressProfile = React.useCallback(() => {
+  const onPressProfile = useCallback(() => {
     onPressTab('MyProfile')
   }, [onPressTab])
 
-  const onPressMyFeeds = React.useCallback(() => {
+  const onPressMyFeeds = useCallback(() => {
     navigation.navigate('Feeds')
     setDrawerOpen(false)
   }, [navigation, setDrawerOpen])
 
-  const onPressLists = React.useCallback(() => {
+  const onPressLists = useCallback(() => {
     navigation.navigate('Lists')
     setDrawerOpen(false)
   }, [navigation, setDrawerOpen])
 
-  const onPressBookmarks = React.useCallback(() => {
+  const onPressBookmarks = useCallback(() => {
     navigation.navigate('Bookmarks')
     setDrawerOpen(false)
   }, [navigation, setDrawerOpen])
 
-  const onPressSettings = React.useCallback(() => {
+  const onPressSettings = useCallback(() => {
     navigation.navigate('Settings')
     setDrawerOpen(false)
   }, [navigation, setDrawerOpen])
 
-  const onPressFeedback = React.useCallback(() => {
+  const onPressFeedback = useCallback(() => {
     Linking.openURL(
       FEEDBACK_FORM_URL({
         email: currentAccount?.email,
@@ -243,7 +240,7 @@ }),
     )
   }, [currentAccount])
 
-  const onPressHelp = React.useCallback(() => {
+  const onPressHelp = useCallback(() => {
     Linking.openURL(HELP_DESK_URL)
   }, [])
 
@@ -321,7 +318,7 @@ />
     </View>
   )
 }
-DrawerContent = React.memo(DrawerContent)
+DrawerContent = memo(DrawerContent)
 export {DrawerContent}
 
 let DrawerFooter = ({
@@ -375,7 +372,7 @@ </Button>
     </View>
   )
 }
-DrawerFooter = React.memo(DrawerFooter)
+DrawerFooter = memo(DrawerFooter)
 
 interface MenuItemProps extends ComponentProps<typeof PressableScale> {
   icon: JSX.Element
@@ -408,7 +405,7 @@ onPress={onPress}
     />
   )
 }
-SearchMenuItem = React.memo(SearchMenuItem)
+SearchMenuItem = memo(SearchMenuItem)
 
 let HomeMenuItem = ({
   isActive,
@@ -434,7 +431,7 @@ onPress={onPress}
     />
   )
 }
-HomeMenuItem = React.memo(HomeMenuItem)
+HomeMenuItem = memo(HomeMenuItem)
 
 let ChatMenuItem = ({
   isActive,
@@ -460,7 +457,7 @@ onPress={onPress}
     />
   )
 }
-ChatMenuItem = React.memo(ChatMenuItem)
+ChatMenuItem = memo(ChatMenuItem)
 
 let NotificationsMenuItem = ({
   isActive,
@@ -498,7 +495,7 @@ onPress={onPress}
     />
   )
 }
-NotificationsMenuItem = React.memo(NotificationsMenuItem)
+NotificationsMenuItem = memo(NotificationsMenuItem)
 
 let FeedsMenuItem = ({
   isActive,
@@ -524,7 +521,7 @@ onPress={onPress}
     />
   )
 }
-FeedsMenuItem = React.memo(FeedsMenuItem)
+FeedsMenuItem = memo(FeedsMenuItem)
 
 let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
   const {_} = useLingui()
@@ -538,7 +535,7 @@ onPress={onPress}
     />
   )
 }
-ListsMenuItem = React.memo(ListsMenuItem)
+ListsMenuItem = memo(ListsMenuItem)
 
 let BookmarksMenuItem = ({
   isActive,
@@ -564,7 +561,7 @@ onPress={onPress}
     />
   )
 }
-BookmarksMenuItem = React.memo(BookmarksMenuItem)
+BookmarksMenuItem = memo(BookmarksMenuItem)
 
 let ProfileMenuItem = ({
   isActive,
@@ -589,7 +586,7 @@ onPress={onPress}
     />
   )
 }
-ProfileMenuItem = React.memo(ProfileMenuItem)
+ProfileMenuItem = memo(ProfileMenuItem)
 
 let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
   const {_} = useLingui()
@@ -602,7 +599,7 @@ onPress={onPress}
     />
   )
 }
-SettingsMenuItem = React.memo(SettingsMenuItem)
+SettingsMenuItem = memo(SettingsMenuItem)
 
 function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
   const t = useTheme()
diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx
--- a/src/view/shell/NavSignupCard.tsx
+++ b/src/view/shell/NavSignupCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {memo, useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -18,12 +18,12 @@ const {_} = useLingui()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
 
-  const showSignIn = React.useCallback(() => {
+  const showSignIn = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
   }, [requestSwitchToAccount, closeAllActiveElements])
 
-  const showCreateAccount = React.useCallback(() => {
+  const showCreateAccount = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'new'})
     // setShowLoggedOut(true)
@@ -71,5 +71,5 @@ </View>
     </View>
   )
 }
-NavSignupCard = React.memo(NavSignupCard)
+NavSignupCard = memo(NavSignupCard)
 export {NavSignupCard}
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {msg, plural} from '@lingui/core/macro'
@@ -61,18 +61,18 @@
   const unreadMessageCount = useUnreadMessageCount()
   const notificationCountStr = useUnreadNotifications()
 
-  const showSignIn = React.useCallback(() => {
+  const showSignIn = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
   }, [requestSwitchToAccount, closeAllActiveElements])
 
-  const showCreateAccount = React.useCallback(() => {
+  const showCreateAccount = useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'new'})
     // setShowLoggedOut(true)
   }, [requestSwitchToAccount, closeAllActiveElements])
 
-  const onLongPressProfile = React.useCallback(() => {
+  const onLongPressProfile = useCallback(() => {
     accountSwitchControl.open()
   }, [accountSwitchControl])