Tagged: react19
Error: A function wrapped in useEffectEvent can't be called during rendering
useEffectEvent lets you read the latest props/state inside an Effect without adding them as dependencies, but the resulting function can only be called from inside an Effect (or another Effect Event) — never directly during render. Move the call into the useEffect body, or into an event handler if that's really what you need.
<Activity> isn't preserving component state when hidden (React 19.2)
State only survives inside `<Activity mode="hidden">` if the hidden subtree stays mounted in the same position in the tree — changing its `key`, conditionally rendering it out entirely instead of toggling `mode`, or nesting it under a component that itself unmounts will all reset it just like a normal unmount would.
Error: cache() was called outside of a request during render (React Server Components)
React's server-side `cache()` memoizes a function's result for the lifetime of a single request — calling it (or reading its cached value) outside that request boundary, such as at module scope or after the request has already finished, throws. Only call the cached function from within components/functions that execute during that request's render.
useOptimistic value reverts before the server action actually resolves
useOptimistic's optimistic value only stays applied while its underlying transition is still pending — if the update function that changes the real state isn't wrapped in the same transition (e.g. a `startTransition` or a form Action), React reverts to actual state as soon as the surrounding render settles, not when the async work finishes.
Error: useFormStatus must be used within a <form> that specifies an action prop
useFormStatus reads pending/data state from the nearest enclosing <form>'s Action — it returns default/empty values (and can throw or warn depending on version) if called outside any form, or inside a form that uses a plain onSubmit handler instead of the `action` prop. Move the component using useFormStatus inside the form, and use `action` instead of `onSubmit`.
Warning: Function components cannot be given refs — forwardRef migration in React 19
React 19 lets function components accept `ref` as a normal prop, so `forwardRef` is no longer required for new components. This warning means you're on an older React version (or a component still wrapped in `forwardRef` in a way that double-wraps the ref) — either upgrade, or keep using `forwardRef` until you've migrated the whole codebase.