Request for `useLayoutEffect` for the web renderer about dioxus HOT 1 OPEN

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.

from dioxus.