{"id":495399,"date":"2026-09-21T09:47:32","date_gmt":"2026-09-21T09:47:32","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=495399"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=495399","title":{"rendered":"React 19.3"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab<a href=\"https:\/\/react.dev\/blog\/2026\/09\/09\/react-19-3\" rel=\"noopener nofollow\">React 19.3<\/a>\u00bb.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u00ab<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener nofollow\">Frontend \u043f\u043e\u2011\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/a>\u00bb, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437\u00a0\u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 AI.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React<\/h3>\n<h4>View Transitions<\/h4>\n<p>\u041d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;ViewTransition&gt;<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438 \u0438\u0445 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438, \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0438, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transition_API\" rel=\"noopener nofollow\">View Transition API<\/a>.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443 \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0435\u0433\u043e \u043a\u0430\u043a <a href=\"https:\/\/react.dev\/blog\/2025\/04\/23\/react-labs-view-transitions-activity-and-more#view-transitions\" rel=\"noopener nofollow\">\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 API<\/a>, \u0430 \u0432 React 19.3 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0435\u0451 \u0432 <code>&lt;ViewTransition&gt;<\/code>:<\/p>\n<pre><code class=\"javascript\">import { ViewTransition } from 'react';{isShowing &amp;&amp; (  &lt;ViewTransition&gt;    &lt;Component \/&gt;  &lt;\/ViewTransition&gt;)}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u0430\u043a <a href=\"https:\/\/react.dev\/reference\/react\/useTransition\" rel=\"noopener nofollow\">Transition<\/a>, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e <code>ViewTransition<\/code>, React \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c, React \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0434\u0435\u0440\u0435\u0432\u043e:<\/p>\n<ul>\n<li>\n<p><strong>enter<\/strong> \u2014 <code>&lt;ViewTransition&gt;<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>exit<\/strong> \u2014 <code>&lt;ViewTransition&gt;<\/code> \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>update<\/strong> \u2014 \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;ViewTransition&gt;<\/code> \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>share<\/strong> \u2014 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <code>&lt;ViewTransition&gt;<\/code> \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0430\u0436\u043d\u043e: \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a Transition, \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u041e\u043d\u0438 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u043c\u0438 \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<p>View Transition \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <a href=\"https:\/\/react.dev\/reference\/react\/startTransition\" rel=\"noopener nofollow\">startTransition<\/a>, \u043f\u0440\u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u0438 <a href=\"https:\/\/react.dev\/reference\/react\/Suspense\" rel=\"noopener nofollow\"><code>&lt;Suspense&gt;<\/code><\/a> \u0438\u043b\u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 <a href=\"https:\/\/react.dev\/reference\/react\/useDeferredValue\" rel=\"noopener nofollow\"><code>useDeferredValue<\/code><\/a>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { ViewTransition, useState, startTransition } from 'react';import { Video } from '.\/Video';import videos from '.\/data';export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}&gt;        {showItem ? '\u2796' : '\u2795'}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition&gt;          &lt;Video video={videos[0]} \/&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/sh9fks?file=%2Fsrc%2FApp.js\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/sh9fks?file=%2Fsrc%2FApp.js<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>&lt;ViewTransition&gt;<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u0443\u044e cross-fade-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e: \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#view-transition-class\" rel=\"noopener nofollow\">View Transition Class<\/a> \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0451 \u0432 CSS \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Animations_API\" rel=\"noopener nofollow\">Web Animations API<\/a>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#view-transition-event\" rel=\"noopener nofollow\">\u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b<\/a> (<code>onEnter<\/code>, <code>onExit<\/code>, <code>onShare<\/code>, <code>onUpdate<\/code>).<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 <code>&lt;ViewTransition&gt;<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 DOM. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 React Native \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <code>&lt;ViewTransition&gt;<\/code><\/a>.<\/p>\n<h3>addTransitionType<\/h3>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043b\u0438\u0441\u0442\u0430\u0435\u0442 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u044c <em>\u0432\u043f\u0435\u0440\u0451\u0434<\/em> \u043a \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0443, \u0441\u043b\u0430\u0439\u0434\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0410 \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f <em>\u043d\u0430\u0437\u0430\u0434<\/em> \u043a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0443 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 <code>currentSlide<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>3<\/code>.<\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e View Transition \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 <code>addTransitionType<\/code> \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e <em>\u043f\u0440\u0438\u0447\u0438\u043d\u0435<\/em>, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0451\u043b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">function nextSlide() {  startTransition(() =&gt; {    addTransitionType('next');    setCurrentSlide(c =&gt; c + 1);  });}function previousSlide() {  startTransition(() =&gt; {    addTransitionType('previous');    setCurrentSlide(c =&gt; c - 1);  });}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430:  <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition  enter={{    'next': 'from-right',    'previous': 'from-left',  }}  exit={{    'next': 'to-left',    'previous': 'to-right',  }}&gt;  &lt;Page \/&gt;&lt;\/ViewTransition&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {  ViewTransition,  addTransitionType,  useState,  startTransition,  Fragment} from 'react';import { Video } from '.\/Video';import videos from '.\/data';import '.\/animations.css';export default function Component() {  const [selected, setSelected] = useState(0)  const video = videos[selected];  return (    &lt;&gt;      &lt;div className=\"button-container\"&gt;        &lt;button          onClick={() =&gt; {            startTransition(() =&gt; {              addTransitionType('previous');              setSelected(c =&gt; c &gt; 0 ? c - 1 : videos.length - 1 )            });          }}&gt;          \u2b05\ufe0f        &lt;\/button&gt;        &lt;button          onClick={() =&gt; {            startTransition(() =&gt; {              addTransitionType('next');              setSelected(c =&gt; c + 1 &lt; videos.length ? c + 1 : 0)            });          }}&gt;          \u27a1\ufe0f        &lt;\/button&gt;      &lt;\/div&gt;      &lt;ViewTransition        key={video.id}        enter={{          'next': 'from-right',          'previous': 'from-left'        }}        exit={{          'next': 'to-left',          'previous': 'to-right'        }}      &gt;        &lt;Video video={video} \/&gt;      &lt;\/ViewTransition&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/w2sqll\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/w2sqll<\/a><\/p>\n<\/div>\n<\/details>\n<p>React \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 Transition Type \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 <a href=\"https:\/\/www.w3.org\/TR\/css-view-transitions-2\/#active-view-transition-pseudo-examples\" rel=\"noopener nofollow\">view transition type<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 CSS \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:active-view-transition-type(...)<\/code>.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u2014 \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/addTransitionType\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <code>addTransitionType<\/code><\/a>.<\/p>\n<h3>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0441 Suspense<\/h3>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 View Transitions \u0432 React \u2014 \u0438\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 Suspense.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c Suspense boundary \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0451 \u0432 <code>&lt;ViewTransition&gt;<\/code>:<\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition&gt;  &lt;Suspense fallback={&lt;Loading \/&gt;}&gt;    &lt;Component \/&gt;  &lt;\/Suspense&gt;&lt;\/ViewTransition&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f, React \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0442\u0438\u043f\u0430 <strong>update<\/strong>, \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u043e\u0442 fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u2795, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c <code>LazyVideo<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Suspense:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { Suspense, useState, startTransition, use, ViewTransition } from 'react';import { Video, VideoPlaceholder } from '.\/Video';import { fetchVideo } from '.\/data';export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}      &gt;        {showItem ? '\u2796' : '\u2795'}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition&gt;          &lt;Suspense fallback={&lt;VideoPlaceholder \/&gt;}&gt;            &lt;LazyVideo \/&gt;          &lt;\/Suspense&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}function LazyVideo() {  const video = use(fetchVideo());  return &lt;Video video={video} \/&gt;;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/35j6xn\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/35j6xn<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441: \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f\u0445 \u0432\u0438\u0434\u0435\u043e \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0438, \u0445\u043e\u0442\u044f \u043e\u043d\u043e \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e. (\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 fallback \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.)<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Suspense \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0443\u0436\u0435 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 UX \u043f\u0440\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 Suspense:<\/p>\n<ul>\n<li>\n<p>Fallback \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443, <em>\u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/em><\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 fallback \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c <em>\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439<\/em><\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Suspense, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443, <em>\u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/em><\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 fallback \u043a \u0433\u043e\u0442\u043e\u0432\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u043c.<\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition update=\"auto\" default=\"none\"&gt;  &lt;Suspense fallback={&lt;Fallback \/&gt;}&gt;    &lt;Component \/&gt;  &lt;\/Suspense&gt;&lt;\/ViewTransition&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { Suspense, useState, startTransition, use, ViewTransition } from 'react';import { Video, VideoPlaceholder } from '.\/Video';import { fetchVideo } from '.\/data';export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}      &gt;        {showItem ? '\u2796' : '\u2795'}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition update=\"auto\" default=\"none\"&gt;          &lt;Suspense fallback={&lt;VideoPlaceholder \/&gt;}&gt;            &lt;LazyVideo \/&gt;          &lt;\/Suspense&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}function LazyVideo() {  const video = use(fetchVideo());  return &lt;Video video={video} \/&gt;;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/jpm23l\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/jpm23l<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 fallback \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0410 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u0438\u0434\u0435\u043e \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c, \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#animating-from-suspense-content\" rel=\"noopener nofollow\">\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 Suspense<\/a>.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, View Transitions \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043a Suspense \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0430\u0441\u044c \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 Suspense \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0438\u0445 \u0432 <code>&lt;ViewTransition&gt;<\/code>:<\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition&gt;  &lt;Suspense fallback={&lt;Fallback \/&gt;}&gt;    &lt;img src={imageSrc} \/&gt;    &lt;style href={fontSrc} precedence=\"default\"&gt;      {`@font-face {        font-family: 'Fancy';        src: url(${fontSrc}) format('truetype');        font-display: swap;      }`}    &lt;\/style&gt;  &lt;\/Suspense&gt;&lt;\/ViewTransition&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 Suspense \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0448\u0440\u0438\u0444\u0442:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/r7l9ss\" rel=\"noopener nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/Suspense#waiting-for-a-font-to-load\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Suspense<\/a>.<\/p>\n<h2>Fragment Refs<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 DOM-\u0443\u0437\u043b\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u043e\u043a\u0443\u0441\u043e\u043c, \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ref<\/code>. \u041d\u043e \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u044d\u0442\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0433\u0440\u0443\u043f\u043f\u0443 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u043f <code>ref<\/code> \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">function Component() {\/\/ \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043f\u0438\u0441\u043a\u0443 DOM-\u0443\u0437\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442?  return (    {posts.map(post =&gt; (      &lt;Heading key={post.id}&gt;        {post.title}      &lt;\/Heading&gt;    ))}  )}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0451\u0440\u0442\u043a\u0443 <code>&lt;div&gt;<\/code> \u0440\u0430\u0434\u0438 <code>ref<\/code>, \u043d\u043e \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u043f <code>ref<\/code>, \u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c, \u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>Fragment Refs \u0440\u0435\u0448\u0430\u044e\u0442 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 DOM-\u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043b\u044e\u0431\u044b\u043c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442.<\/p>\n<p>\u0412 React 19.3 <code>ref<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/Fragment\" rel=\"noopener nofollow\"><code>&lt;Fragment&gt;<\/code><\/a>. \u0422\u0430\u043a\u043e\u0439 <code>ref<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <code>FragmentInstance<\/code>, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 DOM-\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">function Component() {  const fragmentRef = useRef(null);  useEffect(() =&gt; {    const fragmentInstance = fragmentRef.current;    fragmentInstance.focus();  }, []);  return (    &lt;Fragment ref={fragmentRef}&gt;      {posts.map(post =&gt; (        &lt;Heading key={post.id}&gt;          {post.title}        &lt;\/Heading&gt;      ))}    &lt;\/Fragment&gt;  )}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>FragmentInstance<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 DOM \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <em>\u043a\u0430\u043a \u0441 \u0435\u0434\u0438\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u043e\u0439<\/em>, \u043d\u0435 \u043c\u0435\u043d\u044f\u044f \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<ul>\n<li>\n<p><code>addEventListener<\/code>, <code>removeEventListener<\/code> \u0438 <code>dispatchEvent<\/code> \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f.<\/p>\n<\/li>\n<li>\n<p><code>focus<\/code>, <code>focusLast<\/code> \u0438 <code>blur<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u043f\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443.<\/p>\n<\/li>\n<li>\n<p><code>observeUsing<\/code> \u0438 <code>unobserveUsing<\/code> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 <code>IntersectionObserver<\/code> \u0438\u043b\u0438 <code>ResizeObserver<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>getClientRects<\/code>, <code>getRootNode<\/code>, <code>compareDocumentPosition<\/code> \u0438 <code>scrollIntoView<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043a \u043d\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Fragment Refs \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u0438\u043c\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b DOM.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>InView<\/code> \u0441 \u043f\u0440\u043e\u043f\u043e\u043c <code>onChange<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043f\u043e\u043a\u0438\u0434\u0430\u044e\u0442 \u0435\u0451:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/z8w6dj\" rel=\"noopener nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: <code>InView<\/code> \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a \u0441\u0432\u043e\u0438\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e <code>Card<\/code> \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u043f <code>ref<\/code>.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Fragment Refs \u2014 \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/Fragment\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <code>&lt;Fragment&gt;<\/code><\/a>.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React DOM<\/h3>\n<h4>browser<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435: \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435: \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 HTML \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0438\u0445 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0443\u0436\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041d\u043e \u0432 \u0440\u0435\u0434\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e API \u0432\u0440\u043e\u0434\u0435 <code>localStorage<\/code> \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u044f\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API \u0432\u0440\u043e\u0434\u0435 <code>window<\/code>:<\/p>\n<pre><code class=\"javascript\">function Component() {  const [mounted, setMounted] = useState(false);  useEffect(() =&gt; {    setMounted(true)  }, [])  \/\/ ...}function Component() {  const isBrowser = typeof window !== 'undefined';  \/\/ ...}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412 React 19.3 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 API.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>use(browser())<\/code>:<\/p>\n<pre><code class=\"javascript\">import { use } from 'react';import { browser } from 'react-dom';function Component() {  use(browser());  \/\/ ...}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u0432\u044b\u0437\u043e\u0432 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 Suspense, \u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <em>\u043d\u0435\u0442<\/em>. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 HTML \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f fallback \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0439 Suspense boundary. \u041f\u043e\u0441\u043b\u0435 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <code>use(browser())<\/code> \u0443\u0436\u0435 \u043d\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u044f\u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 <strong>Reload<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 React:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { Suspense, use } from 'react';import { browser } from 'react-dom';function TimeZone() {  use(browser());  const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;  return &lt;p&gt;{timeZone}&lt;\/p&gt;}export default function App() {  return (    &lt;&gt;      &lt;p&gt;Your current time zone is:&lt;\/p&gt;      &lt;Suspense fallback=\"Loading...\"&gt;        &lt;TimeZone \/&gt;      &lt;\/Suspense&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/6ghn7s\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/6ghn7s<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>TimeZone<\/code> \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 fallback \u0438\u0437 Suspense. \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 React \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, <code>browser<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Suspense \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b <code>use<\/code>, <code>use(browser())<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u043d\u043d\u0435\u0433\u043e <code>return<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0445\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0430.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>TimeZone<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0443\u0436\u0435 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c HTML:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { Suspense, use } from 'react';import { browser } from 'react-dom';function TimeZone({ defaultValue }) {  if (defaultValue) {    return &lt;p&gt;{defaultValue}&lt;\/p&gt;;  }  use(browser());  const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;  return &lt;p&gt;{localTimeZone}&lt;\/p&gt;}export default function App() {  return (    &lt;&gt;      &lt;div&gt;        &lt;p&gt;The event's time zone is:&lt;\/p&gt;        &lt;TimeZone defaultValue='America\/New_York' \/&gt;      &lt;\/div&gt;      &lt;hr \/&gt;      &lt;div&gt;        &lt;p&gt;Your current time zone is:&lt;\/p&gt;        &lt;Suspense fallback=\"Loading...\"&gt;          &lt;TimeZone \/&gt;        &lt;\/Suspense&gt;      &lt;\/div&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/m5xxlq\" rel=\"noopener nofollow\">https:\/\/codesandbox.io\/p\/sandbox\/m5xxlq<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: <code>TimeZone<\/code> \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e.<\/p>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f data-fetching-\u0445\u0443\u043a\u0430 \u0432\u0440\u043e\u0434\u0435 <code>useQuery<\/code>, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 Server Component \u0438\u043b\u0438 loader-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">function useBrowserQuery(query, options) {  if (options.initialData === undefined) {    use(browser());  }  return useQuery(query, options);}function ProductDetails({ productId, initialData }) {  const product = useBrowserQuery(`\/api\/products\/${productId}`, {    initialData,  });  return &lt;h1&gt;{product.name}&lt;\/h1&gt;;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>ProductDetails<\/code> \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 HTML, \u0435\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>initialData<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0447\u043d\u0451\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e <code>useQuery<\/code> \u0441\u043c\u043e\u0436\u0435\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445 \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e <code>browser<\/code> \u0432 <a href=\"https:\/\/react.dev\/reference\/react-dom\/browser\" rel=\"noopener nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<hr\/>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Trusted Types<\/h4>\n<p>React 19.3 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Trusted_Types_API\" rel=\"noopener nofollow\">Trusted Types API<\/a>, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0442\u044c XSS-\u0430\u0442\u0430\u043a\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 DOM.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0430\u0439\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 Trusted Types \u0447\u0435\u0440\u0435\u0437 <code>Content-Security-Policy: require-trusted-types-for 'script'<\/code>, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0442\u0440\u0435\u0431\u0443\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 <code>innerHTML<\/code>, \u0431\u044b\u043b\u0438 \u043d\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0430 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 (<code>TrustedHTML<\/code>, <code>TrustedScript<\/code>, <code>TrustedScriptURL<\/code>), \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u0438\u0442\u0438\u043a \u0441\u0430\u043d\u0438\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 React \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b \u0442\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a \u0441\u0442\u0440\u043e\u043a\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>'' + value<\/code> \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0432 DOM API. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u044b Trusted Types \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u043b\u0438\u0441\u044c \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u043b.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c React \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0442\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u0445 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0430 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 Trusted Types \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React Server Components<\/h3>\n<h4> \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 Server Components<\/h4>\n<p>Server Components \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 <em>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c<\/em> Context, \u043d\u043e \u043c\u043e\u0433\u0443\u0442 <em>\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c<\/em> \u0435\u0433\u043e, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u0438\u0437 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 <code>'use client'<\/code>.<\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0451\u0440\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0438 Provider:<\/p>\n<pre><code class=\"javascript\">\/\/ user-context.js'use client';import { createContext } from 'react';export const UserContext = createContext(null);export function UserProvider({ currentUser, children }) {  return &lt;UserContext value={currentUser}&gt;{children}&lt;\/UserContext&gt;;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"javascript\">\/\/ server-component.jsimport { UserProvider } from '.\/user-context';export async function Layout({ children }) {  const currentUser = await getCurrentUser();  return (    &lt;UserProvider currentUser={currentUser}&gt;      {children}    &lt;\/UserProvider&gt;  )}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Provider \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u043f \u0438\u0437 Server Component \u0432 Context.<\/p>\n<p>\u0412 React 19.3 Server Components \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c Context \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 <code>'use client'<\/code> \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043e\u0431\u0451\u0440\u0442\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ user-context.js'use client';import { createContext } from 'react';export const UserContext = createContext(null);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"javascript\">\/\/ server-component.jsimport { UserContext } from '.\/user-context';export async function Layout({ children }) {  const currentUser = await getCurrentUser();  return (    &lt;UserContext value={currentUser}&gt;      {children}    &lt;\/UserContext&gt;  )}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f Context, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b Server Components \u043c\u043e\u0433\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<h3>Changelog<\/h3>\n<p>\u0414\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/p>\n<ul>\n<li>\n<p><code>react<\/code>: Transitions \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0430 \u043d\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0440\u0435\u043d\u0434\u0435\u0440. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 Transition \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b <a href=\"https:\/\/github.com\/react\/react\/pull\/37290\" rel=\"noopener nofollow\">#37290<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0412 Strict Mode \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b \u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u043a\u043e\u0440\u043d\u0435\u0439, \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <a href=\"https:\/\/github.com\/react\/react\/pull\/35961\" rel=\"noopener nofollow\">#35961<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>use<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f <a href=\"https:\/\/github.com\/react\/react\/pull\/37104\" rel=\"noopener nofollow\">#37104<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0412 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 <code>useActionState<\/code> \u0442\u0435\u0440\u043c\u0438\u043d \u00abform state\u00bb \u0437\u0430\u043c\u0435\u043d\u0451\u043d \u043d\u0430 \u00abaction state\u00bb <a href=\"https:\/\/github.com\/react\/react\/pull\/35790\" rel=\"noopener nofollow\">#35790<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>onFullscreenChange<\/code> \u0438 <code>onFullscreenError<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/34621\" rel=\"noopener nofollow\">#34621<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>maskType<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35921\" rel=\"noopener nofollow\">#35921<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <code>fetchPriority<\/code> \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 <a href=\"https:\/\/github.com\/react\/react\/pull\/36835\" rel=\"noopener nofollow\">#36835<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: <code>onReset<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 React \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 Server Action <a href=\"https:\/\/github.com\/react\/react\/pull\/35176\" rel=\"noopener nofollow\">#35176<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0412 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>submit<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <code>submitter<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35590\" rel=\"noopener nofollow\">#35590<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>credentialless<\/code> \u0443 <code>iframe<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043a \u0431\u0443\u043b\u0435\u0432\u044b\u0439 <a href=\"https:\/\/github.com\/react\/react\/pull\/36148\" rel=\"noopener nofollow\">#36148<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 <code>resize<\/code>, \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0431\u0430\u0442\u0447 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u0430\u0434\u0440\u0430 <a href=\"https:\/\/github.com\/react\/react\/pull\/35117\" rel=\"noopener nofollow\">#35117<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-server<\/code>: \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f <code>Error.cause<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35810\" rel=\"noopener nofollow\">#35810<\/a> \u0438 <code>AggregateError.errors<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/36156\" rel=\"noopener nofollow\">#36156<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-server<\/code>: \u0412 Flight \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <code>&lt;Activity&gt;<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/34697\" rel=\"noopener nofollow\">#34697<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0430\u043c\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a<\/p>\n<ul>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <code>useDeferredValue<\/code> \u043c\u043e\u0433 \u0437\u0430\u0441\u0442\u0440\u0435\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/react\/react\/pull\/36134\" rel=\"noopener nofollow\">#36134<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 Context \u0432 fallback-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Suspense <a href=\"https:\/\/github.com\/react\/react\/pull\/36160\" rel=\"noopener nofollow\">#36160<\/a> \u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 Suspense boundary <a href=\"https:\/\/github.com\/react\/react\/pull\/35839\" rel=\"noopener nofollow\">#35839<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0435\u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 Suspense boundary \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 <a href=\"https:\/\/github.com\/react\/react\/pull\/37135\" rel=\"noopener nofollow\">#37135<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <code>useSyncExternalStore<\/code> \u043c\u043e\u0433 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f store, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u0434\u0448\u0438\u0435 \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u0440\u0435\u0432\u043e <code>&lt;Activity&gt;<\/code> \u0431\u044b\u043b\u043e \u0441\u043a\u0440\u044b\u0442\u043e <a href=\"https:\/\/github.com\/react\/react\/pull\/36947\" rel=\"noopener nofollow\">#36947<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 <code>useEffectEvent<\/code>: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441 <code>forwardRef<\/code> \u0438 <code>memo<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/34831\" rel=\"noopener nofollow\">#34831<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0441\u0431\u0440\u043e\u0441 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0444\u043e\u0440\u043c\u044b \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/react\/react\/pull\/34075\" rel=\"noopener nofollow\">#34075<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0448\u0438\u0431\u043e\u043a Fast Refresh, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 <code>lazy<\/code>, <code>memo<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u0442\u0438\u043f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/react\/react\/pull\/36965\" rel=\"noopener nofollow\">#36965<\/a>, <a href=\"https:\/\/github.com\/react\/react\/pull\/36964\" rel=\"noopener nofollow\">#36964<\/a>, <a href=\"https:\/\/github.com\/react\/react\/pull\/36963\" rel=\"noopener nofollow\">#36963<\/a>, <a href=\"https:\/\/github.com\/react\/react\/pull\/36950\" rel=\"noopener nofollow\">#36950<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <code>&lt;title&gt;<\/code> \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 <code>&lt;head&gt;<\/code> \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0435\u0433\u043e <code>&lt;Activity&gt;<\/code> \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u043b\u0441\u044f \u0438\u0437 \u0440\u0435\u0436\u0438\u043c\u0430 <code>visible<\/code> \u0432 <code>hidden<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/34983\" rel=\"noopener nofollow\">#34983<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u041e\u0448\u0438\u0431\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e <code>&lt;Activity&gt;<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35074\" rel=\"noopener nofollow\">#35074<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432, \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e <code>&lt;Activity&gt;<\/code>, \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/react\/react\/pull\/35091\" rel=\"noopener nofollow\">#35091<\/a><\/p>\n<\/li>\n<li>\n<p><code>react<\/code>: \u0412\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0442\u0438\u043f <code>&lt;Offscreen&gt;<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35763\" rel=\"noopener nofollow\">#35763<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 \u0434\u043b\u044f \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438 \u0443\u0436\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u0444\u043e\u043a\u0443\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <a href=\"https:\/\/github.com\/react\/react\/pull\/36010\" rel=\"noopener nofollow\">#36010<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u0443\u0442\u0435\u0447\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 <code>FragmentInstance<\/code> \u0437\u0430 \u0441\u0447\u0451\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 <code>capture<\/code> \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 DOM <a href=\"https:\/\/github.com\/react\/react\/pull\/36047\" rel=\"noopener nofollow\">#36047<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043a\u0440\u044d\u0448 <code>&lt;ViewTransition&gt;<\/code> \u0432 Mobile Safari <a href=\"https:\/\/github.com\/react\/react\/pull\/35337\" rel=\"noopener nofollow\">#35337<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043a\u0440\u044d\u0448 <code>&lt;ViewTransition&gt;<\/code> \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 <code>SuspenseList<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/35520\" rel=\"noopener nofollow\">#35520<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <code>defaultValue<\/code> \u0434\u043b\u044f <code>input type=\"number\"<\/code> \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 <code>input<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/36980\" rel=\"noopener nofollow\">#36980<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: React \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 <code>innerHTML<\/code>, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c <a href=\"https:\/\/github.com\/react\/react\/pull\/36949\" rel=\"noopener nofollow\">#36949<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u043b\u043e\u0436\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e hydration mismatch \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>nonce<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/37030\" rel=\"noopener nofollow\">#37030<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-dom<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u0435 <code>react-dom\/server<\/code> \u0432 Deno <a href=\"https:\/\/github.com\/react\/react\/pull\/35235\" rel=\"noopener nofollow\">#35235<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-server<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0442\u0435\u0440\u044f \u0437\u0430\u043f\u0438\u0441\u0435\u0439 <code>FormData<\/code> \u0432 <code>decodeReplyFromBusboy<\/code> <a href=\"https:\/\/github.com\/react\/react\/pull\/36468\" rel=\"noopener nofollow\">#36468<\/a><\/p>\n<\/li>\n<li>\n<p><code>react-server<\/code>: \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043a\u0430 \u0432 \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043f\u043e\u0447\u043a\u0430\u0445 <a href=\"https:\/\/github.com\/react\/react\/pull\/35612\" rel=\"noopener nofollow\">#35612<\/a> \u0438 <code>RangeError<\/code>, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0432\u0448\u0438\u0439 \u0438\u0437-\u0437\u0430 \u044d\u043a\u0441\u043f\u043e\u043d\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u043e\u0441\u0442\u0430 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 <a href=\"https:\/\/github.com\/react\/react\/pull\/37481\" rel=\"noopener nofollow\">#37481<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 <a href=\"https:\/\/github.com\/react\/react\/blob\/main\/CHANGELOG.md\" rel=\"noopener nofollow\">Changelog<\/a>.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1084612\/\">https:\/\/habr.com\/ru\/articles\/1084612\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u00abReact 19.3\u00bb.\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u00abFrontend \u043f\u043e\u2011\u0444\u043b\u043e\u0442\u0441\u043a\u0438\u00bb, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437\u00a0\u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 AI.\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 ReactView Transitions\u041d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &lt;ViewTransition&gt; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438 \u0438\u0445 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438, \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0438, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e View Transition API.\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443 \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0435\u0433\u043e \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 API, \u0430 \u0432 React 19.3 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0435\u0451 \u0432 &lt;ViewTransition&gt;:import { ViewTransition } from &#8216;react&#8217;;{isShowing &amp;&amp; (  &lt;ViewTransition&gt;    &lt;Component \/&gt;  &lt;\/ViewTransition&gt;)}\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u0430\u043a Transition, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e ViewTransition, React \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435.\u041a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c, React \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0434\u0435\u0440\u0435\u0432\u043e:enter \u2014 &lt;ViewTransition&gt; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f.exit \u2014 &lt;ViewTransition&gt; \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f.update \u2014 \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;ViewTransition&gt; \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.share \u2014 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 &lt;ViewTransition&gt; \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u043c.\u0412\u0430\u0436\u043d\u043e: \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a Transition, \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u041e\u043d\u0438 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u043e\u0447\u043d\u044b\u043c\u0438 \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.View Transition \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 startTransition, \u043f\u0440\u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u0438 &lt;Suspense&gt; \u0438\u043b\u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 useDeferredValue.\u041d\u0438\u0436\u0435 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:\u041f\u0440\u0438\u043c\u0435\u0440import { ViewTransition, useState, startTransition } from &#8216;react&#8217;;import { Video } from &#8216;.\/Video&#8217;;import videos from &#8216;.\/data&#8217;;export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}&gt;        {showItem ? &#8216;\u2796&#8217; : &#8216;\u2795&#8217;}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition&gt;          &lt;Video video={videos[0]} \/&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}https:\/\/codesandbox.io\/p\/sandbox\/sh9fks?file=%2Fsrc%2FApp.js\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &lt;ViewTransition&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u0443\u044e cross-fade-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e: \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c View Transition Class \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0451 \u0432 CSS \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Web Animations API, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b (onEnter, onExit, onShare, onUpdate).\u0421\u0435\u0439\u0447\u0430\u0441 &lt;ViewTransition&gt; \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 DOM. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 React Native \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 &lt;ViewTransition&gt;.addTransitionType\u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043b\u0438\u0441\u0442\u0430\u0435\u0442 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u044c \u0432\u043f\u0435\u0440\u0451\u0434 \u043a \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0443, \u0441\u043b\u0430\u0439\u0434\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0410 \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0430\u0434 \u043a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0443 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 currentSlide \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 3.\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e View Transition \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 addTransitionType \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0451\u043b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434:function nextSlide() {  startTransition(() =&gt; {    addTransitionType(&#8216;next&#8217;);    setCurrentSlide(c =&gt; c + 1);  });}function previousSlide() {  startTransition(() =&gt; {    addTransitionType(&#8216;previous&#8217;);    setCurrentSlide(c =&gt; c &#8212; 1);  });} \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430:  &lt;ViewTransition  enter={{    &#8216;next&#8217;: &#8216;from-right&#8217;,    &#8216;previous&#8217;: &#8216;from-left&#8217;,  }}  exit={{    &#8216;next&#8217;: &#8216;to-left&#8217;,    &#8216;previous&#8217;: &#8216;to-right&#8217;,  }}&gt;  &lt;Page \/&gt;&lt;\/ViewTransition&gt;\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:\u041f\u0440\u0438\u043c\u0435\u0440import {  ViewTransition,  addTransitionType,  useState,  startTransition,  Fragment} from &#8216;react&#8217;;import { Video } from &#8216;.\/Video&#8217;;import videos from &#8216;.\/data&#8217;;import &#8216;.\/animations.css&#8217;;export default function Component() {  const [selected, setSelected] = useState(0)  const video = videos[selected];  return (    &lt;&gt;      &lt;div className=&#187;button-container&#187;&gt;        &lt;button          onClick={() =&gt; {            startTransition(() =&gt; {              addTransitionType(&#8216;previous&#8217;);              setSelected(c =&gt; c &gt; 0 ? c &#8212; 1 : videos.length &#8212; 1 )            });          }}&gt;          \u2b05\ufe0f        &lt;\/button&gt;        &lt;button          onClick={() =&gt; {            startTransition(() =&gt; {              addTransitionType(&#8216;next&#8217;);              setSelected(c =&gt; c + 1 &lt; videos.length ? c + 1 : 0)            });          }}&gt;          \u27a1\ufe0f        &lt;\/button&gt;      &lt;\/div&gt;      &lt;ViewTransition        key={video.id}        enter={{          &#8216;next&#8217;: &#8216;from-right&#8217;,          &#8216;previous&#8217;: &#8216;from-left&#8217;        }}        exit={{          &#8216;next&#8217;: &#8216;to-left&#8217;,          &#8216;previous&#8217;: &#8216;to-right&#8217;        }}      &gt;        &lt;Video video={video} \/&gt;      &lt;\/ViewTransition&gt;    &lt;\/&gt;  );}https:\/\/codesandbox.io\/p\/sandbox\/w2sqllReact \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 Transition Type \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 view transition type, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 CSS \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e :active-view-transition-type(&#8230;).\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u2014 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 addTransitionType.\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0441 Suspense\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 View Transitions \u0432 React \u2014 \u0438\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 Suspense.\u041c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c Suspense boundary \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0451 \u0432 &lt;ViewTransition&gt;:&lt;ViewTransition&gt;  &lt;Suspense fallback={&lt;Loading \/&gt;}&gt;    &lt;Component \/&gt;  &lt;\/Suspense&gt;&lt;\/ViewTransition&gt;\u041a\u043e\u0433\u0434\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f, React \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0442\u0438\u043f\u0430 update, \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u043e\u0442 fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443.\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u2795, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c LazyVideo, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Suspense:\u041f\u0440\u0438\u043c\u0435\u0440import { Suspense, useState, startTransition, use, ViewTransition } from &#8216;react&#8217;;import { Video, VideoPlaceholder } from &#8216;.\/Video&#8217;;import { fetchVideo } from &#8216;.\/data&#8217;;export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}      &gt;        {showItem ? &#8216;\u2796&#8217; : &#8216;\u2795&#8217;}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition&gt;          &lt;Suspense fallback={&lt;VideoPlaceholder \/&gt;}&gt;            &lt;LazyVideo \/&gt;          &lt;\/Suspense&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}function LazyVideo() {  const video = use(fetchVideo());  return &lt;Video video={video} \/&gt;;}https:\/\/codesandbox.io\/p\/sandbox\/35j6xn\u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441: \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f\u0445 \u0432\u0438\u0434\u0435\u043e \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0438, \u0445\u043e\u0442\u044f \u043e\u043d\u043e \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e. (\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 fallback \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.)\u0412 \u0446\u0435\u043b\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Suspense \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0443\u0436\u0435 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.\u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 UX \u043f\u0440\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 Suspense:Fallback \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 fallback \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Suspense, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u0422\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 fallback \u043a \u0433\u043e\u0442\u043e\u0432\u043e\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u043c.&lt;ViewTransition update=&#187;auto&#187; default=&#187;none&#187;&gt;  &lt;Suspense fallback={&lt;Fallback \/&gt;}&gt;    &lt;Component \/&gt;  &lt;\/Suspense&gt;&lt;\/ViewTransition&gt;\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:\u041f\u0440\u0438\u043c\u0435\u0440import { Suspense, useState, startTransition, use, ViewTransition } from &#8216;react&#8217;;import { Video, VideoPlaceholder } from &#8216;.\/Video&#8217;;import { fetchVideo } from &#8216;.\/data&#8217;;export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    &lt;&gt;      &lt;button        onClick={() =&gt; {          startTransition(() =&gt; {            setShowItem((prev) =&gt; !prev);          });        }}      &gt;        {showItem ? &#8216;\u2796&#8217; : &#8216;\u2795&#8217;}      &lt;\/button&gt;      {showItem &amp;&amp; (        &lt;ViewTransition update=&#187;auto&#187; default=&#187;none&#187;&gt;          &lt;Suspense fallback={&lt;VideoPlaceholder \/&gt;}&gt;            &lt;LazyVideo \/&gt;          &lt;\/Suspense&gt;        &lt;\/ViewTransition&gt;      )}    &lt;\/&gt;  );}function LazyVideo() {  const video = use(fetchVideo());  return &lt;Video video={video} \/&gt;;}https:\/\/codesandbox.io\/p\/sandbox\/jpm23l\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 fallback \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0410 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u0438\u0434\u0435\u043e \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c, \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438.\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 Suspense.\u041f\u043e\u043c\u0438\u043c\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 fallback-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, View Transitions \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043a Suspense \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0430\u0441\u044c \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 Suspense \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0438\u0445 \u0432 &lt;ViewTransition&gt;:&lt;ViewTransition&gt;  &lt;Suspense fallback={&lt;Fallback \/&gt;}&gt;    &lt;img src={imageSrc} \/&gt;    &lt;style href={fontSrc}&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-495399","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/495399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=495399"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/495399\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=495399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=495399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=495399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}