AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

`Use Cache` Form Action Misses Cache After Hydrated Reload Due To `$ACTION_*` FormData Keys

When a form uses a cached server action, React includes internal `$ACTION_*` transport controls in the FormData. These controls differ between SSR reload and client navigation, causing the cache key to change and the cached function to execute again after hydration.

highConfidence 75%Next.jsAffected V16.3.0

Origin Analysis

React's `$ACTION_*` transport controls become part of the FormData used for cache key derivation. Inline actions use `$ACTION_REF_*` with encrypted bound captures that change on reload, while file actions use stable `$ACTION_ID_*` but client navigation can add action controls, causing cache misses after hydration. Native no-JavaScript submissions pass through `decodeAction()`, which strips these controls, explaining why only JS submissions miss.
1. Load `/inline` directly and wait for hydration. 2. Select Reset cache. 3. Submit the cached form with `message=hello`. 4. Confirm the cached function executed once. 5. Reload the page and wait for hydration. 6. Submit the unchanged form again. 7. Observe the cached function executes a second time.

Fixing Code Block

Edge Case Audit

This patch assumes no user application fields legitimately start with `$ACTION_`; React reserves that prefix for internal controls. If an app uses such field names, they would be ignored in cache keys, leading to incorrect cache hits. The change should only affect cache key derivation, not the action invocation; ensure all call sites use the cleaned FormData only for caching. Rollback: revert this patch if unforeseen issues with server action routing occur. Add tests for direct SSR reload, client navigation reload, and no-JS scenarios.

Ecosystem Topology