Create codemod for addressing ESLint warnings (#10032)

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     }
   }, [])
 
-  const ctx = React.useMemo(() => {
+  const ctx = useMemo(() => {
     return {
       reduceMotionEnabled,
       /**

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 @@ import {useAgent, useSession} from '../session'
 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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 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) {

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 @@ interface IDialogControlContext {
   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 @@ DialogControlContext.displayName = 'DialogControlContext'
  * 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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     }
   }, [])
 
-  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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     }
   }, [])
 
-  const context = React.useMemo<IDialogContext>(
+  const context = useMemo<IDialogContext>(
     () => ({
       activeDialogs,
       openDialogs,
     }),
     [activeDialogs, openDialogs],
   )
-  const controls = React.useMemo(
+  const controls = useMemo(
     () => ({
       closeAllDialogs,
       setDialogIsOpen,

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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useHomeBadge() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetHomeBadge() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }

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 @@ export type Lightbox = {
   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 @@ const LightboxControlContext = React.createContext<{
 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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLightbox() {
-  return React.useContext(LightboxContext)
+  return useContext(LightboxContext)
 }
 
 export function useLightboxControls() {
-  return React.useContext(LightboxControlContext)
+  return useContext(LightboxControlContext)
 }

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 @@ export function ConvoProvider({
   const appState = useAppState()
   const isActive = appState === 'active'
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       if (isActive) {
         convo.resume()
         markAsRead({convoId})
@@ -95,7 +102,7 @@ export function ConvoProvider({
     }, [isActive, convo, convoId, markAsRead]),
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return convo.on(event => {
       switch (event.type) {
         case 'invalidate-block-state': {

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 @@ const CurrentConvoIdContext = React.createContext<{
 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 @@ export function CurrentConvoIdProvider({
 }: {
   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],
   )

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 @@ export function MessagesEventBusProviderInner({
   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 @@ export function MessagesEventBusProviderInner({
     }
   }, [bus])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleAppStateChange = (nextAppState: string) => {
       if (nextAppState === 'active') {
         bus.resume()

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'

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',

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 @@ export type Modal =
   // Lists
   | UserAddRemoveListsModal
 
-const ModalContext = React.createContext<{
+const ModalContext = createContext<{
   isModalActive: boolean
   activeModals: Modal[]
 }>({
@@ -34,7 +34,7 @@ const ModalContext = React.createContext<{
 })
 ModalContext.displayName = 'ModalContext'
 
-const ModalControlContext = React.createContext<{
+const ModalControlContext = createContext<{
   openModal: (modal: Modal) => void
   closeModal: () => boolean
   closeAllModals: () => boolean
@@ -46,7 +46,7 @@ const ModalControlContext = React.createContext<{
 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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     return wasActive
   })
 
-  const state = React.useMemo(
+  const state = useMemo(
     () => ({
       isModalActive: activeModals.length > 0,
       activeModals,
@@ -74,7 +74,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [activeModals],
   )
 
-  const methods = React.useMemo(
+  const methods = useMemo(
     () => ({
       openModal,
       closeModal,
@@ -96,12 +96,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
  * @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)
 }

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'requireAltTextEnabled',
       nextRequireAltTextEnabled => {
@@ -46,9 +50,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useRequireAltTextEnabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetRequireAltTextEnabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ export function Provider({children}: {children: React.ReactNode}) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('disableAutoplay', nextDisableAutoplay => {
       setState(Boolean(nextDisableAutoplay))
     })
@@ -40,5 +44,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useAutoplayDisabled = () => React.useContext(stateContext)
-export const useSetAutoplayDisabled = () => React.useContext(setContext)
+export const useAutoplayDisabled = () => useContext(stateContext)
+export const useSetAutoplayDisabled = () => useContext(setContext)

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 @@ export function Provider({children}: {children: React.ReactNode}) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('disableHaptics', nextDisableHaptics => {
       setState(Boolean(nextDisableHaptics))
     })
@@ -40,5 +44,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useHapticsDisabled = () => React.useContext(stateContext)
-export const useSetHapticsDisabled = () => React.useContext(setContext)
+export const useHapticsDisabled = () => useContext(stateContext)
+export const useSetHapticsDisabled = () => useContext(setContext)

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 @@ type SetContext = (
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('externalEmbeds', nextExternalEmbeds => {
       setState(nextExternalEmbeds)
     })
@@ -52,9 +58,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useExternalEmbedsPrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetExternalEmbedPref() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ type ApiContext = {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setState],
   )
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       hidePost: ({uri}: {uri: string}) => {
         setStateWrapped(s => [...(s || []), uri])
@@ -45,7 +50,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setStateWrapped],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('hiddenPosts', nextHiddenPosts => {
       setState(nextHiddenPosts)
     })
@@ -59,9 +64,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useHiddenPosts() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useHiddenPostsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('useInAppBrowser', nextUseInAppBrowser => {
       setState(nextUseInAppBrowser)
     })
@@ -41,9 +47,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useInAppBrowser() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetInAppBrowser() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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'

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useKawaiiMode() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }

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 @@ interface StateContext {
   labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   labelDefs: {},
   labelers: [],
 })
@@ -23,5 +23,5 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLabelDefinitions() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }

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 @@ type ApiContext = {
   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 @@ const apiContext = React.createContext<ApiContext>({
 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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLanguagePrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useLanguagePrefsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
 
 export function getContentLanguages() {

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'largeAltBadgeEnabled',
       nextLargeAltBadgeEnabled => {
@@ -46,9 +50,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLargeAltBadgeEnabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetLargeAltBadgeEnabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ export function Provider({children}: {children: React.ReactNode}) {
     [setState],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('subtitlesEnabled', nextSubtitlesEnabled => {
       setState(Boolean(nextSubtitlesEnabled))
     })
@@ -40,5 +44,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useSubtitlesEnabled = () => React.useContext(stateContext)
-export const useSetSubtitlesEnabled = () => React.useContext(setContext)
+export const useSubtitlesEnabled = () => useContext(stateContext)
+export const useSetSubtitlesEnabled = () => useContext(setContext)

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 @@ type ApiContext = {
   ): 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 @@ function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
     },
     [key, _set],
   )
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(key, hidden => {
       _set(Boolean(hidden))
     })
@@ -60,11 +67,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   /*
    * 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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useTrendingSettings() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useTrendingSettingsApi() {
-  return React.useContext(ApiContext)
+  return useContext(ApiContext)
 }

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 @@ export function Provider({children}: {children: React.ReactNode}) {
     persisted.write('hasCheckedForStarterPack', v)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate(
       'hasCheckedForStarterPack',
       nextHasCheckedForStarterPack => {
@@ -38,5 +38,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useHasCheckedForStarterPack = () => React.useContext(stateContext)
-export const useSetHasCheckedForStarterPack = () => React.useContext(setContext)
+export const useHasCheckedForStarterPack = () => useContext(stateContext)
+export const useSetHasCheckedForStarterPack = () => useContext(setContext)

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 @@ export function useActorAutocompleteQuery(
         : undefined
       return res?.data.actors || []
     },
-    select: React.useCallback(
+    select: useCallback(
       (data: AppBskyActorDefs.ProfileViewBasic[]) => {
         return computeSuggestions({
           q: prefix,
@@ -67,7 +67,7 @@ export function useActorAutocompleteFn() {
   const moderationOpts = useModerationOpts()
   const agent = useAgent()
 
-  return React.useCallback(
+  return useCallback(
     async ({query, limit = 8}: {query: string; limit?: number}) => {
       query = query.toLowerCase()
       let res

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,

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 @@ interface ApiContext {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }, [])
 
   // periodic sync
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasSession || !checkUnreadRef.current) {
       return
     }
@@ -85,7 +92,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }, [hasSession])
 
   // listen for broadcasts
-  React.useEffect(() => {
+  useEffect(() => {
     const listener = ({data}: MessageEvent) => {
       cacheRef.current = {
         usableInFeed: false,
@@ -109,7 +116,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useUnreadNotifications() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useUnreadNotificationsApi() {
-  return React.useContext(apiContext)
+  return useContext(apiContext)
 }
 
 function countUnread(page: FeedPage) {

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 @@ export function usePostFeedQuery(
   const fetchLimit = MIN_POSTS
 
   // Make sure this doesn't invalidate unless really needed.
-  const selectArgs = React.useMemo(
+  const selectArgs = useMemo(
     () => ({
       feedTuners,
       moderationOpts,

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 ({

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 @@ export function useMyLabelersQuery({
   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 useMyLabelersQuery({
 
 export function useLabelDefinitionsQuery() {
   const labelers = useMyLabelersQuery()
-  return React.useMemo(() => {
+  return useMemo(() => {
     return {
       labelDefs: Object.fromEntries(
         (labelers.data || []).map(labeler => [

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 @@ export function useSearchPostsQuery({
 }) {
   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 @@ export function useSearchPostsQuery({
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,
     enabled: enabled ?? !!moderationOpts,
-    select: React.useCallback(
+    select: useCallback(
       (data: InfiniteData<AppBskyFeedSearchPosts.OutputSchema>) => {
         const {moderationOpts, isSearchingSpecificUser} = selectArgs
 

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 const createGetTrendsQueryKey = () => ['trends']
 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 @@ export function useGetTrendsQuery() {
       )
       return data
     },
-    select: React.useCallback(
+    select: useCallback(
       (data: AppBskyUnspeccedGetTrends.OutputSchema) => {
         return {
           trends: (data.trends ?? []).filter(t => {

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 @@ type SetContext = {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [colorMode, darkTheme],
   )
 
-  const setContextValue = React.useMemo(
+  const setContextValue = useMemo(
     () => ({
       setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
         setColorMode(_colorMode)
@@ -49,7 +45,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
       setDarkTheme(nextDarkTheme)
     })
@@ -72,9 +68,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useThemePrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetThemePrefs() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ type ControlsContext = {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     return wasOpen
   })
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       openComposer,
       closeComposer,
@@ -153,12 +153,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 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 @@ export function useComposerControls() {
  * @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])
 }

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 @@ export function useComposerKeyboardShortcut() {
   const isDrawerOpen = useIsDrawerOpen()
   const {hasSession} = useSession()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasSession) {
       return
     }

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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useIsDrawerSwipeDisabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetDrawerSwipeDisabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ type Controls = {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       : undefined,
   })
 
-  const controls = React.useMemo<Controls>(
+  const controls = useMemo<Controls>(
     () => ({
       setShowLoggedOut(show) {
         setState(s => ({
@@ -96,9 +96,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLoggedOutView() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useLoggedOutViewControls() {
-  return React.useContext(ControlsContext)
+  return useContext(ControlsContext)
 }

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 @@ type StateContext = {
 }
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   headerMode: {
     value: 0,
     addListener() {},
@@ -34,13 +34,13 @@ const stateContext = React.createContext<StateContext>({
   },
 })
 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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     },
     [headerMode, footerMode],
   )
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       headerMode,
       footerMode,
@@ -71,9 +71,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useMinimalShellMode() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetMinimalShellMode() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

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 @@ export type StateContext = persisted.Schema['onboarding'] & {
 }
 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 @@ function reducer(state: StateContext, action: Action): StateContext {
 }
 
 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 Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useOnboardingState() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useOnboardingDispatch() {
-  return React.useContext(dispatchContext)
+  return useContext(dispatchContext)
 }
 
 export function isOnboardingActive() {

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 @@ interface PostProgressState {
   error?: string
 }
 
-const PostProgressContext = React.createContext<PostProgressState>({
+const PostProgressContext = createContext<PostProgressState>({
   progress: 0,
   status: 'idle',
 })
@@ -15,5 +15,5 @@ PostProgressContext.displayName = 'PostProgressContext'
 export function Provider() {}
 
 export function usePostProgress() {
-  return React.useContext(PostProgressContext)
+  return useContext(PostProgressContext)
 }

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 @@ export type ProgressGuide =
   | 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 @@ const ProgressGuideControlContext = React.createContext<{
 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 @@ export function useProgressGuide(guide: ProgressGuideName) {
 }
 
 export function useProgressGuideControls() {
-  return React.useContext(ProgressGuideControlContext)
+  return useContext(ProgressGuideControlContext)
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
@@ -101,21 +101,21 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }, [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') {

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 @@ type StateContext = {
   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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useShellLayout() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }

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 @@ type StateContext =
   | 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 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useActiveStarterPack = () => React.useContext(stateContext)
-export const useSetActiveStarterPack = () => React.useContext(setContext)
+export const useActiveStarterPack = () => useContext(stateContext)
+export const useSetActiveStarterPack = () => useContext(setContext)

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 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useTickEveryMinute() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }

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 @@ type ApiContext = {
   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 @@ export function Provider({children}: {children: React.ReactNode}) {
     [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 Provider({children}: {children: React.ReactNode}) {
 }
 
 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 @@ export function useMergedThreadgateHiddenReplies({
   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 useMergedThreadgateHiddenReplies({
 
 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) {

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 @@ export function getActionHistory() {
 }
 
 export function useActionHistorySnapshot() {
-  return React.useState(() => getActionHistory())[0]
+  return useState(() => getActionHistory())[0]
 }
 
 export function like(postUris: string[]) {