renderLayer called on _every_ update?

[lydell]

The point of <Portal> is to pass children to it (that are rendered somewhere else). And props.children !== prevProps.children always, right? If so, doesn't this mean that the for-if check in componentDidUpdate always triggers?

preact-portal/src/preact-portal.js

Lines 10 to 16 in ba21279

	componentDidUpdate(props) {
	for (let i in props) {
	if (props[i]!==this.props[i]) {
	return setTimeout(this.renderLayer);
	}
	}
	}

[developit]

This is true of any Preact/react component. Update Cascade can be mitigated using shouldComponentUpdate or memo.

Fwiw the render() call diffs, so what's happening here isn't necessarily a DOM mutation, but rather the flow of data through the virtual DOM tree.

[lydell]

Ok! But the for-if loop does not do anything here, right? So it could be removed?

 componentDidUpdate(props) { 
 	return setTimeout(this.renderLayer); 
} 

[developit]

Technically it's possible to avoid triggering rerenders by hoisting things out of render:

const myPortal = <Portal into="body"><SomeComponent /></Portal>

class Outer {
  render() {
    return <div>{myPortal}</div>
  }
}

[lydell]

Thanks for the suggestion! I'm not having a performance problem or anything though, I'm just trying to understand how these things work:

Here's a codesandbox showing what I mean: https://codesandbox.io/s/k54oz8mzm3?fontsize=14

I the demo, the <Portally> component always says that props.children change (even though they don't really, kind of).