moving OutPortal doesn't cause unmount/mount, but *does* cause re-render

[HenrikBechmann]

is that normal?

    return <div ref = { shellRef } data-type = 'cellshell' data-scrollerid = {scrollerID} data-index = {index} data-instanceid = {instanceID} style = {styles}>
            { ((cellStatus == 'render') || (cellStatus == 'renderplaceholder')) && <OutPortal node = {reverseportal} /> }
            { (cellStatus == 'render1') && <OutPortal node = {reverseportal} /> }
        </div>

Both 'render' and 'render1' cause rendering of InPortal content (the console message is logged each time):

const GenericItem = (props) => {
    const [genericstate, setGenericState] = useState('setup')
    useEffect(()=>{
        if (genericstate == 'setup') {
            setGenericState('final')
        } 
    },[genericstate])
    console.log('rendering generic item index, genericstate',props.index,genericstate)
    return <div style = {{position:'relative',height:'100%', width:'100%',backgroundColor:'white'}}>
        <div style = {genericstyle}>
            {props.index + 1}{false && <img style= {{height:'100%'}} src={props.image}/>}
        </div>
    </div>
}

... but state ('final') is preserved

I was hoping that the move wouldn't trigger a render at all.

[pimterry]

Can you share a playground that reproduces the issue?

Is the rendered node being memoized/is it a pure component? That may resolve this. At first glance, I suspect that the issue is that the props are changing, but between equivalent options (empty props and empty props). Because there's a change though, React will consider re-rendering the InPortal contents, and if that contents isn't pure then it really does need to be rerendered after any such changes. Does that make sense?

[HenrikBechmann]

Thanks for the feedback @pimterry. I take it that you're saying the re-render should be avoidable.

I'll investigate further, and get back to you.