You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Warning: An update to Component ran an effect, but was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
at Component (https://xhe5w.csb.app/src/index.test.js:23:20)
at App (https://xhe5w.csb.app/src/index.test.js:35:20)
The prescription is to wrap the update in act(). The warning may be unintented because a component with an effect rendered unexpectedly. But due to the rules of hooks it's unlikely that we remove a useEffect call: It's easier to prevent rendering a component (wrong branch logic, return early etc) than preventing an effect (which requires moving it to a component we render conditionally).
From my experience most of these cases come down to adding an act() and not changing component implementation. In these cases firing errors for each effect makes the console output unreadable. Especially if you compose custom hooks and end up with 4+ effects per component.
An alternate solution would be to only fire an error if the effect was actually scheduled (see #19318).
The text was updated successfully, but these errors were encountered:
React version:
16.13.1
(latest) and0.0.0-7f28234f8
(next)Steps To Reproduce
useEffect
calls)Link to code example: https://codesandbox.io/s/long-sound-xhe5w?file=/package.json
The current behavior
A error is logged for each call of
useEffect
.The expected behavior
An error per component calling
useEffect
.Context
Current errror:
The prescription is to wrap the update in act(). The warning may be unintented because a component with an effect rendered unexpectedly. But due to the rules of hooks it's unlikely that we remove a
useEffect
call: It's easier to prevent rendering a component (wrong branch logic, return early etc) than preventing an effect (which requires moving it to a component we render conditionally).From my experience most of these cases come down to adding an
act()
and not changing component implementation. In these cases firing errors for each effect makes the console output unreadable. Especially if you compose custom hooks and end up with 4+ effects per component.An alternate solution would be to only fire an error if the effect was actually scheduled (see #19318).
The text was updated successfully, but these errors were encountered: