{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новый компилятор React 19 обещает существенное повышение производительности, что станет настоящим прорывом для разработчиков. Но это лишь верхушка айсберга. В этой статье мы не только разберемся, как работает компилятор, но и погрузимся в мир других новейших возможностей React 19.","type":"unstyled","key":"83hsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет, друзья! Я Кирилл Мыльников, фронтенд-разработчик в компании Usetech. Сегодня хочу поделиться о новейших функциях в React 19. Давайте вместе применим их в практике, разберем новшества и возможности на примерах, чтобы узнать, как они могут улучшить нашу разработку! Готовы к погружению?","type":"unstyled","key":"5f5mi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компилятор React","type":"header-two","key":"dkii8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это новейшее дополнение к React — компилятор, заменяющий транспилятор, применяется в React 19. В React 18 и ниже использовался транспилятор, который при изменении состояния перерисовывал весь компонент. В отличие от него, компилятор возвращает мемоизированный код, устраняя ненужный повторный рендеринг и улучшая производительность приложений React. Давайте запустим код в обеих версиях и изучим разницу в поведении компонентов при повторной визуализации.","type":"unstyled","key":"2icup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример","type":"header-three","key":"70kg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");\n}\n\n// Export the CounterApp component as the default export\nexport default CounterApp;\n// Component to measure and log the time taken to render the header\nfunction TimeToRender() {\n // Record the start time when the component begins rendering\n const startTime = performance.now();\n\n useEffect(() => {\n // Record the end time when the component has rendered\n const endTime = performance.now();\n // Log the time taken to render the component\n console.log(`CustomHeader render time: ${endTime - startTime}ms`);\n }, []); // Empty dependency array ensures this effect runs only once after the initial render\n\n return (Counter App\n);\n}\n\n// Main component of the Counter App\nfunction CounterApp() {\n // State hook to manage the count value\n const [count, setCount] = useState(0);\n\n return (\n <>\n {/* Render the TimeToRender component */}{/* Button to increase the count */}\n setCount(count + 1)}>Increase\n {/* Button to decrease the count */}\n setCount(count - 1)}>Decrease{/* Display the current count */}{count}","type":"atomic","key":"bdrag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представленный выше код представляет собой приложение-счетчик, которое увеличивает и уменьшает счетчик при нажатии кнопки. В нем реализована функция TimeToRender, которая замеряет время, требуемое для рендеринга компонента при каждом обновлении.","type":"unstyled","key":"7m0sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На иллюстрации ниже показан процесс рендеринга компонента в компиляторе, а также время, необходимое для его повторного рендеринга.","type":"unstyled","key":"aa3fi"},{"data":{"image":{"id":"66fa8f03c4d8672f95249390"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Процесс рендеринга компонента в компиляторе, а также время, необходимое для его повторного рендеринга","type":"atomic:image","key":"473m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На изображении ниже показано время, требуемое для каждого повторного рендеринга всего компонента при использовании транспилятора.","type":"unstyled","key":"877cj"},{"data":{"image":{"id":"66fa8f03c4d8672f95249391"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Время, требуемое для каждого повторного рендеринга всего компонента при использовании транспилятора","type":"atomic:image","key":"kh6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На представленном изображении выше мы видим, что транспилятор выполняет несколько повторных рендеров, при этом время каждого последующего рендера сокращается после каждого щелчка, в то время как компилятор выполняет рендер только один раз.","type":"unstyled","key":"1etrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":33,"style":"BOLD"},{"length":11,"offset":45,"style":"BOLD"}],"text":"Ранее мы использовали хуки memo, useMemo() и useCallback() для достижения подобного эффекта, что делает эти хуки устаревшими. Новый подход позволяет нам писать более чистый и компактный код.","type":"unstyled","key":"8poon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Статья по теме","type":"unstyled","key":"2jol8"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":56,"offset":0}],"inlineStyleRanges":[],"text":"⚛️\uD83D\uDD04 Улучшенная обработка асинхронных операций в React 19","type":"unstyled","key":"e48gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новые Hooks","type":"header-two","key":"7ee26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Хуки — это одна из наиболее популярных особенностей React. Они обеспечивают удобное управление состоянием и жизненным циклом компонентов. В React уже встроены некоторые хуки, а также предоставляется возможность создания собственных пользовательских хуков.","type":"unstyled","key":"amras"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В React 19 было введено четыре новых хука:","type":"unstyled","key":"21kbi"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":13,"offset":0}],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"useTransition","type":"ordered-list-item","key":"d77k0"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":14,"offset":0}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"useActionState","type":"ordered-list-item","key":"5q6hu"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":13,"offset":0}],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"useFormStatus","type":"ordered-list-item","key":"a173j"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":13,"offset":0}],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"useOptimistic","type":"ordered-list-item","key":"6i0t8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useTransition","type":"header-three","key":"9l1jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":207,"style":"BOLD"}],"text":"React 19 внедрил поддержку использования async функций в переходах для управления изменениями состояния, которые могут повлечь изменения пользовательского интерфейса. Существует возможность использовать хук useTransition для обновления статуса состояния и автоматического отображения процесса ожидания.","type":"unstyled","key":"4ev1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это гарантирует плавную обработку обновлений при инициации пользователем. Кроме того, интерфейс будет точно отображать текущее состояние асинхронной функции. Давайте посмотрим на пример кода.","type":"unstyled","key":"6r4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":114,"style":"ITALIC"},{"length":15,"offset":266,"style":"BOLD"}],"text":"Приведенный ниже код представляет собой приложение, которое добавляет буквы алфавита в список. При нажатии кнопки \"Добавить\" происходит ожидание 4 секунды перед добавлением новой буквы в список. Мы можем автоматически управлять состоянием ожидания с помощью функции startTransition().","type":"unstyled","key":"5hvtc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState, useTransition } from \"react\";\n\n// Function to create a delay for a given number of milliseconds\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Asynchronous function to add an alphabet to the list after a delay\nasync function addAlphabetToList(alphabet) {\n await delay(4000);\n return null;\n}\n\n// Component to add an alphabet to a list\nfunction AlphabetAdder() {\n const [alphabet, setAlphabet] = useState(\"\");\n const [error, setError] = useState(null);\n // State and function for transition\n const [isPending, startTransition] = useTransition();\n const [alphabetList, setAlphabetList] = useState([]); // State to store the list of alphabets\n\n // Function to handle adding an alphabet to the list\n const handleAddAlphabet = async () => {\n startTransition(async () => {\n const error = await addAlphabetToList(alphabet); // Add alphabet to the list with delay\n if (error) {\n setError(error);\n } else {\n setAlphabetList([...alphabetList, alphabet]);\n }\n });\n };\n\n // Log the pending state\n console.log(\"Pending:\", isPending);\n\n return <>;\n}\n","type":"atomic","key":"cqhuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На изображении ниже показано, что состояние ожидания остается равным true до того момента, пока буква алфавита не будет добавлена в список через 4 секунды.","type":"unstyled","key":"1qr9p"},{"data":{"image":{"id":"66fa8f03c4d8672f95249392"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Состояние ожидания остается равным true до того момента, пока буква алфавита не будет добавлена в список через 4 секунды","type":"atomic:image","key":"bmd09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":124,"style":"BOLD"}],"text":"Это происходит в отличие от предыдущих версий, где нам приходилось вручную управлять состоянием ожидания, используя функцию setIsPendingding для установки состояния в значение true или false.","type":"unstyled","key":"bc9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState } from \"react\";\n\n// Function to create a delay\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Async function to simulate adding an alphabet to a list after a delay\nasync function addAlphabetToList(alphabet) {\n await delay(4000);\n return null;\n}\n\nfunction AlphabetAdder() {\n const [alphabet, setAlphabet] = useState(\"\");\n const [error, setError] = useState(null);\n // State to manage the pending state\n const [isPending, setIsPending] = useState(false);\n const [alphabetList, setAlphabetList] = useState([]);\n\n // Function to handle adding the alphabet\n const handleAddAlphabet = async () => {\n setIsPending(true);\n // Add the alphabet to the list after the delay\n const error = await addAlphabetToList(alphabet);\n if (error) {\n setError(error);\n } else {\n setAlphabetList([...alphabetList, alphabet]);\n }\n setIsPending(false);\n };\n\n // Log the pending state\n console.log(\"Pending:\", isPending);\n\n return <>;\n}\nexport default AlphabetAdder;\n","type":"atomic","key":"1hq4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useActionState","type":"header-three","key":"figl0"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":13,"offset":115}],"inlineStyleRanges":[{"length":15,"offset":4,"style":"BOLD"},{"length":13,"offset":115,"style":"BOLD"},{"length":15,"offset":172,"style":"BOLD"}],"text":"Хук useActionState применяется для управления изменениями состояния в пользовательском интерфейсе, аналогично хуку useTransition. Отличие между ними заключается в том, что useActionState позволяет установить состояния error, action и pending в одной строке кода, вместо нескольких строк, как показано выше. Кроме того, хук useTransition обрабатывает только состояние ожидания.","type":"unstyled","key":"h0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":25,"style":"BOLD"}],"text":"Путем использования хука useActionState мы можем переписать предыдущий код более компактно, что приведет к уменьшению количества строк кода.","type":"unstyled","key":"ca69r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\nasync function addAlphabetToList(name) {\n await delay(4000);\n return null;\n}\n\nfunction AlphabetAdder() {\n const [error, submitAction, isPending] = useActionState(\n async (previousState, formData) => {\n const error = await addAlphabetToList(formData.get(\"name\"));\n if (error) {\n return error;\n }\n\n return null;\n },\n null,\n );\n\n console.log(\"Pending:\", isPending);\n return <>;\n}\n","type":"atomic","key":"cigr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":31,"style":"BOLD"},{"length":13,"offset":105,"style":"BOLD"},{"length":10,"offset":120,"style":"BOLD"},{"length":9,"offset":159,"style":"BOLD"},{"length":14,"offset":172,"style":"BOLD"}],"text":"В представленном выше коде хук useActionState используется для автоматической обработки состояний error, submitAction и isPending без явного определения через useState или useTransition для состояний, ожидающих обновления, как мы делали ранее.","type":"unstyled","key":"77ehk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Статья по теме","type":"unstyled","key":"33o60"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":37,"offset":0}],"inlineStyleRanges":[],"text":"⚛️\uD83D\uDCA5 React 19 уничтожит все фреймворки","type":"unstyled","key":"9s4cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useFormStatus","type":"header-three","key":"bvno8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":4,"style":"BOLD"}],"text":"Хук useFormStatus предоставляет доступ к информации о состоянии отправленной формы. С его помощью можно получить доступ к состоянию формы и определить, находится ли она в режиме ожидания или нет.","type":"unstyled","key":"9kns6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведен пример кода, в котором использован хук useFormStatus для доступа к состоянию ожидания формы.","type":"unstyled","key":"fuhvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");\n}\nfunction FormStatusButton() {\n const { isPending } = useFormStatus();\n return ({isPending ? \"Adding...\" : \"Add\"}","type":"atomic","key":"9910f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":132,"style":"BOLD"},{"length":12,"offset":162,"style":"BOLD"}],"text":"Ранее для доступа к состоянию ожидания мы передавали это состояние как пропс. В приведенном ниже примере кода мы передали состояние isPending как пропс в функцию CustomButton, чтобы иметь к нему доступ в операторе return.","type":"unstyled","key":"75lrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");\n}\nfunction CustomButton({ isPending }) {\n return ({isPending ? \"Adding...\" : \"Add\"}","type":"atomic","key":"3du93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useOptimistic","type":"header-three","key":"43uvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот хук позволяет нам обновлять пользовательский интерфейс немедленно при изменении определенного состояния, даже без ожидания завершения асинхронного действия. Например, в чат-приложениях, когда сообщение отправляется, оно мгновенно отображается в интерфейсе до его фактической отправки получателю. Часто добавляются индикаторы, такие как галочки, чтобы указать, когда сообщение будет полностью доставлено.","type":"unstyled","key":"k9ro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":218,"style":"BOLD"}],"text":"В приведенном ниже коде показано приложение для списка задач, где при добавлении новой задачи она проходит через асинхронную функцию и затем обновляется в пользовательском интерфейсе через 4 секунды. Мы используем хук useOptimistic для мгновенного отображения добавленной задачи в интерфейсе до завершения 4-секундного временного интервала.","type":"unstyled","key":"b2uj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"))} \n \n );\n}\n\n// Function that simulates creating a task on the server\nfunction createTask(title) {\n return delay(\n { id: crypto.randomUUID(), title: `${title} - in the server` },\n 4000,\n );\n}\n\n// Function to create a delay\nfunction delay(value, duration) {\n return new Promise((resolve) => {\n setTimeout(() => resolve(value), duration);\n });\n}\n\nexport default App;\nfunction App({ initialTasks }) {\n // State to hold the tasks\n const [tasks, setTasks] = useState(initialTasks);\n // Optimistic UI state for tasks\n const [optimisticTask, addOptimisticTasks] = useOptimistic(tasks);\n\n const inputRef = useRef(null);\n\n // Handle form submission\n async function handleSubmit(e) {\n if (inputRef.current == null) return;\n\n // Create an optimistic task\n const optimisticTask = {\n id: crypto.randomUUID(),\n title: inputRef.current.value,\n };\n\n // Add the optimistic task to the state\n addOptimisticTasks((prev) => [...prev, optimisticTask]);\n\n // Create a new task (simulating server creation)\n const newTask = await createTask(inputRef.current.value);\n // Add the new task to the state\n setTasks((prev) => [...prev, newTask]);\n }\n\n return (\n <>\n \n \n Add New Task\n \n \n\n \n \n \n \n\n Create Task{/* Render the list of optimistic tasks */} {optimisticTask.map((task) => ({task.title}\n","type":"atomic","key":"8n901"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данном изображении демонстрируется мгновенное обновление пользовательского интерфейса. Через 4 секунды отображаемая задача заменяется на актуальную задачу с сервера.","type":"unstyled","key":"6qm0n"},{"data":{"image":{"id":"66fa8f03c4d8672f95249393"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Мгновенное обновление пользовательского интерфейса. Через 4 секунды отображаемая задача заменяется на актуальную задачу с сервера","type":"atomic:image","key":"f22um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":50,"style":"BOLD"}],"text":"Ранее для решения этой задачи мы использовали хук useState для управления оптимистичным отображением задач и их дальнейшего обновления с фактическими данными.","type":"unstyled","key":"e0dbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [tasks, setTasks] = useState(initialTasks);\n// Setting optimistic tasks using the useState hook\nconst [optimisticTasks, setOptimisticTasks] = useState(initialTasks);\n\nconst inputRef = useRef(null);\n\nasync function handleSubmit(e) {\n e.preventDefault(); // Prevent default form submission\n\n if (inputRef.current == null) return;\n\n const optimisticTask = {\n id: crypto.randomUUID(),\n title: inputRef.current.value,\n };\n\n // Add the optimistic task immediately\n setOptimisticTasks((prev) => [...prev, optimisticTask]);\n\n // Create the actual task with a delay\n const newTask = await createTask(inputRef.current.value);\n setTasks((prev) => [...prev, newTask]);\n setOptimisticTasks((prev) =>\n prev.map((task) => (task.id === optimisticTask.id ? newTask : task)),\n );\n}\n","type":"atomic","key":"83un8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":35,"style":"BOLD"},{"length":15,"offset":107,"style":"BOLD"},{"length":19,"offset":147,"style":"BOLD"}],"text":"Вышеприведенный код использует хук useState для добавления оптимистичных обновлений интерфейса в состояние optimisticTasks, а также функцию-сеттер setOptimisticTasks для обновления этого состояния.","type":"unstyled","key":"3btio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC68‍\uD83D\uDCBB\uD83C\uDFA8 Библиотека фронтендера","type":"unstyled","key":"eqfdu"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":24,"offset":63}],"inlineStyleRanges":[],"text":"Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»","type":"unstyled","key":"c7vhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новый API","type":"header-three","key":"9ree1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":40,"style":"BOLD"}],"text":"API use позволяет использовать промисы и async-await. Он принимает только промис, а не функцию, и обновляет пользовательский интерфейс после завершения промиса. Вы можете вызывать этот API внутри операторов if и циклов.","type":"unstyled","key":"96pgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенном примере кода содержатся две асинхронные функции, которые имитируют задержку при получении данных, как это обычно происходит при отправке запросов на сервер. Первая функция возвращает список авторов после задержки в 4 секунды, а вторая – список блогов после задержки в 2 секунды. Затем пользовательский интерфейс обновляется этими значениями.","type":"unstyled","key":"332l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":")}\n \n );\n}\n\n// Main App component\nfunction App() {\n // Create promises for authors and blogs\n const authorsPromise = getAuthors();\n const blogsPromise = getBlogs();\n\n return (\n // Use Suspense to handle loading states\n \n Loading Authors...}>\n \n \n \n \n );\n}\n\nexport default App;\nimport { use, Suspense } from \"react\";\n\n// Create a delay\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Async function that fetches the list of blogs after the delay\nconst getBlogs = async () => {\n await delay(4000);\n return [\"OpenReplay\", \"Devto\", \"Medium\"];\n};\n\n// Async function that fetches the list of authors after a delay\nconst getAuthors = async () => {\n await delay(2000);\n return {\n isFetchUsers: true,\n authors: [\"Mary Chidera\", \"Ugorji Marydera\", \"Ken Erics\"],\n };\n};\n\n// Component to retrieve and display authors and blogs\nfunction RetrieveAuthors({ authorsPromise, blogsPromise }) {\n // Use the authorsPromise to get the authors' data\n const { isFetchUsers, authors } = use(authorsPromise);\n\n console.log(\"Authors Promise Done: \", authors);\n\n let blogs;\n // If users are fetched, use the blogsPromise to get the blogs data\n if (isFetchUsers) blogs = use(blogsPromise);\n\n console.log(\"Blogs Promise is done :\", blogs);\n\n return (\n <>Authors\n))}{/* Map over the authors array and display each author */}\n {authors.map((author, idx) => ({author}{blogs && (Top Blogs\n))}{/* Map over the blogs array and display each blog */}\n {blogs.map((blog, idx) => ({blog}","type":"atomic","key":"enbo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данном изображении демонстрируется, что пользовательский интерфейс обновляется только после того, как все промисы загрузились.","type":"unstyled","key":"9t80g"},{"data":{"image":{"id":"66fa8f03c4d8672f95249394"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Пользовательский интерфейс обновляется только после того, как все промисы загрузились","type":"atomic:image","key":"8l89s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение передачи ref в пропсах","type":"header-three","key":"681b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":35,"style":"BOLD"},{"length":11,"offset":99,"style":"BOLD"},{"length":4,"offset":123,"style":"BOLD"},{"length":4,"offset":172,"style":"BOLD"}],"text":"В React 19 теперь можно передавать ref как обычное свойство объекта, а не обязательно использовать forwardRef для передачи ref компоненту. Это позволяет сохранять значения ref между рендерингами и избегать дополнительных перерисовок компонента.","type":"unstyled","key":"7bcqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":37,"style":"BOLD"}],"text":"Вот пример новой реализации передачи ref как обычного свойства объекта:","type":"unstyled","key":"38i9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function NewRef({ ref }) {\n return Click Me;\n}\n\n//...\n;\n","type":"atomic","key":"96sd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":22,"style":"BOLD"},{"length":6,"offset":60,"style":"BOLD"},{"length":3,"offset":118,"style":"BOLD"}],"text":"Ранее мы использовали forwardRef для определения компонента OldRef. Этот метод позволяет компоненту получить доступ к ref, передаваемому ему. Рассмотрим пример реализации:","type":"unstyled","key":"67ort"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const OldRef = forwardRef((props, ref) => {\n return (\n \n {props.children}\n \n );\n});\n\n//...\n\n \n Click me\n\n ;\n","type":"atomic","key":"91pn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поддержка метаданных документа","type":"header-three","key":"5v4tk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":124,"style":"BOLD"}],"text":"React 19 теперь поддерживает рендеринг тегов метаданных прямо в компоненте без использования сторонних библиотек, таких как react-helmet. В приведенном ниже коде мы обновляем элементы title и meta непосредственно в компоненте App:","type":"unstyled","key":"bjddc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");\n}\nНазад\nЧто нового в React 19: 12 последних функций и обновлений\nМарыдера Угорджи\nМарыдера Угорджи\n24 сен 2024 г. · 9 мин чтения\n\nЧто нового в React 19: 12 последних функций и обновлений\nНаконец-то вышел React 19! Он принес с собой несколько интересных обновлений, начиная от компилятора React и заканчивая введением новых хуков, улучшенной системой отчетов об ошибках и т. д., и в этой статье мы рассмотрим около дюжины новейших функций React.\n\nМы рассмотрим дюжину новых функций React 19. Давайте начнем с той, которая действительно отличается, а затем продолжим по всему списку.\n\nКомпилятор React\nЭто возглавляет список как последнее дополнение к React. React 18 и ниже не имели компилятора; вместо этого они использовали транспилятор. Основное различие между ними заключается в том, что транспилятор перерисовывает весь компонент при изменении состояния, а компилятор — нет. Компилятор возвращает мемоизированный код. Таким образом, больше нет ненужного повторного рендеринга, и это заставило бы приложения React работать быстрее.\n\nДавайте запустим приведенный ниже код в React 18 и React 19 и посмотрим на разницу в том, как происходит повторная визуализация компонентов.\n\n// Component to measure and log the time taken to render the header\nfunction TimeToRender() {\n // Record the start time when the component begins rendering\n const startTime = performance.now();\n\n useEffect(() => {\n // Record the end time when the component has rendered\n const endTime = performance.now();\n // Log the time taken to render the component\n console.log(`CustomHeader render time: ${endTime - startTime}ms`);\n }, []); // Empty dependency array ensures this effect runs only once after the initial render\n\n return (Counter App\n);\n}\n\n// Main component of the Counter App\nfunction CounterApp() {\n // State hook to manage the count value\n const [count, setCount] = useState(0);\n\n return (\n <>\n {/* Render the TimeToRender component */}{/* Button to increase the count */}\n setCount(count + 1)}>Increase\n {/* Button to decrease the count */}\n setCount(count - 1)}>Decrease{/* Display the current count */}{count});\n}\n\n// Export the CounterApp component as the default export\nexport default CounterApp;\nКод выше — это приложение-счетчик, которое увеличивает и уменьшает счетчик при нажатии кнопки. У него есть функция TimeToRender, которая измеряет время, необходимое для рендеринга компонента каждый раз, когда он рендерится.\n\nНа рисунке ниже показано, когда компонент рендерится в компиляторе, и время, необходимое для повторного рендеринга.\n\nиспользовать (1)\n\nНа изображении ниже показано время, необходимое для каждой повторной визуализации всего компонента в транспиляторе.\n\nкомпилятор (1)\n\nНа изображении выше мы видим, что транспилятор выполняет повторную визуализацию несколько раз, и время повторной визуализации уменьшается с каждым щелчком, в то время как компилятор выполняет визуализацию только один раз.\n\nРаньше мы бы использовали хуки memo , useMemo() и useCallback() для достижения этого. Это сделало бы эти хуки устаревшими. Кроме того, у нас был бы более чистый и меньше строк кода.\n\nНовые крючки\nХуки — одна из самых популярных функций React. Они помогают управлять методами состояния и жизненного цикла. React имеет встроенные хуки, а также предлагает возможность создания пользовательских хуков.\n\nВ React 19 было введено четыре новых хука:\n\nИспользование Transition Hook\nХук useActionState\nХук useFormStatus\nИспользованиеOptimistic Hook\nИспользование Transition Hook\nReact 19 поддерживает использование asyncфункций в переходах для управления изменениями состояния, которые могут привести к изменениям пользовательского интерфейса. Вы можете использовать useTransitionхук для обновления статуса состояния, чтобы автоматически показать, находится ли оно в состоянии ожидания или нет.\n\nЭто гарантирует, что когда пользователь запускает обновление, оно обрабатывается гладко. Кроме того, пользовательский интерфейс будет отражать правильное состояние функции async. Давайте рассмотрим пример кода.\n\nКод ниже — это приложение, которое добавляет алфавит в список. При нажатии кнопки добавления оно ждет 4 секунды, прежде чем добавить алфавит в список. Мы можем автоматически обрабатывать состояние ожидания с помощью startTransition asyncфункции.\n\nimport React, { useState, useTransition } from \"react\";\n\n// Function to create a delay for a given number of milliseconds\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Asynchronous function to add an alphabet to the list after a delay\nasync function addAlphabetToList(alphabet) {\n await delay(4000);\n return null;\n}\n\n// Component to add an alphabet to a list\nfunction AlphabetAdder() {\n const [alphabet, setAlphabet] = useState(\"\");\n const [error, setError] = useState(null);\n // State and function for transition\n const [isPending, startTransition] = useTransition();\n const [alphabetList, setAlphabetList] = useState([]); // State to store the list of alphabets\n\n // Function to handle adding an alphabet to the list\n const handleAddAlphabet = async () => {\n startTransition(async () => {\n const error = await addAlphabetToList(alphabet); // Add alphabet to the list with delay\n if (error) {\n setError(error);\n } else {\n setAlphabetList([...alphabetList, alphabet]);\n }\n });\n };\n\n // Log the pending state\n console.log(\"Pending:\", isPending);\n\n return <>;\n}\nНа изображении ниже показано, что состояние ожидания сохраняется trueдо тех пор, пока алфавит не будет добавлен в список через 4 с.\n\nиспользованиеперехода\n\nЭто контрастирует с предыдущими версиями, где мы обрабатывали состояние ожидания вручную, используя setIsPendingdingфункцию для установки состояния в значение trueили false.\n\nimport React, { useState } from \"react\";\n\n// Function to create a delay\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Async function to simulate adding an alphabet to a list after a delay\nasync function addAlphabetToList(alphabet) {\n await delay(4000);\n return null;\n}\n\nfunction AlphabetAdder() {\n const [alphabet, setAlphabet] = useState(\"\");\n const [error, setError] = useState(null);\n // State to manage the pending state\n const [isPending, setIsPending] = useState(false);\n const [alphabetList, setAlphabetList] = useState([]);\n\n // Function to handle adding the alphabet\n const handleAddAlphabet = async () => {\n setIsPending(true);\n // Add the alphabet to the list after the delay\n const error = await addAlphabetToList(alphabet);\n if (error) {\n setError(error);\n } else {\n setAlphabetList([...alphabetList, alphabet]);\n }\n setIsPending(false);\n };\n\n // Log the pending state\n console.log(\"Pending:\", isPending);\n\n return <>;\n}\nexport default AlphabetAdder;\nХук useActionState\nХук useActionStateиспользуется для управления изменениями состояния в пользовательском интерфейсе, как и useTransitionхук. Что отличает его от useTransitionхука выше, так это то, что он назначает состояния error, action, и pendingв одной строке кода вместо нескольких строк, как показано выше. Кроме того, useTransitionхук обрабатывает только состояние ожидания.\n\nМы можем переписать код выше, используя useActionState, что даст нам меньше строк кода.\n\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\nasync function addAlphabetToList(name) {\n await delay(4000);\n return null;\n}\n\nfunction AlphabetAdder() {\n const [error, submitAction, isPending] = useActionState(\n async (previousState, formData) => {\n const error = await addAlphabetToList(formData.get(\"name\"));\n if (error) {\n return error;\n }\n\n return null;\n },\n null,\n );\n\n console.log(\"Pending:\", isPending);\n return <>;\n}\nВ приведенном выше коде useActionStateхук используется для автоматической обработки состояний error, submitActionи isPendingбез явного определения его с помощью useStateхука или useTransitionхука для ожидающих состояний, как мы делали ранее.\n\nХук useFormStatus\nХук useFormStatusиспользуется для доступа к информации об отправленной форме. Вы можете получить доступ к состоянию формы, находящейся в режиме ожидания или нет.\n\nВот пример кода, который использует useFormStatusхук для доступа к состоянию ожидания формы.\n\nfunction FormStatusButton() {\n const { isPending } = useFormStatus();\n return ({isPending ? \"Adding...\" : \"Add\"});\n}\nРаньше для доступа к состоянию ожидания мы бы передавали состояние с помощью prop. В примере кода ниже мы передали isPendingсостояние как свойство функции CustomButtonдля доступа к нему в операторе return.\n\nfunction CustomButton({ isPending }) {\n return ({isPending ? \"Adding...\" : \"Add\"});\n}\nИспользованиеOptimistic Hook\nЭтот хук позволяет нам мгновенно обновлять пользовательский интерфейс при изменении некоторого состояния, не дожидаясь asyncзавершения действия. Например, в чат-приложениях, когда отправляется сообщение, оно немедленно обновляется в пользовательском интерфейсе, даже до того, как оно будет отправлено получателю, и в большинстве случаев добавляются галочки, чтобы знать, когда оно полностью доставлено.\n\nКод ниже иллюстрирует приложение задач, где при добавлении задачи в список задач она проходит через asyncфункцию и, наконец, обновляется в пользовательском интерфейсе через 4 с. Мы используем useOptimisticхук для немедленного отображения добавленной задачи в пользовательском интерфейсе, даже до того, как закончится 4-секундная продолжительность.\n\nfunction App({ initialTasks }) {\n // State to hold the tasks\n const [tasks, setTasks] = useState(initialTasks);\n // Optimistic UI state for tasks\n const [optimisticTask, addOptimisticTasks] = useOptimistic(tasks);\n\n const inputRef = useRef(null);\n\n // Handle form submission\n async function handleSubmit(e) {\n if (inputRef.current == null) return;\n\n // Create an optimistic task\n const optimisticTask = {\n id: crypto.randomUUID(),\n title: inputRef.current.value,\n };\n\n // Add the optimistic task to the state\n addOptimisticTasks((prev) => [...prev, optimisticTask]);\n\n // Create a new task (simulating server creation)\n const newTask = await createTask(inputRef.current.value);\n // Add the new task to the state\n setTasks((prev) => [...prev, newTask]);\n }\n\n return (\n <>\n \n \n Add New Task\n \n \n\n \n \n \n \n\n Create Task{/* Render the list of optimistic tasks */} {optimisticTask.map((task) => ({task.title}\n))} \n \n );\n}\n\n// Function that simulates creating a task on the server\nfunction createTask(title) {\n return delay(\n { id: crypto.randomUUID(), title: `${title} - in the server` },\n 4000,\n );\n}\n\n// Function to create a delay\nfunction delay(value, duration) {\n return new Promise((resolve) => {\n setTimeout(() => resolve(value), duration);\n });\n}\n\nexport default App;\nНа изображении ниже показано, как пользовательский интерфейс обновляется немедленно. Через 4 секунды задача заменяется на ту, что на сервере.\n\nиспользованиеперехода (1)\n\nРаньше мы бы справились с этим, используя useStateхук, чтобы управлять оптимистичным отображением задач и обновлять его фактической задачей.\n\nconst [tasks, setTasks] = useState(initialTasks);\n// Setting optimistic tasks using the useState hook\nconst [optimisticTasks, setOptimisticTasks] = useState(initialTasks);\n\nconst inputRef = useRef(null);\n\nasync function handleSubmit(e) {\n e.preventDefault(); // Prevent default form submission\n\n if (inputRef.current == null) return;\n\n const optimisticTask = {\n id: crypto.randomUUID(),\n title: inputRef.current.value,\n };\n\n // Add the optimistic task immediately\n setOptimisticTasks((prev) => [...prev, optimisticTask]);\n\n // Create the actual task with a delay\n const newTask = await createTask(inputRef.current.value);\n setTasks((prev) => [...prev, newTask]);\n setOptimisticTasks((prev) =>\n prev.map((task) => (task.id === optimisticTask.id ? newTask : task)),\n );\n}\nВ приведенном выше коде используется useStateхук для добавления optimisticTasksоптимистичных обновлений пользовательского интерфейса и его функция-установщик setOptimistictask для обновления состояния.\n\nНовый API - используйте\nAPI use позволяет использовать Promisesи async-await. Он принимает только Promise, а не функцию, когда Promiseзавершает работу до обновления пользовательского интерфейса. Вы можете вызывать этот API внутри операторов if и циклов. Вы также можете вызывать этот API внутри операторов if и циклов.\n\nДавайте рассмотрим пример кода. Он содержит 2 asyncфункции, которые имитируют выборку данных с задержкой, как это обычно бывает при отправке данных на сервер. Он возвращает список авторов и блогов после задержки в 4 и 2 секунды соответственно, перед обновлением пользовательского интерфейса этими значениями.\n\nimport { use, Suspense } from \"react\";\n\n// Create a delay\nconst delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\n// Async function that fetches the list of blogs after the delay\nconst getBlogs = async () => {\n await delay(4000);\n return [\"OpenReplay\", \"Devto\", \"Medium\"];\n};\n\n// Async function that fetches the list of authors after a delay\nconst getAuthors = async () => {\n await delay(2000);\n return {\n isFetchUsers: true,\n authors: [\"Mary Chidera\", \"Ugorji Marydera\", \"Ken Erics\"],\n };\n};\n\n// Component to retrieve and display authors and blogs\nfunction RetrieveAuthors({ authorsPromise, blogsPromise }) {\n // Use the authorsPromise to get the authors' data\n const { isFetchUsers, authors } = use(authorsPromise);\n\n console.log(\"Authors Promise Done: \", authors);\n\n let blogs;\n // If users are fetched, use the blogsPromise to get the blogs data\n if (isFetchUsers) blogs = use(blogsPromise);\n\n console.log(\"Blogs Promise is done :\", blogs);\n\n return (\n <>Authors\n))}{/* Map over the authors array and display each author */}\n {authors.map((author, idx) => ({author}{blogs && (Top Blogs\n))}{/* Map over the blogs array and display each blog */}\n {blogs.map((blog, idx) => ({blog})}\n \n );\n}\n\n// Main App component\nfunction App() {\n // Create promises for authors and blogs\n const authorsPromise = getAuthors();\n const blogsPromise = getBlogs();\n\n return (\n // Use Suspense to handle loading states\n \n Loading Authors...}>\n \n \n \n \n );\n}\n\nexport default App;\nНа изображении ниже показано, как пользовательский интерфейс обновляется только после того, как все Promisesзагрузилось.\n\nиспользовать\n\nСсылка как обычный реквизит\nСсылки позволяют напрямую получать доступ к элементам DOM и взаимодействовать с ними. Они сохраняют свои значения между рендерингами и не вызывают повторного рендеринга компонента.\n\nВ React 19 теперь можно передавать refкак обычный объект propвместо использования forwardRefдля передачи a refкомпоненту.\n\nВот новая реализация refобычного prop.\n\nfunction NewRef({ ref }) {\n return Click Me;\n}\n\n//...\n;\nВот как мы бы реализовали это ранее. Как показано ниже, мы используем forwardRefдля определения OldRefкомпонента. The forwardRefпринимает propsи a ref. refТеперь компонент может получить к нему доступ button.\n\nconst OldRef = forwardRef((props, ref) => {\n return (\n \n {props.children}\n \n );\n});\n\n//...\n\n \n Click me\n\n ;\nДействие\nВ формах теперь можно передавать свойство действия . Это propможет быть asyncфункция или URL. Форма будет выполняться action propпри отправке формы.\n\nМы также можем получить доступ к полям ввода и элементам формы, передав их formDataфункции и используя getAPI.\n\nfunction Form() {\n const addBlogName = (formData) => {\n const blogName = formData.get(\"blogName\");\n console.log(`You submitted '${blogName}'`);\n };\n\n return (\n \n \n \n \n Search\n \n \n );\n}\n\nexport default Form;\nРаньше мы бы получили доступ к переданному имени, используя event.\n\nconst addBlogName = (event) => {\n event.preventDefault();\n const blogName = event.target.elements.blogName.value;\n console.log(`You submitted '${blogName}'`);\n};\nВ приведенной выше функции addBlogNameмы напрямую обращаемся к значению во входном элементе, используя blogNameдля event.target.elementsдоступа к элементу и его свойству.\n\nКонтекст как поставщик\nТеперь вы можете напрямую использовать контекст в качестве поставщика в вашем коде. Раньше, когда бы мы ни хотели вызвать context, нам приходилось делать contextName.Provider, а затем передавать потомков. Теперь нам больше не нужно этого делать, поскольку мы можем напрямую вызывать только имя без .Provider.\n\nВ приведенном ниже коде мы создали контекст с именем lightModeContextи вызвали его непосредственно в операторе return.\n\n//Context we created\nconst lightModeContext = createContext({ theme: \"light\" });\n\n//New method of calling the context directly as a provider\nfunction App({ children }) {\n return \n Children\n ;\n}\nРаньше нам пришлось бы получать доступ к созданному нами контексту, вызывая lightModeContext.Provider.\n\n//old method of calling the context with the .Provider\nfunction App({ children }) {\n return ;\n}\nПоддержка метаданных документа\nReact 19 поддерживает рендеринг тегов метаданных в компоненте. Раньше мы бы делали это с помощью сторонних библиотек, таких как react-helmet .\n\nВ приведенном ниже коде мы напрямую обновляем элементы titleи metaв Appкомпоненте.\n\nfunction App({ post }) {\n return ({post.title}\n{/*meta tags */}\n {title}","type":"atomic","key":"28i00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":86,"style":"BOLD"},{"length":6,"offset":137,"style":"BOLD"},{"length":5,"offset":145,"style":"BOLD"},{"length":13,"offset":156,"style":"BOLD"}],"text":"Вот пример того, как мы делали это в более ранних версиях с использованием библиотеки react-helmet. В этом примере мы обновляли элементы title и meta через react-helmet:","type":"unstyled","key":"7jj2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");\n}\n\nexport default App;\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nfunction App({ post }) {\n return ({post.title}\n{post.title}\n \n \n \n \n \n \n {/* Other content of your component */}","type":"atomic","key":"6v03s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В приведенном выше коде для установки элементов title и meta мы использовали компонент Helmet из библиотеки react-helmet.","type":"unstyled","key":"21l4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшенные отчеты об ошибках","type":"header-three","key":"eqgdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":262,"style":"BOLD"}],"text":"Ошибки в новой версии React 19 стали выглядеть менее многословно и более читаемо. Теперь вместо дублирования ошибок в консоли React 19 пытается предоставить одну ошибку с полной информацией о проблеме. На изображении ниже показана ошибка, возникшая в компоненте ErrorComponent в React 18.","type":"unstyled","key":"8e1rq"},{"data":{"image":{"id":"66fa8f03c4d8672f95249395"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Ошибка, возникшая в компоненте ErrorComponent в React 18","type":"atomic:image","key":"3vcbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот изображение, демонстрирующее ту же ошибку, как и в React 19, но представленную в отчете React 18.","type":"unstyled","key":"bds6"},{"data":{"image":{"id":"66fa8f03c4d8672f95249396"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Ошибка, возникшая в компоненте ErrorComponent в React 19","type":"atomic:image","key":"6lkc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"bboj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React 19 представляет захватывающие новые функции, которые значительно улучшают опыт разработчиков. Мы осмыслили такие новые функции, как компилятор, способный решать проблемы повторного рендеринга, новые хуки для улучшения пользовательского опыта, а также улучшенные отчеты об ошибках, предоставляющие более лаконичные сообщения об ошибках.","type":"unstyled","key":"8buhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ndicVBdjrzlpDmabXuM7"}],"entityMap":{"11":{"data":{"href":"https://proglib.io/w/d5c8713b","url":"https://proglib.io/w/d5c8713b"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://proglib.io/p/uluchshennaya-obrabotka-asinhronnyh-operaciy-v-react-19-2024-09-16","url":"https://proglib.io/p/uluchshennaya-obrabotka-asinhronnyh-operaciy-v-react-19-2024-09-16"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://react.dev/reference/react/useTransition","url":"https://react.dev/reference/react/useTransition"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://react.dev/reference/react/useActionState","url":"https://react.dev/reference/react/useActionState"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://react.dev/reference/react-dom/hooks/useFormStatus#noun-labs-1201738-(2)","url":"https://react.dev/reference/react-dom/hooks/useFormStatus#noun-labs-1201738-(2)"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://react.dev/reference/react/useOptimistic#noun-labs-1201738-(2)","url":"https://react.dev/reference/react/useOptimistic#noun-labs-1201738-(2)"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://react.dev/reference/react/useTransition","url":"https://react.dev/reference/react/useTransition"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://proglib.io/p/react-19-unichtozhit-vse-freymvorki-2024-04-23","url":"https://proglib.io/p/react-19-unichtozhit-vse-freymvorki-2024-04-23"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}