-
Notifications
You must be signed in to change notification settings - Fork 49.1k
Description
I want to report a bug. My problem is that the callback function I pass to useEffect()
is never called in my app. I uploaded a minimal app here that reproduces the issue.
As you can see, I render a couple of nested components. After the initial render, I update the component state inside a useEffect()
callback. However, this callback is only executed for the first two components, not for the third level component. The result is that the third and subsequent levels are not rendered at all.
I suspect that this is a bug in React and not a misuse on my side because doing any of the following changes will let the component tree render correctly in all levels:
- Don't use multiple React roots. If I remove the last (yellow)
ReactDOM.render()
call, then the second (red) component tree will render correctly. - Don't conditionally render child components. Removing the
message !== DEFAULT_MESSAGE
check (main.tsx
, line 20) causes the component trees to render correctly. - Use
useLayoutEffect()
instead ofuseEffect()
.
If you need additional information to reproduce the issue or have any questions, let me know. I'd like provide any help I can!