Some non-hook function results are not preserved after conditional OutPortal about react-reverse-portal HOT 2 OPEN

Huh, interesting, thanks for reporting this @paulsohn!

it looks like when OutPortal node2 is absent, the detached node2 has been garbage collected and previous timestamp is gone forever.

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 <video> element or a form containing input.

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 MemoBox have been updated during this process for some reason... Any ideas?

I think that React.memo() is only a shallow comparison over all props, so I suspect this is happening because of some prop update we're doing that means that a prop has a top-level change (e.g. a cloned array or object) even though the internal values haven't changed. Not sure where exactly though.

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 React.memo(), to define exactly what you're memoizing against. In this case, instead of a shallow comparison of all props, what you really want is something like (oldProps, newProps) => oldProps.txt === newProps.txt (i.e. props only count as different if txt changes). If you test that, do let me know if it works, that'd be a strong sign that some props equivalent-but-not-technically-equal update is the cause.

from react-reverse-portal.

Thanks for your comment!
Hotfixing with export const MemoBox = memo(Box, isEqual) didn't helped me though - the props are already shallow enough.

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.

from react-reverse-portal.