-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Some non-hook function results are not preserved after conditional OutPortal #39
Comments
Huh, interesting, thanks for reporting this @paulsohn!
I don't think that's correct. This is showing that React is doing a re-render for this component, but that doesn't mean the DOM nodes are otherwise affected, they're relatively independent processes. You can see that the DOM nodes aren't garbage collected when removing from the page by testing something where the DOM itself has state (rather than React), e.g. remove and re-add a playing That doesn't help though, because I'm not sure why React is re-rendering to update the value here! That suggests that it thinks the props for this I think that You might be able to find out more digging into this with the React devtools, which will tell you exactly why each component re-renders. If the above is correct, you can also probably fix it by passing a 2nd argument to |
Thanks for your comment! BTW I'm currently working with my toy project using this awesome package and need to implement this kind of pattern - and that project doesn't suffer from this issue. This makes me more curious than ever... hopefully I can get back after I figured out what's the difference. |
I would like to
Math.random()
orDate.now()
) andAnd for these purposes, it seems like this package doesn't do what I expected.
Here's the MWE example: CodeSandbox Link
Every time I toggle, Box "111" alters its position and Box "222" repeats hiding and showing. Now let's focus on the timestamp.
Box "111" prints with the fixed timestamp, because every render exposes either OutPortal node1. This is fine.
Box "222" however, the timestamp has changed on every show, and this behavior is not quite intuitive when the package description says:
rather, it looks like when OutPortal node2 is absent, the detached node2 has been garbage collected and previous timestamp is gone forever.
I'm aware that below solutions will fix Box "222" timestamp as well, so that my purposes are satisfied:
Box
implementation (namely usinguseEffect
anduseState
) to store the timestamp right after mountingdisplay:none
div.yet I'm curious why did the timestamp change when the component is supposed to be memoized - given that without these portals
React.memo()
will do its work and fix the whole results.The text was updated successfully, but these errors were encountered: