Vitalij Ryndin crashmax-dev

These are some notes on the performance work that went into alien-signals. I'm sharing them not as a definitive guide, but as a log of a few key discoveries. The hope is that some of these findings might be useful to others tackling similar problems in high-performance JavaScript.

The Origin: Push-Pull-Push

My journey into the depths of reactivity performance began with Vue. I was trying to solve a specific problem in Vue 3.4: even if a computed's value didn't change, it would still trigger downstream computations and effects. This seemed inefficient. My attempt to fix this resulted in a pull request (vuejs/core#5912) that, after a year of discussions, was eventually merged. This PR introduced the Push-Pull-Push model to Vue 3.4, a model also adopted by libraries like reactivity.

For a time, I thought this was near-perfect. Then I saw the plans for Vue 3.5, which adopted a doubly-linked list but also moved to a pure pull-based model. I was still convinced

В доке по 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 и стейт апдейты запланированные внутри него будут выполнены до перерисовки экрана браузером? Как Реакт может влиять на перерисовку браузером, как может ее блокировать? Как Реакт это делает и как вы

	// ==UserScript==
	// @name Twitch Chat Answer Inserter
	// @namespace http://tampermonkey.net/
	// @author MrPandir

	// @version 1.8.2

	// @description Inserts single words from Twitch chat into specified websites
	// @match https://slovo.win/*

	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" });