{"id":463193,"date":"2025-06-13T10:23:19","date_gmt":"2025-06-13T10:23:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=463193"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=463193","title":{"rendered":"<span>React Labs: View Transitions, Activity \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png 781w\" loading=\"lazy\" decode=\"async\"\/> <\/p>\n<p> <\/p>\n<p> <\/p>\n<p>\u0412 \u0431\u043b\u043e\u0433\u0435 React Labs \u043c\u044b \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e \u0434\u0432\u0443\u0445 \u043d\u043e\u0432\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 \u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0449\u0430\u0445, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c.<\/p>\n<p> <\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0440\u0430\u0434\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0434\u0432\u0443\u043c \u043d\u043e\u0432\u044b\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c, \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<p> <\/p>\n<ul>\n<li><code>View Transitions<\/code> (\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438)<\/li>\n<li><code>Activity<\/code><\/li>\n<\/ul>\n<p> <\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c:<\/p>\n<p> <\/p>\n<ul>\n<li>\u0422\u0440\u0435\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 React (React performance tracks)<\/li>\n<li>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430<\/li>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/li>\n<li>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b (fragment refs)<\/li>\n<li>\u041a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (concurrent stores)<\/li>\n<\/ul>\n<p> <\/p>\n<blockquote><p><a href=\"https:\/\/blog.logrocket.com\/react-view-transitions-activity-api\/\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f View Transitions \u0438 Activity \u0432 \u043a\u043b\u043e\u043d\u0435 AirBnB<\/a><\/p><\/blockquote>\n<p><a name=\"habracut\"><\/a> <\/p>\n<h2 id=\"-novye-eksperimentalnye-vozmozhnosti\">\u276f \u041d\u043e\u0432\u044b\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p> <\/p>\n<p><code>View Transitions<\/code> \u0438 <code>Activity<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 <code>react@experimental<\/code>. \u042d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, \u043d\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 API \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0442\u0437\u044b\u0432\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p> <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<p> <\/p>\n<ul>\n<li><code>react@experimental<\/code><\/li>\n<li><code>react-dom@experimental<\/code><\/li>\n<\/ul>\n<p> <\/p>\n<p>\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u0430\u043b\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0438\u043b\u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u043d\u043e\u0432\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439:<\/p>\n<p> <\/p>\n<ul>\n<li><a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition\"><code>&lt;ViewTransition&gt;<\/code><\/a>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438<\/li>\n<li><a href=\"https:\/\/react.dev\/reference\/react\/addTransitionType\"><code>addTransitionType<\/code><\/a>: \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430<\/li>\n<li><a href=\"https:\/\/react.dev\/reference\/react\/Activity\"><code>&lt;Activity&gt;<\/code><\/a>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/li>\n<\/ul>\n<p> <\/p>\n<h3 id=\"-view-transitions\">\u276f <code>View Transitions<\/code><\/h3>\n<p> <\/p>\n<p><code>View Transitions<\/code> \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043b\u0435\u0436\u0438\u0442 \u043d\u043e\u0432\u044b\u0439 API <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/startViewTransition\"><code>startViewTransition<\/code><\/a>, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p> <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;ViewTransition&gt;<\/code>.<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">\/\/ \"\u0427\u0442\u043e\" \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c &lt;ViewTransition&gt;   &lt;div&gt;animate me&lt;\/div&gt; &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, <em>\u0447\u0442\u043e<\/em> \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430.<\/p>\n<p> <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, <em>\u043a\u043e\u0433\u0434\u0430<\/em> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0442\u0440\u0435\u0445 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u0432:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">\/\/ \"\u041a\u043e\u0433\u0434\u0430\" \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c.  \/\/ \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b startTransition(() =&gt; setState(...));  \/\/ \u041e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f const deferred = useDeferredValue(value);  \/\/ \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 &lt;Suspense fallback={&lt;Fallback \/&gt;}&gt;   &lt;div&gt;Loading...&lt;\/div&gt; &lt;\/Suspense&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transition_API\/Using#customizing_your_animations\">\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a> (\u043e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435). \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transition_API\/Using#the_view_transition_pseudo-element_tree\">\u043f\u0441\u0435\u0432\u0434\u043e\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a> \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u043e\u0433\u043e, <em>\u043a\u0430\u043a<\/em> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0441\u0440\u0430\u0437\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>*<\/code>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">\/\/ \"\u041a\u0430\u043a\" \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c ::view-transition-old(*) {   animation: 300ms ease-out fade-out; } ::view-transition-new(*) {   animation: 300ms ease-in fade-in; }<\/code><\/pre>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 DOM \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>startTransition<\/code>, <code>useDeferredValue<\/code> \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Suspense<\/code> \u2014 React \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#viewtransition\">\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u043a\u0438<\/a>, \u0447\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>&lt;ViewTransition&gt;<\/code> \u043d\u0443\u0436\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0432 CSS.<\/p>\n<p> <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 API <code>View Transition<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a React \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e, \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u043c <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#how-does-viewtransition-work\"><code>\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 &lt;ViewTransition&gt;<\/code>&#171;<\/a> \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<p> <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>View Transitions<\/code>.<\/p>\n<p> <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<p> <\/p>\n<ul>\n<li>\u041a\u043b\u0438\u043a \u043f\u043e \u0432\u0438\u0434\u0435\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0434\u0435\u0442\u0430\u043b\u0435\u0439<\/li>\n<li>\u041a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 &#171;\u041d\u0430\u0437\u0430\u0434&#187; \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043a \u043b\u0435\u043d\u0442\u0435<\/li>\n<li>\u0412\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0435\u043e<\/li>\n<\/ul>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/682191534c7c3ebada49c486\" data-style=\"\" id=\"682191534c7c3ebada49c486\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<blockquote><p><strong><code>View Transitions<\/code> \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 CSS \u0438 JS.<\/strong><br \/> <code>View Transitions<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u0435\/\u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b \u0432\u0441\u0435\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<br \/> \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 &#171;\u041d\u0440\u0430\u0432\u0438\u0442\u0441\u044f&#187; \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 <code>Suspense<\/code>. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p><\/blockquote>\n<p> <\/p>\n<h4 id=\"animaciya-navigacii\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h4>\n<p> <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u043e\u0443\u0442\u0435\u0440 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 <code>Suspense<\/code>, \u0438 <a href=\"https:\/\/react.dev\/reference\/react\/useTransition#building-a-suspense-enabled-router\">\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0443\u0436\u0435 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b (transitions)<\/a>. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>startTransition<\/code>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">function navigate(url) {   startTransition(() =&gt; {     go(url);   }); }<\/code><\/pre>\n<p> <\/p>\n<p><code>startTransition<\/code> \u2014 \u044d\u0442\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440 <code>View Transition<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>&lt;ViewTransition&gt;<\/code>, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">\/\/ \"\u0427\u0442\u043e\" \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c &lt;ViewTransition key={url}&gt;   {url === '\/' ? &lt;Home \/&gt; : &lt;TalkDetails \/&gt;} &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 <code>url<\/code> \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;ViewTransition&gt;<\/code> \u0438 \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>&lt;ViewTransition&gt;<\/code> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <code>startTransition<\/code>, \u043e\u043d \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p> <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0434\u043b\u044f <code>View Transitions<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f (cross-fade) \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u044d\u0442\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219154488f69a8081d0fbc\" data-style=\"\" id=\"68219154488f69a8081d0fbc\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<blockquote><p><strong>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <code>&lt;ViewTransition&gt;<\/code><\/strong><br \/> \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <code>&lt;ViewTransition&gt;<\/code> \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430, \u043d\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<br \/> \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e, \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 <code>&lt;ViewTransition&gt;<\/code> \u0441 \u043f\u0440\u043e\u043f\u043e\u043c <code>default=\"none\"<\/code>, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e:<\/p><\/blockquote>\n<p> <\/p>\n<pre><code class=\"javascript\">\/\/ Layout.js &lt;ViewTransition default=\"none\"&gt;   {children} &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<blockquote><p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u043e\u0432 <code>enter<\/code> \u0438 <code>exit<\/code> \u0438\u043b\u0438 \u0442\u0438\u043f\u043e\u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 (transition types).<\/p><\/blockquote>\n<p> <\/p>\n<h4 id=\"nastroyka-animaciy\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h4>\n<p> <\/p>\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 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p> <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b <code>&lt;ViewTransition&gt;<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#props\"><code>\u043a\u0430\u043a \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f &lt;ViewTransition&gt;<\/code><\/a>.<\/p>\n<p> <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c <em>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e<\/em> (<code>default<\/code>) \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition default=\"slow-fade\"&gt;   &lt;Home \/&gt; &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u0418 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e <code>slow-fade<\/code> \u0432 CSS, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#view-transition-classes\">\u043a\u043b\u0430\u0441\u0441\u044b view transitions<\/a>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">::view-transition-old(.slow-fade) {     animation-duration: 500ms; }  ::view-transition-new(.slow-fade) {     animation-duration: 500ms; }<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/682191546d3815ba95fed8b8\" data-style=\"\" id=\"682191546d3815ba95fed8b8\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#styling-view-transitions\">&#171;\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f View Transitions&#187;<\/a> \u0434\u043b\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>&lt;ViewTransition&gt;<\/code>.<\/p>\n<p> <\/p>\n<h4 id=\"perehody-s-obschimi-elementami\">\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/h4>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<p> <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>&lt;ViewTransition&gt;<\/code>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition name={`video-${video.id}`}&gt;   &lt;Thumbnail video={video} \/&gt; &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u0430 \u0432\u0438\u0434\u0435\u043e \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219155fc0bb4a8164dbf84\" data-style=\"\" id=\"68219155fc0bb4a8164dbf84\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e React \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 (<code>name<\/code>) \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435. \u0415\u0441\u043b\u0438 React \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u0434\u0438\u043d <code>&lt;ViewTransition&gt;<\/code> \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0438\u043c\u0435\u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043e\u043d \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p> <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/react.dev\/reference\/react\/ViewTransition#animating-a-shared-element\">&#171;\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0431\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432&#187;<\/a> \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<p> <\/p>\n<h4 id=\"animaciya-na-osnove-tipa-perehoda\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430<\/h4>\n<p> <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043d\u043e\u0432\u044b\u0439 API <code>addTransitionType<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">function navigate(url) {   startTransition(() =&gt; {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \"\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043f\u0435\u0440\u0435\u0434\"     addTransitionType('nav-forward');     go(url);   }); } function navigateBack(url) {   startTransition(() =&gt; {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \"\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0430\u0437\u0430\u0434\"     addTransitionType('nav-back');     go(url);   }); }<\/code><\/pre>\n<p> <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 &#171;6 Videos&#187; \u0438 &#171;Back&#187;:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition   name=\"nav\"   share={{     'nav-forward': 'slide-forward',     'nav-back': 'slide-back',   }}&gt;   {heading} &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u041f\u0440\u043e\u043f <code>share<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \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. \u041a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0438\u043f\u043e\u043c <code>nav-forward<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <code>slide-forward<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u0442\u0438\u043f\u043e\u043c <code>nav-back<\/code>, \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f <code>slide-back<\/code>. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u044d\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 CSS:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">::view-transition-old(.slide-forward) {     \/* \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0432\u043f\u0435\u0440\u0435\u0434, \"\u0441\u0442\u0430\u0440\u0430\u044f\" \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432\u043b\u0435\u0432\u043e. *\/     animation: ... }  ::view-transition-new(.slide-forward) {     \/* \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0432\u043f\u0435\u0440\u0435\u0434, \"\u043d\u043e\u0432\u0430\u044f\" \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430. *\/     animation: ... }  ::view-transition-old(.slide-back) {     \/* \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430\u0437\u0430\u0434, \"\u0441\u0442\u0430\u0440\u0430\u044f\" \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432\u043f\u0440\u0430\u0432\u043e. *\/     animation: ... }  ::view-transition-new(.slide-back) {     \/* \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430\u0437\u0430\u0434, \"\u043d\u043e\u0432\u0430\u044f\" \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0432\u0430. *\/     animation: ... }<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u043e\u0439 \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<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219155159a09bab06793a4\" data-style=\"\" id=\"68219155159a09bab06793a4\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<h4 id=\"animaciya-suspense\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f <code>Suspense<\/code><\/h4>\n<p> <\/p>\n<p><code>Suspense<\/code> \u0442\u0430\u043a\u0436\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 <code>View Transitions<\/code>.<\/p>\n<p> <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c <code>Suspense<\/code> \u0432 <code>&lt;ViewTransition&gt;<\/code>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition&gt;   &lt;Suspense fallback={&lt;VideoInfoFallback \/&gt;}&gt;     &lt;VideoInfo \/&gt;   &lt;\/Suspense&gt; &lt;\/ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u0417\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e, \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219156488f69a8081d0fbe\" data-style=\"\" id=\"68219156488f69a8081d0fbe\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>exit<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 <code>enter<\/code> \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;Suspense   fallback={     &lt;ViewTransition exit=\"slide-down\"&gt;       &lt;VideoInfoFallback \/&gt;     &lt;\/ViewTransition&gt;   } &gt;   &lt;ViewTransition enter=\"slide-up\"&gt;     &lt;VideoInfo id={id} \/&gt;   &lt;\/ViewTransition&gt; &lt;\/Suspense&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <code>slide-down<\/code> \u0438 <code>slide-up<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">::view-transition-old(.slide-down) {   \/* \u0421\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u043d\u0438\u0437 *\/   animation: ...; }  ::view-transition-new(.slide-up) {   \/* \u0421\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0432\u0435\u0440\u0445 *\/   animation: ...; }<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0434\u0432\u0438\u0433\u0430:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/682191564c7c3ebada49c488\" data-style=\"\" id=\"682191564c7c3ebada49c488\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<h4 id=\"animaciya-spiskov\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/h4>\n<p> <\/p>\n<p><code>&lt;ViewTransition&gt;<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435\/\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;div className=\"videos\"&gt;   {filteredVideos.map((video) =&gt; (     &lt;ViewTransition key={video.id}&gt;       &lt;Video video={video} \/&gt;     &lt;\/ViewTransition&gt;   ))} &lt;\/div&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 <code>ViewTransition<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>useDeferredValue<\/code>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">const [searchText, setSearchText] = useState(''); const deferredSearchText = useDeferredValue(searchText); const filteredVideos = filterVideos(videos, deferredSearchText);<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219157fc0bb4a8164dbf86\" data-style=\"\" id=\"68219157fc0bb4a8164dbf86\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<h4 id=\"itogovyy-rezultat\">\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h4>\n<p> <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <code>&lt;ViewTransition&gt;<\/code> \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a CSS, \u043c\u044b \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0435\u043b\u0438.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435 \u043e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <code>View Transitions<\/code> \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 React.<\/p>\n<p> <\/p>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c slow fade \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/682191576d3815ba95fed8c0\" data-style=\"\" id=\"682191576d3815ba95fed8c0\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <code>View Transitions<\/code>, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435: <a href=\"https:\/\/github.com\/facebook\/react\/pull\/31975\">#31975<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32105\">#32105<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32041\">#32041<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32734\">#32734<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32797\">#32797<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/31999\">#31999<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32031\">#32031<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32050\">#32050<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32820\">#32820<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32029\">#32029<\/a>, <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32028\">#32028<\/a> \u0438 <a href=\"https:\/\/github.com\/facebook\/react\/pull\/32038\">#32038<\/a> \u043e\u0442 <a href=\"https:\/\/x.com\/sebmarkbage\">@sebmarkbage<\/a>.<\/p>\n<p> <\/p>\n<h3 id=\"-activity\">\u276f <code>Activity<\/code><\/h3>\n<p> <\/p>\n<p>\u0412 <a href=\"https:\/\/react.dev\/blog\/2022\/06\/15\/react-labs-what-we-have-been-working-on-june-2022#offscreen\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445<\/a> <a href=\"https:\/\/react.dev\/blog\/2024\/02\/15\/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity\">\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445<\/a> \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0431\u044b\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0438 \u0434\u0435\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043d\u0438\u0436\u0430\u044f \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0438\u0445 \u0441\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS.<\/p>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 API \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 React.<\/p>\n<p> <\/p>\n<p><code>&lt;Activity&gt;<\/code> \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;Activity mode={isVisible ? 'visible' : 'hidden'}&gt;   &lt;Page \/&gt; &lt;\/Activity&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 <code>Activity<\/code> \u0432\u0438\u0434\u0438\u043c (<code>visible<\/code>), \u043e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041a\u043e\u0433\u0434\u0430 \u0441\u043a\u0440\u044b\u0442 (<code>hidden<\/code>), \u043e\u043d \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p> <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Activity<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442, \u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0447\u0430\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438.<\/p>\n<p> <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0435\u0439\u0441\u043e\u0432, \u0443\u043b\u0443\u0447\u0448\u0438\u0432\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441 <code>View Transition<\/code>, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p> <\/p>\n<blockquote><p><strong>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Activity \u0441\u043a\u0440\u044b\u0442.<\/strong><br \/> \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Activity&gt;<\/code> \u0441\u043a\u0440\u044b\u0442, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0412 \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043b\u0430\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u043e React \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<br \/> \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c \u0438\u0437 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 <a href=\"https:\/\/react.dev\/learn\/you-might-not-need-an-effect\">&#171;You Might Not Need an Effect&#187;<\/a>. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0432\u044b\u044f\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043c\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/react.dev\/reference\/react\/StrictMode\"><code>&lt;StrictMode&gt;<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 <code>Activity<\/code> \u0434\u043b\u044f \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p><\/blockquote>\n<p> <\/p>\n<h4 id=\"vosstanovlenie-sostoyaniya-s-pomoschyu-activity\">\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Activity<\/code><\/h4>\n<p> <\/p>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">function App() {   const { url } = useRouter();    return (     &lt;&gt;       {url === '\/' &amp;&amp; &lt;Home \/&gt;}       {url !== '\/' &amp;&amp; &lt;Details \/&gt;}     &lt;\/&gt;   ); }<\/code><\/pre>\n<p> <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <code>&lt;Home \/&gt;<\/code> \u0435\u0441\u0442\u044c <code>&lt;input&gt;<\/code> \u0438 \u043f\u0440\u0438 \u0443\u0445\u043e\u0434\u0435 \u0441 \u043d\u0435\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 \u0432\u0435\u0441\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044f\u043d.<\/p>\n<p> <\/p>\n<p><code>Activity<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043e\u043d \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0441 \u0442\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Activity&gt;<\/code> \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0436\u0438\u043c\u0430 (<code>mode<\/code>):<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">function App() {   const { url } = useRouter();    return (     &lt;&gt;       &lt;Activity mode={url === '\/' ? 'visible' : 'hidden'}&gt;         &lt;Home \/&gt;       &lt;\/Activity&gt;       {url !== '\/' &amp;&amp; &lt;Details \/&gt;}     &lt;\/&gt;   ); }<\/code><\/pre>\n<p> <\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u0441\u043a\u0430\u043b\u0438 \u0432\u0438\u0434\u0435\u043e, \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438 \u0435\u0433\u043e \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0438\u0441\u044c, \u0444\u0438\u043b\u044c\u0442\u0440 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0441\u044f. \u0421 <code>Activity<\/code> \u0444\u0438\u043b\u044c\u0442\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p> <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432\u0438\u0434\u0435\u043e, \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u043d\u0430\u0436\u0430\u0442\u044c &#171;\u041d\u0430\u0437\u0430\u0434&#187;:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/68219157488f69a8081d0fc8\" data-style=\"\" id=\"68219157488f69a8081d0fc8\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<h4 id=\"predvaritelnyy-rendering-s-pomoschyu-activity\">\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Activity<\/code><\/h4>\n<p> <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0442\u0430\u043a \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0433\u043e\u0442\u043e\u0432\u044b \u0435\u0449\u0435 \u0434\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p> <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u0437-\u0437\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0432 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0441\u043a\u0440\u044b\u0442\u043e\u043c <code>&lt;Activity&gt;<\/code> \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u043d\u0430 \u043d\u0438\u0445:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">&lt;ViewTransition&gt;   &lt;Activity mode={url === '\/' ? 'visible' : 'hidden'}&gt;     &lt;Home \/&gt;   &lt;\/Activity&gt;   {videos.map(({id}) =&gt; (     &lt;Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}&gt;       &lt;Details id={id}\/&gt;     &lt;\/Activity&gt;   ))} &lt;ViewTransition&gt;<\/code><\/pre>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443\u0441\u043f\u0435\u0435\u0442 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f, \u043e\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0431\u0435\u0437 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e \u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u0431\u0435\u0437 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<p> <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/682191584c7c3ebada49c492\" data-style=\"\" id=\"682191584c7c3ebada49c492\" width=\"\"><\/div>\n<\/div>\n<p> <\/p>\n<h4 id=\"servernyy-rendering-s-ispolzovaniem-activity\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>Activity<\/code><\/h4>\n<p> <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>Activity<\/code> \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c (server side rendering, SSR) \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p> <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <code>mode=\"hidden\"<\/code>, \u043e\u043d\u0430 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e React \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 <code>Activity<\/code>, \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f (hydrates), \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.<\/p>\n<p> <\/p>\n<p>\u0414\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0449\u0438\u0445\u0441\u044f \u0441 <code>mode=\"visible\"<\/code>, React \u0431\u0443\u0434\u0435\u0442 \u0441\u043d\u0438\u0436\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 <code>Activity<\/code>, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 <code>Suspense<\/code>. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u044b\u0448\u0435\u043d.<\/p>\n<p> <\/p>\n<p>\u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u043e\u043d\u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <code>Activity<\/code>.<\/p>\n<p> <\/p>\n<h4 id=\"buduschie-rezhimy-activity\">\u0411\u0443\u0434\u0443\u0449\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u044b <code>Activity<\/code><\/h4>\n<p> <\/p>\n<p>\u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 <code>Activity<\/code> \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b.<\/p>\n<p> <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0434\u043d\u0430 \u0438\u0437 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f &#171;\u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f&#187; \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0437\u0430 &#171;\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c&#187; \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c. \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0435\u0436\u0438\u043c <code>hidden<\/code> \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \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> <\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0432 SSR \u0431\u0435\u0437 \u0435\u0433\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e \u0441\u043d\u0438\u0436\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u044e\u0449\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u043e\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e.<\/p>\n<p> <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0434\u043b\u044f <code>Activity<\/code> \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u044c, \u0443\u0434\u0430\u043b\u044f\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p> <\/p>\n<p>\u042d\u0442\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 <code>Activity<\/code> <a href=\"https:\/\/react.dev\/reference\/react\/Activity\">\u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p> <\/p>\n<h2 id=\"-novye-vozmozhnosti-nahodyaschiesya-v-razrabotke\">\u276f \u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/h2>\n<p> <\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0440\u0435\u0448\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p> <\/p>\n<p>\u041f\u043e\u043a\u0430 \u043c\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 API \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 PR. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p> <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u043d\u043e, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445, \u043d\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p> <\/p>\n<p>\u041f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u0432 \u0431\u043b\u043e\u0433\u0435, \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p> <\/p>\n<h3 id=\"-treki-proizvoditelnosti\">\u276f \u0422\u0440\u0435\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p> <\/p>\n<p>\u041c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u043d\u043e\u0432\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0442\u0440\u0435\u043a\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/performance\/extension\">\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0442\u0440\u0435\u043a\u0438<\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p> <\/p>\n<p>\u042d\u0442\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435 \u0435\u0449\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 React, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0435\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u043e\u0444\u0438\u043b\u0438.<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/8o\/fc\/zv\/8ofczvi-rbephxepal5hcazkv2q.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/8o\/fc\/zv\/8ofczvi-rbephxepal5hcazkv2q.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/8o\/fc\/zv\/8ofczvi-rbephxepal5hcazkv2q.png 781w\" loading=\"lazy\" decode=\"async\"\/> <\/p>\n<p> <\/p>\n<p> <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 (suspended) \u0434\u0435\u0440\u0435\u0432\u044c\u044f \u0432 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u044b \u043e\u0442 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0440\u0435\u043a\u0430\u043c\u0438.<\/p>\n<p> <\/p>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u0448\u0435\u043d\u044b, \u043c\u044b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0441\u043e\u043e\u0431\u0449\u0438\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p> <\/p>\n<h3 id=\"-avtomaticheskie-zavisimosti-effektov\">\u276f \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/h3>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0445\u0443\u043a\u0438, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0446\u0435\u043b\u0438:<\/p>\n<p> <\/p>\n<ul>\n<li><strong>\u041e\u0431\u043c\u0435\u043d \u043a\u043e\u0434\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438:<\/strong> \u0445\u0443\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b, \u043a\u0430\u043a render props \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 (higher order components, HOC), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li><strong>\u041c\u044b\u0441\u043b\u0438\u0442\u044c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u043d\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u043e\u0432:<\/strong> \u0445\u0443\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043b\u043e\u0433\u0438\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445), \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430<\/li>\n<li><strong>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/strong> \u0445\u0443\u043a\u0438 \u0431\u044b\u043b\u0438 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/li>\n<\/ul>\n<p> <\/p>\n<p>\u0421 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432, \u043e\u043d\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u044e\u0442 <em>\u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/em>. \u0422\u0435\u043f\u0435\u0440\u044c \u0445\u0443\u043a\u0438 \u0441\u0442\u0430\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0431\u043c\u0435\u043d\u0430 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0438 \u0441\u043b\u0443\u0447\u0430\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f render props \u0438 HOC \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0445\u0443\u043a\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 (fast refresh), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<p> <\/p>\n<h4 id=\"effekty-mogut-byt-slozhnymi\">\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438<\/h4>\n<p> <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0443\u043a\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u043d\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u043e\u0432. \u042d\u0444\u0444\u0435\u043a\u0442\u044b, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443 \u043c\u044b \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0431\u0435\u0437 \u043e\u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 <a href=\"https:\/\/react.dev\/learn\/you-might-not-need-an-effect\">&#171;You Might Not Need an Effect&#187;<\/a> \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u0436\u0435 \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447\u0438, \u043f\u043e\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043a\u043b\u043e\u043d\u043d\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f <em>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/em> (\u043a\u0430\u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b), \u0430 \u043d\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 <em>\u0441\u0430\u043c \u044d\u0444\u0444\u0435\u043a\u0442<\/em>.<\/p>\n<p> <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/react.dev\/learn\/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective\">\u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">useEffect(() =&gt; {   const connection = createConnection(serverUrl, roomId);   connection.connect();   return () =&gt; {     connection.disconnect();   }; }, [roomId]);<\/code><\/pre>\n<p> <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u043e\u0447\u0442\u0443\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043a\u0430\u043a &#171;\u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043c\u043d\u0430\u0442\u0435 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c <code>roomId<\/code>. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>roomId<\/code>, \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u0440\u043e\u0439 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u043e\u0432\u043e\u0439&#187;. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u0447\u0435\u0442\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438, \u0447\u0435\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442 \u0432 \u0442\u0430\u043a\u043e\u043c \u043a\u043b\u044e\u0447\u0435.<\/p>\n<p> <\/p>\n<h4 id=\"effekty-bez-zavisimostey\">\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/h4>\n<p> <\/p>\n<p>\u041b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0444\u0444\u0435\u043a\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043e\u043d \u043b\u0438\u0448\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043a\u0430\u043a \u0435\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0445 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043b\u0435\u0433\u0447\u0435 \u043f\u0438\u0441\u0430\u0442\u044c, \u0438 \u043e\u043d\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u043c\u0438 \u043f\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043e\u043d\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430 \u0432\u0438\u0434\u0443, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442, \u043d\u0430 \u0447\u0442\u043e \u0432\u044b &#171;\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442\u0435&#187;, \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u0443\u043c\u0430\u0442\u044c \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 &#171;\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f&#187;.<\/p>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0445\u0443\u043a\u0438, \u043c\u044b \u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0421 React Compiler \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c <code>useCallback<\/code> \u0438 <code>useMemo<\/code>. \u0414\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">useEffect(() =&gt; {   const connection = createConnection(serverUrl, roomId);   connection.connect();   return () =&gt; {     connection.disconnect();   }; }); \/\/ \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/code><\/pre>\n<p> <\/p>\n<p>React Compiler \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0445\u0443\u043a\u0430 \u0441 \u0447\u0435\u043c-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u043d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c, \u043f\u043e\u0431\u0443\u0436\u0434\u0430\u044f \u0432\u0430\u0441 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u043c \u044d\u0444\u0444\u0435\u043a\u0442, \u0430 \u043d\u0435 \u043d\u0430 \u0447\u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p> <\/p>\n<h3 id=\"-rasshirenie-dlya-redaktora-koda\">\u276f \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430<\/h3>\n<p> <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0439 \u043d\u0435\u0434\u0435\u043b\u0435 <a href=\"https:\/\/react.dev\/blog\/2025\/04\/21\/react-compiler-rc\">\u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438<\/a> \u043f\u0440\u043e\u0431\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e React Compiler, \u0430 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043c\u0435\u0441\u044f\u0446\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 SemVer.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f React Compiler \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0434. \u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0438\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f IDE \u043d\u0430 \u0431\u0430\u0437\u0435 LSP, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 React Compiler, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 <a href=\"https:\/\/conf2024.react.dev\/talks\/5\">\u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u041b\u043e\u0440\u0435\u043d \u0422\u0430\u043d \u043d\u0430 React Conf<\/a>.<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u0432\u0430\u0448\u0435\u0439 IDE. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0443 \u0434\u043b\u044f \u043a\u043e\u0434\u0430, \u043d\u0430\u0440\u0443\u0448\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 React, \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043e \u0442\u043e\u043c, \u0431\u044b\u043b\u0438 \u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0445\u0443\u043a\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c, \u0438\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c CodeLens \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<p> <\/p>\n<h3 id=\"-ssylki-na-fragmenty\">\u276f \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p> <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 DOM-API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438, \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0430, \u0442\u0440\u0443\u0434\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 React. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 (\u0440\u0435\u0444\u0430\u043c\u0438, refs), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0430\u043a\u0438\u0435 API, \u043a\u0430\u043a <code>findDOMNode<\/code> (\u0443\u0434\u0430\u043b\u0435\u043d \u0432 React 19).<\/p>\n<p> <\/p>\n<p>\u041c\u044b \u0438\u0437\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0443 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041c\u044b \u043d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 React \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 DOM-API.<\/p>\n<p> <\/p>\n<h3 id=\"-animacii-upravlyaemaya-zhestami\">\u276f \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u0430\u044f \u0436\u0435\u0441\u0442\u0430\u043c\u0438<\/h3>\n<p> <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c <code>View Transitions<\/code> \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0436\u0435\u0441\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0441\u0432\u0430\u0439\u043f (swiping) \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u0435\u043d\u044e \u0438\u043b\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p> <\/p>\n<p>\u0416\u0435\u0441\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<p> <\/p>\n<ul>\n<li><strong>\u0416\u0435\u0441\u0442\u044b \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u044b:<\/strong> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438 \u0438\u0434\u0435\u0442 \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f<\/li>\n<li><strong>\u0416\u0435\u0441\u0442\u044b \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0442\u0441\u044f:<\/strong> \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u043f\u0430\u043b\u0435\u0446, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043b\u0438\u0431\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f, \u043b\u0438\u0431\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u0435\u043d\u044e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u043e \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430), \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/li>\n<li><strong>\u0416\u0435\u0441\u0442\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u0441\u0442\u0430\u0440\u043e\u0435 \u0438 \u043d\u043e\u0432\u043e\u0435:<\/strong> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0443\u0445\u043e\u0434\u0438\u043c, \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f &#171;\u0436\u0438\u0432\u043e\u0439&#187; \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439. \u042d\u0442\u043e \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0433\u0434\u0435 &#171;\u0441\u0442\u0430\u0440\u043e\u0435&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0441\u043d\u0438\u043c\u043e\u043a, \u0430 &#171;\u043d\u043e\u0432\u043e\u0435&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 DOM<\/li>\n<\/ul>\n<p> <\/p>\n<p>\u041c\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043d\u0430\u0448\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u043d\u043e\u0432\u044b\u0439 API \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0436\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u044b \u043d\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 <code>&lt;ViewTransition&gt;<\/code>, \u0430 \u0436\u0435\u0441\u0442\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p> <\/p>\n<h3 id=\"-konkurentnye-hranilischa\">\u276f \u041a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/h3>\n<p> <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 React 18 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (concurrent rendering), \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0445\u0443\u043a <code>useSyncExternalStore<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449 (store libraries), \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 React, \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<p> <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>useSyncExternalStore<\/code> \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u043e \u0432\u044b\u043d\u0443\u0436\u0434\u0430\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 <code>Suspense<\/code> \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p> <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c React 19, \u043c\u044b \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e API:<\/p>\n<p> <\/p>\n<pre><code class=\"javascript\">const value = use(store);<\/code><\/pre>\n<p> <\/p>\n<p>\u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0435\u0437 \u0435\u0433\u043e \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 React.<\/p>\n<p> <\/p>\n<hr\/>\n<p> <\/p>\n<blockquote><p><a href=\"https:\/\/t.me\/timewebru\"><b>\u041d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0431\u0437\u043e\u0440\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u044b \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Timeweb.Cloud \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435<\/b><\/a> <b>\u21a9<\/b><\/p><\/blockquote>\n<p><a href=\"https:\/\/timeweb.cloud\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=promo\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/6r\/9j\/sr\/6r9jsrljpzsgcfyj1jjupubij5e.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/6r\/9j\/sr\/6r9jsrljpzsgcfyj1jjupubij5e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/6r\/9j\/sr\/6r9jsrljpzsgcfyj1jjupubij5e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/908488\/\"> https:\/\/habr.com\/ru\/articles\/908488\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/jc\/hw\/st\/jchwst6a3nwlxlscnmuw5tdhmry.png 781w\" loading=\"lazy\" decode=\"async\"\/> <\/p>\n<p> <\/p>\n<p> <\/p>\n<p>\u0412 \u0431\u043b\u043e\u0433\u0435 React Labs \u043c\u044b \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e \u0434\u0432\u0443\u0445 \u043d\u043e\u0432\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 \u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0449\u0430\u0445, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c.<\/p>\n<p> <\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0440\u0430\u0434\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0434\u0432\u0443\u043c \u043d\u043e\u0432\u044b\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c, \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<p> <\/p>\n<ul>\n<li><code>View Transitions<\/code> (\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438)<\/li>\n<li><code>Activity<\/code><\/li>\n<\/ul>\n<p> <\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c:<\/p>\n<p> <\/p>\n<ul>\n<li>\u0422\u0440\u0435\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 React (React performance tracks)<\/li>\n<li>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430<\/li>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/li>\n<li>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b (fragment refs)<\/li>\n<li>\u041a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (concurrent stores)<\/li>\n<\/ul>\n<p> <\/p>\n<blockquote><p><a href=\"https:\/\/blog.logrocket.com\/react-view-transitions-activity-api\/\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f View Transitions \u0438 Activity \u0432 \u043a\u043b\u043e\u043d\u0435 AirBnB<\/a><\/p><\/blockquote>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-463193","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/463193","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=463193"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/463193\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=463193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=463193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=463193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}