Request for useLayoutEffect for the web renderer

[xpe]

Background

I'm building a prototype Dioxus web app using absolute positioning. There are many divs that need to know their dimensions to prevent overlaps. (You could imagine that I'm using a force-directed layout if it helps visualize what I'm doing, but I'm not actually using that particular layout algorithm.) For this application, it would be ideal to wait until layout finishes but before painting starts. React has useLayoutEffect. If Dioxus had this, it would seem like the ideal thing to use.

Feature Request

Please add useLayoutEffect for the web renderer for Dioxus.

[xpe]

BTW, this article is amazingly clear and useful : https://webperf.tips/tip/layout-thrashing/

Layout Thrashing and Forced Reflows

The browser's style and layout process (also known as reflow) is responsible for assigning visual styles and geometry to elements of a web application. It is one of the most expensive computational operations performed during the lifecycle of a web application, yet many web developers introduce code that forces it to run more often than it needs to!

When JavaScript codepaths force the browser to perform the reflow process outside of its usual cadence, it's called a forced reflow. When codepaths perform a forced reflow multiple times in quick succession within a frame, it's known as layout thrashing.

In this tip, we'll discuss forced reflows, layout thrashing, how to spot it in your application, as well as techniques for mitigating the performance impact.

Next, I'll quote some advice that probably transfers to Dioxus:

React Development

By using React you are not protected from Layout Thrashing. All web applications can abuse the browser's layout engine, even those written in modern web frameworks.

React's declarative syntax adds a layer of indirection into when the actual DOM mutations (and Layout invalidations) occur. This can make spotting Layout Thrashing harder when reading through code.

In my experience, Layout Thrashing occurs in useEffect hooks trying to measure DOM nodes or other React components. Typical use cases for performing this type of measuring include positioning a Tooltip or restoring Scroll Position.