feat: provide useLayoutEffect equivalent #3284
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Provide equivalent of react's useLayoutEffect so users can mutate DOM before it gets rendered. This will allow for example for calculating if node is overflowing.
Describe the Use Case
I want to update the template based on properties of a DOM node from that template. Because refs are set during render, I have to use either componentDidRender or componentDidLoad lifecycle hooks. In those hooks I can calculate whatever I need and mutate @State property that will trigger another render.
But this solution cause warning to appear in the console
The state/prop "<propName>" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"
and could cause flicker because of doubled render.
Describe Preferred Solution
Provide lifecycle hook, that could be used to mutate state before template gets painted.
Describe Alternatives
None
Related Code
@Component({
tag: 'ref-example',
})
export class RefExampleComponent {
ref!: HTMLElement;
@State() isOverflowing: boolean | null = null;
render() {
return (
<Host>
<div ref={el => this.ref = el as HTMLElement}></div>
{isOverflowing ? 'overflow!' : 'no overflow!'}
</Host>
)
}
componentDidRender() {
if (this.isOverflowing === null) {
if (this.ref.scrollWidth > this.ref.offsetWidth) {
this.isOverflowing = true;
}
}
}
}Additional Information
react's useLayoutEffect documentation: https://reactjs.org/docs/hooks-reference.html#uselayouteffect