Vitalij Ryndin crashmax-dev

В доке по useLayoutEffect можно найти следующие отрывки:

React guarantees that the code inside useLayoutEffect and any state updates scheduled inside it will be processed before the browser repaints the screen.
Call useLayoutEffect perform the layout measurements before the browser repaints the screen:
The code inside useLayoutEffect and all state updates scheduled from it block the browser from repainting the screen. When used excessively, this makes your app slow. When possible, prefer useEffect.

Как это возможно? Как Реакт может гарантировать что код внутри useLayoutEffect и стейт апдейты запланированные внутри него будут выполнены до перерисовки экрана браузером? Как Реакт может влиять на перерисовку браузером, как может ее блокировать? Как Реакт это делает и как вы

	import sharp, { type Sharp } from 'sharp';
	import { readFileSync } from 'node:fs';

	/**
	* Creates a key for cache.
	* @param path - original image absolute path
	* @param initialScale - original image initial scale
	* @param scale - target image scale
	*/
	function formatKey(path: string, initialScale: number, scale: number): string {

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	import { useEffect, useState } from "react";

	type UseTextSelectionReturn = {
	text: string;
	rects: DOMRect[];
	ranges: Range[];
	selection: Selection \| null;
	};

	const getRangesFromSelection = (selection: Selection): Range[] => {

	'use client'

	import { test } from './server'
	import { useServerAction } from './hook'

	export default function Home() {
	const { data, loading, error, execute: testAction } = useServerAction(test)

	if (loading) return <div>Loading...</div>
	if (error) return <div>Error: {error.message}</div>

	import fs from "node:fs";
	import https from "node:https";
	import http from "node:http";

	function getFileName(url: string) {
	return new URL(url).pathname.split("/").pop();
	}
	async function downloadFile(url: string): Promise<string> {
	const urlProtocol = new URL(url).protocol;
	const request = urlProtocol === "https:" ? https : http;

	// https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
	// https://github.com/reactjs/rfcs/pull/220#issuecomment-1259938816

	import React from 'react';

	// Allow to access a fresh closures in the function but returns stable reference during rerenders
	export function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T): T {
	const ref: React.MutableRefObject<{
	stableFn: T;
	callback: T;

	/* function that used as middleware */

	accessToken: async (name) => {
	if (typeof document === "undefined") return "";
	let token = document.cookie
	.split(";")
	.filter((cookie) => cookie.startsWith("token"))[0];

	if (!token) {
	const response = await fetch("/api/refresh", { method: "POST" });

	/**
	* Determines whether an error is a QuotaExceededError.
	*
	* Browsers love throwing slightly different variations of QuotaExceededError
	* (this is especially true for old browsers/versions), so we need to check
	* different fields and values to ensure we cover every edge-case.
	*
	* @param err - The error to check
	* @return Is the error a QuotaExceededError?
	*/