Unblock React Compiler for 5 components by removing render-phase mutation

Four shapes of writing to something the compiler has frozen:

- Reanimated shared values written as `sv.value = x`, now `sv.set(x)` to match
  the sibling calls already in those files
- debug globals installed during render, now installed in an effect
- a running flag mutated inside a `.filter()` callback, now a plain loop
- tagging metadata inside a hook, now a module-scope helper

Skipped components: 125 -> 120. Composer also loses its Immutability error but
stays skipped on a Refs error underneath.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tomek Zawadzki
2026-08-25 16:14:56 +02:00
parent f87fdd2ea2
commit a6772f0083
6 changed files with 45 additions and 40 deletions
+7 -3
View File
@@ -11,14 +11,18 @@ import {
* Thin `useMemo` wrapper that marks the metadata as memoized and provides a * Thin `useMemo` wrapper that marks the metadata as memoized and provides a
* type guard. * type guard.
*/ */
export function useMeta(metadata?: MergeableMetadata) { function markMemoized<T extends MergeableMetadata>(m: T): T {
const m = useMemo(() => metadata, [metadata])
if (!m) return
// @ts-expect-error // @ts-expect-error
m.__meta = true m.__meta = true
return m return m
} }
export function useMeta(metadata?: MergeableMetadata) {
const m = useMemo(() => metadata, [metadata])
if (!m) return
return markMemoized(m)
}
export function accountToSessionMetadata( export function accountToSessionMetadata(
account: SessionAccount | undefined, account: SessionAccount | undefined,
): SessionMetadata | undefined { ): SessionMetadata | undefined {
+2 -2
View File
@@ -362,9 +362,9 @@ export function Composer({
onKeyPress={IS_WEB ? onKeyPressWeb : undefined} onKeyPress={IS_WEB ? onKeyPressWeb : undefined}
onScroll={e => { onScroll={e => {
if (IS_WEB) { if (IS_WEB) {
inputScrollSharedValue.value = (e.target as any).scrollTop inputScrollSharedValue.set((e.target as any).scrollTop)
} else { } else {
inputScrollSharedValue.value = e.nativeEvent.contentOffset.y inputScrollSharedValue.set(e.nativeEvent.contentOffset.y)
} }
}} }}
// @ts-expect-error web only // @ts-expect-error web only
+5 -4
View File
@@ -116,14 +116,15 @@ function Inner({
setActiveNux(undefined) setActiveNux(undefined)
}, [activeNux, setActiveNux]) }, [activeNux, setActiveNux])
if (__DEV__ && typeof window !== 'undefined') { useEffect(() => {
// @ts-expect-error if (!__DEV__ || typeof window === 'undefined') return
// @ts-expect-error debug only
window.clearNuxDialog = (id: Nux) => { window.clearNuxDialog = (id: Nux) => {
if (!__DEV__ || !id) return if (!id) return
resetNuxs([id]) resetNuxs([id])
unsnooze() unsnooze()
} }
} }, [resetNuxs])
useEffect(() => { useEffect(() => {
if (snoozed) return // comment this out to test if (snoozed) return // comment this out to test
+13 -15
View File
@@ -101,25 +101,23 @@ function ContentHiderActive({
} }
} }
/*
* A plain loop rather than `.filter()`: the running flag has to be mutated
* from the enclosing scope, which React Compiler cannot lower inside a
* callback. Keeps only the first adult-content label, as before.
*/
const selfBlurCauses = []
let hasAdultContentLabel = false let hasAdultContentLabel = false
const selfBlurNames = modui.blurs for (const cause of modui.blurs) {
.filter(cause => { if (cause.type !== 'label') continue
if (cause.type !== 'label') { if (cause.source.type !== 'user') continue
return false
}
if (cause.source.type !== 'user') {
return false
}
if (ADULT_CONTENT_LABELS.includes(cause.label.val as AdultSelfLabel)) { if (ADULT_CONTENT_LABELS.includes(cause.label.val as AdultSelfLabel)) {
if (hasAdultContentLabel) { if (hasAdultContentLabel) continue
return false
}
hasAdultContentLabel = true hasAdultContentLabel = true
} }
return true selfBlurCauses.push(cause)
}) }
.slice(0, 2) const selfBlurNames = selfBlurCauses.slice(0, 2).map(cause => {
.map(cause => {
if (cause.type !== 'label') { if (cause.type !== 'label') {
return return
} }
+4 -2
View File
@@ -683,9 +683,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const bundle = state.currentBundleState.bundle as unknown as const bundle = state.currentBundleState.bundle as unknown as
SessionBundle | PublicSessionBundle SessionBundle | PublicSessionBundle
useEffect(() => {
if (!__DEV__ || !IS_WEB) return
// @ts-expect-error window type is not declared, debug only // @ts-expect-error window type is not declared, debug only
// eslint-disable-next-line react-hooks/immutability window.bundle = bundle
if (__DEV__ && IS_WEB) window.bundle = bundle }, [bundle])
const currentBundleRef = useRef(bundle) const currentBundleRef = useRef(bundle)
/* /*
+1 -1
View File
@@ -332,7 +332,7 @@ export function TabBar({
syncScrollState.set('unsynced') syncScrollState.set('unsynced')
}} }}
onScroll={e => { onScroll={e => {
scrollX.value = Math.round(e.nativeEvent.contentOffset.x) scrollX.set(Math.round(e.nativeEvent.contentOffset.x))
}}> }}>
<Animated.View <Animated.View
onLayout={e => { onLayout={e => {