GithubHelp home page GithubHelp logo

Comments (4)

Andarist avatar Andarist commented on October 3, 2023 1

@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.

Andarist avatar Andarist commented on October 3, 2023

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 useLayoutEffects. 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.

gaearon avatar gaearon commented on October 3, 2023

Seems like a bug. Anyone wants to look into fixing it?

from react.

Andarist avatar Andarist commented on October 3, 2023

To rephrase what the observed issue here is:

  1. insertion effects are not disconnected when the suspended subtree gets hidden
  2. they are also not disconnected when a different subtree gets finally rendered (when Suspense resumes~)
  3. to get them to disconnect we need to "revisit" the old component and switch away from it without suspending.
  4. 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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.