Comments (10)
@gaearon yes! I actually started to work on a PR locally - it's very draft-ish and I only fixed one of the discrepancies so far. Gonna open a draft PR later today.
from react.
I was just about to report the same issue (my repro case can be found here, it's prepared based on @jmca's repro for the issue caused by this - but it's essentially the same repro as yours).
I think that useInsertionEffect
is essentially the same as useLayoutEffect
, it's just that they have a "higher priority" and they are executed first, in a batch, before useLayoutEffect
s. So I'm heavily leaning towards your conclusion - this is a bug in React. All other semantics of layout effects should be shared between useInsertionEffect
and useLayoutEffect
(such as semantics in suspense boundaries, mounting/unmounting them appropriately in Offscreen components, their reappearing and more)
from react.
Seems like a bug. Anyone wants to look into fixing it?
from react.
To rephrase what the observed issue here is:
- insertion effects are not disconnected when the suspended subtree gets hidden
- they are also not disconnected when a different subtree gets finally rendered (when Suspense resumes~)
- to get them to disconnect we need to "revisit" the old component and switch away from it without suspending.
- this doesn't match how any other type of effects work. I'd expect those effects to get disconnected in the similar vein as layout effects are but if that's not desirable for some reason then they likely should be disconnected just like passive effects (or using some different semantics of their own but the bottom line is that they should be disconnected at some point)
from react.
This is intentional to avoid layout thrash when things are hidden and restored. It's also to allow for hidden trees to be able to do early preemptive layout calculations for hidden trees so that they can be instantly restored.
from react.
Hmm, but that cleanup has to be called at some point in time - when that is?
from react.
When the Suspense boundary itself is committed and deleted or if an update changes it to no longer be visible. I could imagine the second case being a bug since it’s a thing we typically don’t model at all.
from react.
When the Suspense boundary itself is committed and deleted
unless i'm misunderstanding, this doesn't seem to be the case
https://stackblitz.com/edit/react-ts-3vk942?file=App.tsx,Page2.tsx,Page1.tsx
Repro: press "Go to Page 1", "Go to Page 2", "Just unmount the whole thing". the suspense boundary and the suspending children below all get destroyed, but the background stays pink (i.e. Page1's useInsertionEffect
is not actually cleaned up)
Interestingly, this only acts "strange" when Page1 or Page2 suspend, not when they're already available. reproducible like this:
- Initial page
- Go to Page 1 (suspends, then makes the background pink)
- Go to Page 2 (suspends, Page1's insertion isn't cleaned up = bg stays pink)
- Go back to Page 1 (doesn't suspend anymore, runs insertion effect)
- Go to Page 2 (doesn't suspend anymore, Page1's insertion effect is cleaned up this time = bg restored to white)
maybe i'm missing something, but i'd expect insertion cleanups to behave the same regardless of whether something suspensey happened (i.e Page2 suspended, Page1 got hidden, and never came back) or not.
from react.
Was there any movement on this? I ran into the same issue linked by @Andarist , specifically with Emotion's Global component not calling the clean up on unmount.
In my case all components are wrapped inside of React.lazy() because that's how we have our page route components set up (all pages being lazily loaded).
from react.
For what it's worth, styled-components worked around this bug by simply using useLayoutEffect
instead of useInsertionEffect
. Maybe Emotion could do the same in the mean time?
from react.
Related Issues (20)
- Feature Request: Reset form inside of Server Component or Action HOT 10
- Bug: submitting form clears fields unnecessarily despite using preventDefault HOT 3
- Bug: the <textarea> component's ValidityState.tooShort is incorrect when component is controlled and the value is passed in via the value prop HOT 2
- Why react-dom/server will automatic reorder elements in head
- useRef: Counting renders doesn´t work as expected in React neither 18.0.1 nor 18.0.2 HOT 2
- Bug:
- The React Framework has been one of the best in terms of creating responsive and exciting web design. Its development environment has been helpful in terms of dependencies and how quickly they are accessible by downloading in the terminal using 'npm.' I'm glad I could use the great framework this year. Cheers to a great year, and here comes 2024! HOT 2
- KBug:
- [DevTools Bug]: Hook parsing fails if a hook uses useSyncExternalStore HOT 9
- Bug: After some time useSyncExternalStore stops reacting on store updates HOT 1
- Bug: Memory Leak in React 17 when using useRef Hook HOT 1
- Why doesn't react absorb some of the awesome designs from the community, is it because they don't want to or won't?
- Replace "Donate to Ukraine" Banner with "Support Palestine" in ReactJS HOT 23
- Bug: Suspense Exception in react-server-dom-webpack HOT 2
- Bug: Can't submit form programatically when using server actions HOT 7
- [DevTools Bug] Cannot add node "20" because a node with that id is already in the Store. HOT 1
- [DevTools Bug] Cannot read properties of undefined (reading 'concat') HOT 4
- Bug: Random preloads added for images HOT 3
- Bug: Weird behavior of form when i set a state value within an onChange handler. HOT 3
- Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.