React Activity: When A Render No Longer Guarantees an Effect

React 19.2 introduces a new feature called Activity that allows developers to hide UI while preserving its state and DOM. This feature shifts the lifecycle of components in a way that can expose hidden bugs in legacy code. In React Activity, when a component renders, its effects don't mount immediately. Instead, the component can render while its effects remain hidden.

The UI only becomes visible again when React restores the previous state and recreates the effects. This difference between rendering and effect mounting can lead to unexpected behavior if not handled properly.

One example of a bug exposed by React Activity is a side effect occurring during the render phase. Consider a hook called `useLegacyStore` that creates a subscription to an external store during render. This hook sets up a subscription using `store.subscribe()`, which is a side effect. Previously, this code may have worked fine because the component was only rendered when explicitly needed.

However, when Activity was introduced, the hook's assumption that every render would result in a commit followed by an effect stopped holding. React can now render the component before it becomes visible, causing the side effect to occur during render instead of in the effect cleanup phase.

To fix this bug, the hook should be modified so that the subscription setup and cleanup belong to the same effect. This ensures that the subscription is set up when the component mounts and cleaned up when it unmounts, regardless of whether the component is visible. In the updated code, the subscription is created and cleaned up within the same effect using `useEffect`, which guarantees proper resource management.

Additionally, using built-in hooks like `useSyncExternalStore` provided by React can simplify the process of syncing external stores with the UI, avoiding manual implementation of side effects.