Unblock React Compiler for 6 components by removing render-phase ref access (#11544)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lib/hooks/useAnimatedValue.ts

@@ -1,12 +1,12 @@
-import {useRef} from 'react'
+import {useState} from 'react'
 import {Animated} from 'react-native'
 
 export function useAnimatedValue(initialValue: number) {
-  const lazyRef = useRef<Animated.Value>(undefined)
-
-  if (lazyRef.current === undefined) {
-    lazyRef.current = new Animated.Value(initialValue)
-  }
-
-  return lazyRef.current
+  /*
+   * A lazy `useState` initialiser rather than a lazily-populated ref: both
+   * construct once and keep the same instance, but reading a ref during render
+   * is a Rules of React violation.
+   */
+  const [value] = useState(() => new Animated.Value(initialValue))
+  return value
 }

src/lib/react-query.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {AppState, type AppStateStatus} from 'react-native'
 import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
 import {
@@ -168,8 +168,8 @@ function QueryProviderInner({
   children: React.ReactNode
   currentDid: string | undefined
 }) {
-  const initialDid = useRef(currentDid)
-  if (currentDid !== initialDid.current) {
+  const [initialDid] = useState(currentDid)
+  if (currentDid !== initialDid) {
     throw Error(
       'Something is very wrong. Expected did to be stable due to key above.',
     )