What happens if you use useLayoutEffect for non-layout logic?

Using useLayoutEffect for logic unrelated to layout or visual DOM changes (such as logging, data fetching, or analytics) is not recommended. It can lead to performance issues or even unexpected behavior.

Example: Anti-pattern

useLayoutEffect(() => {
console.log("Tracking analytics");
fetch('/log-page-view');
}, []);

The above usage delays the paint of the UI just to send a network request, which could (and should) be done after paint using useEffect.