Skip to content

setState-during-render violation in LegendListInner2 causes crash with React 19 #502

Description

@Pnlvfx

Error

```
Cannot update a component (ContainersLayer2) while rendering a different component (ForwardRef(LegendListInner2)).
```

Full stack trace:
```
scheduleUpdateOnFiber
forceStoreRerender
subscribe$argument_0
set$ ← react-native.mjs:219
resetInitialRenderState ← react-native.mjs:1199
LegendListInner2 ← react-native.mjs:7003
```

Reproduction

We have a chat app with a message list using dataKey tied to a session ID. The screen stays mounted and the user can navigate to a different chat session via navigation.popTo, which keeps the same screen alive but changes the session ID, triggering a dataKey change on the list.

That is exactly when the crash happens: the list detects a fresh data change, calls resetInitialRenderState during render, which calls set$() synchronously, which triggers ContainersLayer2 subscribers via useSyncExternalStore. React 19 treats this as an illegal state update and throws.

Strict Mode may also contribute since it intentionally double-invokes renders, making these violations more likely to surface.

Context

We tried to dig into the code to find a fix but it turned out more complex than expected.

While investigating, we also ran the React Compiler health check and found 160+ violations across the codebase including setState-during-render, reading refs during render, and similar patterns. This might be worth a broader cleanup.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions