{"id":404165,"date":"2024-06-29T17:33:07","date_gmt":"2024-06-29T17:33:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=404165"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-06-29T17:33:07","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=404165","title":{"rendered":"<span>\u041a\u0430\u043a \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c React-\u043f\u0440\u0438\u043b\u043e\u0436\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-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u0432\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0445\u0443\u0436\u0435, \u0447\u0435\u043c \u0435\u0451 \u043f\u043e\u043b\u043d\u043e\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435? \u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u0435\u0448\u0451\u0432\u0430\u044f! \u041e\u043d\u0430 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 TTI \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0451 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0444\u0438\u0442, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043e\u0442 \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0443\u0433\u0437\u0430\u0440 \u0413\u0430\u0433\u0443\u043b\u0438\u044f. \u0423 \u043c\u0435\u043d\u044f 10 \u043b\u0435\u0442 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u042f\u043d\u0434\u0435\u043a\u0441 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0431\u0430\u043d\u043a. \u042f \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e \u043d\u0430 Google I\/O \u0438 Google Dev Fest, \u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435, \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0447\u0443 \u0438 \u043c\u0435\u043d\u0442\u043e\u0440\u044e. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u043c\u043e\u0435\u0433\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0434\u043b\u044f FrontendConf 2022. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0431 \u044d\u0442\u043e\u0439 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u043c\u0435\u043d\u044f \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u043d\u0438\u043a\u0443 NookieGrey \u0432 \u0441\u043e\u0446\u0441\u0435\u0442\u044f\u0445 \u0438 \u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c. \u042f \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u043d\u0430 \u043d\u0438\u0445 \u043e\u0442\u0432\u0435\u0447\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fe5\/08b\/bc0\/fe508bbc07d70de71d1f46b28b7d76c3.jpeg\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe5\/08b\/bc0\/fe508bbc07d70de71d1f46b28b7d76c3.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0433\u043e\u0434\u0430 \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043f\u044f\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 React, \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438 \u0438 React Memo. \u0413\u0434\u0435-\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0433\u0434\u0435-\u0442\u043e \u2014 callback\u2019\u0438, \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u0432 useCallback, \u0430 \u0433\u0434\u0435-\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u043b\u0438 \u0432\u0441\u0451 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0451. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u0430 \u0447\u0442\u043e \u043d\u0435\u0442.<\/p>\n<p>\u042f \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u044b\u0448\u0430\u043b \u043e\u0442 \u043a\u043e\u043b\u043b\u0435\u0433 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u043b\u0441\u044f \u0441 \u043d\u0438\u043c\u0438. \u041d\u043e \u043d\u0430 \u0440\u0435\u0432\u044c\u044e \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 React \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0442\u0430\u043a, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043b\u044e\u0431\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 useMemo, useCallback \u0438 memo? \u042f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0433\u0443\u0433\u043b\u0438\u0442\u044c \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0425\u0430\u0431\u0440, \u0430 \u0435\u0449\u0451 \u043f\u043e\u0448\u0435\u043b \u0432 \u0414\u0438\u0441\u043a\u043e\u0440\u0434 \u0420\u0435\u0430\u043a\u0442\u0430, \u0441\u043e\u0437\u0434\u0430\u043b \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u0435\u0433\u043e. \u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u044b\u0435.\u00a0 \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0438\u0437 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 useMemo;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u0412\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 useMemo<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 useMemo, \u0437\u0430\u043b\u0435\u0437\u0435\u043c \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u0435\u0431\u0440\u0438 React \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437\u043d\u0443\u0442\u0440\u0438.<\/p>\n<pre><code class=\"javascript\">function useMemo(create, deps) {   var dispatcher = resolveDtspatcher( );   return dispatcher.useMemo(create, deps); } function resolveDispatcher() {   var dispatcher = ReactCurrentDispatcher.current;   if (dispatcher === null) {    error('Hooks can only be called inside of the body of a function component.');   }   return dispatcher;  }<\/code><\/pre>\n<p>\u0412 React.useMemo \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432 dispatcher. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0445\u0443\u043a \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e. \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 useMemo \u0438\u0437 dispatcher, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0430 React. \u041a\u043e\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 react.js \u043d\u0430 \u044d\u0442\u043e\u043c \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c useMemo \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 dispatcher, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">var ReactSharedInternals = {   ReactCurrentDispatcher: ReactCurrentDtspatcher,   \/\/... }; exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;   \/\/---> react-dom.js<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0433\u0434\u0435 \u043e\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 react-dom.js, \u0442\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041e\u0431\u044b\u0447\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0447\u0442\u043e-\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c, \u0442\u043e \u043f\u0438\u0448\u0435\u043c \u00ab\u0438\u043c\u043f\u043e\u0440\u0442\u00bb. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">function renderWithHooks(current, ...) {   if (current !== null &amp;&amp; current.memoizedState !== null) {   ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;    }else {   ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;   }  }<\/code><\/pre>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c react-dom \u0435\u0441\u0442\u044c \u0441\u0435\u043c\u044c \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f dispatcher. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u0438\u0437 \u043d\u0438\u0445: dispatchOnUpdate, dispatchOnMount. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 dispatcher. \u041d\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 dispatchOnUpdate.<\/p>\n<pre><code class=\"javascript\">HooksDispatcherOnUpdatelnDEV = {   useCallback: function (callback, deps) {\/**\/},   useEffect: function (create, deps) {\/**\/},   useMemo: function (create, deps) {     currentHookNameInDev = 'useMemo';     updateHookTypesDev();     var prevDispatcher = ReactCurrentDispatcher.current;     ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;     try {       return updateMemo(create, deps);     } finally {       ReactCurrentDispatcher.current = prevDispatcher;     }   } };<\/code><\/pre>\n<p>\u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a, \u0440\u0430\u0437\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0434\u043b\u044f \u043d\u0430\u0441 \u044d\u0442\u043e updateMemo, \u0442\u043e \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0430\u043c\u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e: <strong>return updateMemo(create, deps);<\/strong><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043b\u0435\u0437\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<pre><code class=\"javascript\">function updateMemo(nextCreate, deps) {   var hook = updateWorkInProgressHook();   var nextDeps = deps == undefined ? null : deps;   var prevState = hook.nenoizedState;   if (prevstate !== null &amp;&amp; nextDeps !== null) {     var prevDeps = prevState[1];     if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevState[0];     }   }   var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValues; }<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0451 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 &#8212; deps.<\/p>\n<pre><code class=\"javascript\">   if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevState[0];     }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0443\u0436\u0435 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0435\u0439\u0442.<\/p>\n<pre><code class=\"javascript\">  var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValues;<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 dispatch \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\u043c\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u2014 updateWorkInProgressHook. \u0412 \u043d\u0435\u0439 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0445\u0443\u043a\u0438.\u00a0<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043f\u0440\u043e \u0445\u0443\u043a\u0438 \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0445\u0443\u043a \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0438 React \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443. \u041d\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0425\u0443\u043a \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u0443\u043a\u0430, \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 next.<\/p>\n<pre><code class=\"javascript\">function updateWorkInProgressHook() {   var newHook = {     memoizedState: currentHook.memoizedState,     baseState: currentHook.baseState,     baseQueue: currentHook.baseQueue,     queue: currentHook.queve,     next: null   };   if (workInProgressHook === null) {     cerrentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;   } else {     workInProgressHook = workInProgressHook.next = newHook;   }   return workInProgressHook; }<\/code><\/pre>\n<p>\u0423 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0445\u0443\u043a\u0430 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a \u0438 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 React \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432. \u0412\u044b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0438 \u0446\u0438\u043a\u043b\u043e\u0432, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u043d\u0430\u0435\u0442\u0435 \u043f\u043e\u0447\u0435\u043c\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442\u0430.<\/p>\n<p>\u041c\u044b \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0435 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, dispatch \u0438 \u0442.\u043f.\u00a0<\/p>\n<pre><code class=\"javascript\">function updateMemo{nextCreate, deps) {   var hook = updateWorkInProgressHook();   var nextDeps = deps === undefined ? null : deps;   var prevState = hook.memoizedState;   if (prevState !== null &amp;&amp; nextDeps !== null) {     var prevDeps = prevState[1];     if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevstate[@];     }   }   var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValue; }<\/code><\/pre>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0445\u0443\u043a \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u2014 updateMemo, useCallback, memo \u2013 \u043d\u0435 \u0434\u0435\u0448\u0435\u0432\u044b\u0435.<\/p>\n<p>\u042f \u0441\u0434\u0435\u043b\u0430\u043b <a href=\"https:\/\/github.com\/NookieGrey\/performance\"><strong>\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/a> \u0438 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0432 \u043d\u0451\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/c21\/b30\/803\/c21b3080315bafc07bbdf95a3be38c18.jpg\" width=\"780\" height=\"353\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c21\/b30\/803\/c21b3080315bafc07bbdf95a3be38c18.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u043e\u043e\u0431\u0449\u0435, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f \u0437\u0430 138 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043d\u0430\u0447\u0430\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/06c\/969\/316\/06c969316a6b38bb74859ac0dfd53919.jpg\" width=\"780\" height=\"353\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/06c\/969\/316\/06c969316a6b38bb74859ac0dfd53919.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u2014 \u043e\u0442 141 \u0434\u043e 149 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u0435\u0440\u043d\u0451\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f 150 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/cd3\/ca4\/daa\/cd3ca4daab36db91bd89067a15223c76.jpg\" width=\"780\" height=\"353\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cd3\/ca4\/daa\/cd3ca4daab36db91bd89067a15223c76.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0410 \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 TTI \u2013 time to interaction, \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u043f\u043e\u043a\u0430\u0437\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. TTI \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 SEO\u0448\u043d\u0438\u043a\u0438 \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0412\u0430\u0436\u043d\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0448\u0443\u0441\u0442\u0440\u043e\u0439. \u0412\u0430\u0436\u043d\u0435\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0447\u0435\u043c \u0430\u043f\u0434\u0435\u0439\u0442\u044b.<\/p>\n<blockquote>\n<p><strong>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430\u00a0\u0442\u043e, \u0447\u0442\u043e\u00a0\u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, React Memo \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u00a0\u0443\u0449\u0435\u0440\u0431 \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0443 \u0438 TTI \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u00a0React, \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f, \u0441\u0442\u043e\u0438\u0442\u00a0\u043b\u0438 \u043e\u043d\u043e \u0442\u043e\u0433\u043e. <\/strong><\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0440\u0438\u043f\u043b\u0435\u0442\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f42\/062\/1f8\/f420621f8d399c997d5ff61717a30249.jpg\" width=\"780\" height=\"353\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f42\/062\/1f8\/f420621f8d399c997d5ff61717a30249.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0422\u0440\u0438\u043f\u043b\u0435\u0442 \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 memo, useMemo \u0438 useCallback. \u041d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 useMemo, \u0430\u043f\u0434\u0435\u0439\u0442\u044b \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 memo, useMemo &amp; useCallback \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435: \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u043d\u043e\u043b\u044c, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f. \u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 \u0432 memo, \u0432\u0441\u0435 props-\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 useMemo, \u0430 \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b \u0432 useCallback \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f.\u00a0<\/p>\n<p>\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e props-\u044b, \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430. \u0410\u043f\u0434\u0435\u0439\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f \u043f\u043e\u0448\u0435\u043b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/a5c\/403\/0f5\/a5c4030f58156c7f87073c592fac43ae.jpg\" width=\"780\" height=\"338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a5c\/403\/0f5\/a5c4030f58156c7f87073c592fac43ae.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0418 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0442\u0430\u0439\u043c\u0435\u0440\u044b, \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438 \u0438 \u0437\u0430\u0442\u0435\u043c \u0443\u0431\u0440\u0430\u043b memo \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React.memo<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0dd\/c9c\/fa4\/0ddc9cfa411809fe18618a880169db0d.jpg\" width=\"780\" height=\"338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0dd\/c9c\/fa4\/0ddc9cfa411809fe18618a880169db0d.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0442\u0440\u0438\u043f\u043b\u0435\u0442\u0435. \u0415\u0441\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0418\u0437\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0431\u0440\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ff0\/d3d\/471\/ff0d3d471e399540e48302c918e6d1c2.jpg\" width=\"780\" height=\"338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff0\/d3d\/471\/ff0d3d471e399540e48302c918e6d1c2.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u043f\u0440\u043e\u0444\u0438\u0442\u0430.<\/p>\n<p>\u041d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u043c\u043e\u0436\u0435\u0442, \u044f \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u0431\u0440\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e?<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d9c\/bc2\/3c2\/d9cbc23c2c208b3e67e86570e0c6e81c.jpg\" width=\"795\" height=\"442\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d9c\/bc2\/3c2\/d9cbc23c2c208b3e67e86570e0c6e81c.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0411\u044b\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0437\u0430\u043c\u0435\u0440\u044b, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0440\u044b.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/579\/dc6\/97b\/579dc697bb829642c5d69122fd1bb6d6.jpg\" width=\"795\" height=\"443\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/579\/dc6\/97b\/579dc697bb829642c5d69122fd1bb6d6.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0432 \u0437\u0430\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u0438 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/5dd\/62f\/ccc\/5dd62fcccb7633286f22acdaf2b8e259.jpg\" width=\"795\" height=\"497\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5dd\/62f\/ccc\/5dd62fcccb7633286f22acdaf2b8e259.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0418 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0442\u043e, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u043f\u0440\u043e\u0444\u0438\u0442\u0430, \u0437\u0430\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 TTI.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u041f\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0418\u0437\u0443\u0447\u0438\u0432 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043a \u043f\u044f\u0442\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0441\u043f\u0438\u0447\u0435\u043a.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u0430.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0432\u0440\u0435\u0434\u0430.<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u0435, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f 20 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u041c\u044b \u0435\u0433\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0440\u044b\u043b\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f 18 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. 10% \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f \u2014 \u0432\u0440\u043e\u0434\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430. \u0410 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b: \u0433\u043b\u0430\u0437 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043c\u043e\u0440\u0433\u0430\u0435\u0442 150 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0435\u043c\u0438 \u2014 \u0432\u043e\u0441\u0435\u043c\u044c \u0440\u0430\u0437, \u043f\u043e\u043a\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043c\u043e\u0440\u0433\u043d\u0435\u0442. \u0421 \u044d\u0442\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u2014 \u0442\u0430\u043a \u0441\u0435\u0431\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u0441 \u0414\u043e\u043d \u041a\u0438\u0445\u043e\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u043e\u0440\u0435\u0442\u0441\u044f \u0441 \u0432\u0435\u0442\u0440\u044f\u043d\u044b\u043c\u0438 \u043c\u0435\u043b\u044c\u043d\u0438\u0446\u0430\u043c\u0438. \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438: <strong>\u043d\u0443\u0436\u043d\u0430 \u043b\u0438 \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f?<\/strong> \u0412\u043e\u0437\u044c\u043c\u0438\u0442\u0435 \u0433\u043e\u043b\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0443\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u043d\u0435\u0433\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u043e\u043d \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c. React \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e, \u0447\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u043d\u0430 \u0434\u0432\u0443\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h4>\n<p>\u0418\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0435 <a href=\"https:\/\/www.youtube.com\/watch?v=hXF4T4911K4\"><u>\u0432\u0438\u0434\u0435\u043e 86\u00a0400 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0432 \u0434\u0435\u043d\u044c<\/u><\/a> \u2014 \u043f\u0440\u043e \u043d\u0430\u0448\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c, \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e \u0431\u0430\u0433\u0438, \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043d\u043e\u0432\u044b\u0435 \u0444\u0438\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c. \u041d\u0430\u0440\u0430\u0432\u043d\u0435 \u0441 \u044d\u0442\u0438\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u043e\u043d, \u043e\u0442\u0434\u044b\u0445, \u0434\u0435\u0439\u043b\u0438\u043a\u0438, \u043d\u0430 \u043c\u0438\u0442\u0438\u043d\u0433\u0438 \u0438 \u043d\u0430 \u0432\u0441\u0435 \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0434\u0435\u043b\u043e. \u0412\u0441\u0435\u043c \u0432\u0435\u0434\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c 24 \u0447\u0430\u0441\u0430 \u0432 \u0441\u0443\u0442\u043a\u0438? \ud83d\ude42<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e \u0442\u043e\u043c, \u0433\u043e\u0442\u043e\u0432\u044b \u043b\u0438 \u043c\u044b \u0432 \u0443\u0449\u0435\u0440\u0431 \u044d\u0442\u0438\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u0430\u043c \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u043e\u0442\u043e\u0432\u044b \u043b\u0438 \u043c\u044b \u043e\u0442\u043e\u0440\u0432\u0430\u0442\u044c \u043a\u0443\u0441\u043e\u043a \u043e\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0438\u043b\u0438 \u043e\u0442 \u0431\u0430\u0433\u0444\u0438\u043a\u0441\u0430 \u0438 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0433\u043e\u0442\u043e\u0432\u044b, \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u0434.\u00a0<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0441\u043f\u0438\u0447\u0435\u043a<\/h4>\n<p>\u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0414\u043e\u043d\u0430\u043b\u044c\u0434 \u041a\u043d\u0443\u0442, 70-90% \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e \u0441\u043f\u0438\u0447\u0435\u0447\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043a\u043e\u0440\u0435\u043d\u044c \u0437\u043b\u0430. \u0421\u0442\u0438\u0432 \u041c\u0430\u043a\u043a\u043e\u043d\u043d\u0435\u043b\u043b \u0442\u0430\u043a\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u041f\u041e, \u044d\u0442\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 memo, \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u043c \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432. \u041c\u044b \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u0434, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0430\u043a \u043d\u0443\u0436\u043d\u0430, \u0447\u0442\u043e \u043c\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430 \u043d\u0435\u0451 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0435\u0441\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u044c\u0437\u044b, \u0447\u0435\u043c \u0432\u0440\u0435\u0434\u0430. \u0421 \u0447\u0435\u0433\u043e \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438 \u0447\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e?<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u0430<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f39\/018\/cdf\/f39018cdf15b3fae504740d20f2c0301.jpeg\" width=\"800\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f39\/018\/cdf\/f39018cdf15b3fae504740d20f2c0301.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440: \u043c\u0430\u0448\u0438\u043d\u044b, \u041a\u041f\u041f \u0438 50 \u043f\u043e\u043b\u043e\u0441 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u043e\u043b\u043e\u0441\u044b. \u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0432\u0441\u044e \u0434\u043e\u0440\u043e\u0433\u0443. \u0415\u0441\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e 50 \u043f\u043e\u043b\u043e\u0441 \u0441\u0442\u0430\u043d\u0435\u0442 70 \u2014 \u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u0441\u0442\u0430\u043d\u0435\u0442 \u043b\u0435\u0433\u0447\u0435 \ud83d\ude42<\/p>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0432\u044b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u043c \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u0430, \u0447\u0442\u043e <strong>\u043e\u0431\u0449\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong>. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0432\u044b\u0433\u043e\u0434\u044b<\/h4>\n<p>\u0412\u0438\u043b\u044c\u044f\u043c \u0412\u0443\u043b\u044c\u0444, \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0432 \u0443\u0433\u043e\u0434\u0443 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0437\u043b\u0430, \u0447\u0435\u043c \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u043b\u0443\u043f\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043b\u043e\u0432\u0443\u0448\u043a\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043b\u044e\u0434\u0438 \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0432\u0440\u043e\u0432\u043e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, props-\u044b, \u0434\u0443\u043c\u0430\u044f, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0418 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043a\u0440\u043e\u0435\u043c \u0432\u0441\u0451, \u0442\u043e \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0435 \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u043e \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0435\u043d\u0435\u0442\u0441\u044f. <strong>\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0444\u0438\u0442, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438 \u0432\u0440\u0435\u0434\u0430. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/strong><\/p>\n<p>\u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0440\u0435\u0434\u0438\u0442. \u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u043d\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430, \u0445\u043e\u0442\u044f \u0447\u0430\u0441\u0442\u043e \u0434\u0443\u043c\u0430\u044e\u0442, \u0447\u0442\u043e \u0442\u0430\u043a \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u041f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432 \u0441\u0440\u0435\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434 \u2014 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u043d\u0430\u0447\u0435. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u0440\u044b \u0438 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440. \u0412 React \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0440\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Profiler. \u041f\u043e\u043a\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u041f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440\u043e\u043c, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u0440\u043e\u0444\u0438\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u2014 \u044d\u0442\u043e \u0437\u043b\u043e.<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 React-\u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h3>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d69\/e23\/7d3\/d69e237d3ac96634c8e738c31e230aeb.jpg\" width=\"910\" height=\"402\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d69\/e23\/7d3\/d69e237d3ac96634c8e738c31e230aeb.jpg\" data-blurred=\"true\"\/><\/figure>\n<p><strong>1) \u0414\u043b\u044f \u043a\u043e\u0432\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/strong> \u0415\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0442\u0432\u0438\u0442 \u043e\u0442 \u0414\u044d\u043d\u0430 \u0410\u0431\u0440\u0430\u043c\u043e\u0432\u0430. \u0423 \u043d\u0435\u0433\u043e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442,\u00a0 \u00ab\u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0437\u0430\u043d\u0435\u0441\u0442\u0438 React.memo \u0432\u043d\u0443\u0442\u0440\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e? \u041d\u0435 \u0443\u0441\u043a\u043e\u0440\u0438\u0442 \u043b\u0438 \u044d\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440? \u041c\u043e\u0436\u0435\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438?\u00bb. \u0410 \u043e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442: \u00ab\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Lodash memoize (\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435 \u043d\u0430 React) \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438? \u041d\u0435 \u0443\u0441\u043a\u043e\u0440\u0438\u0442 \u043b\u0438 \u044d\u0442\u043e \u0438\u0445? \u041d\u0443\u0436\u043d\u044b \u043b\u0438 \u043d\u0430\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438? \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e?\u00bb.<\/p>\n<p>2) \u041d\u0438\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0434\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c useCallback, \u043d\u043e \u043c\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">export function Page() {   const [state, setState] = useState(0);   const handler = (event) => {     setState(event.target value)   }   return (     &lt;Form>        &lt;Input volue={state} onChange={handler}\/>        {\/*...*\/}     &lt;\/Form>   ) }<\/code><\/pre>\n<p>\u0412\u0435\u0434\u044c input \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u0441\u0442\u0435\u0439\u0442 \u0438 \u0442\u0430\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u044b \u043e\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0434\u043b\u044f \u043a\u043e\u0432\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f.<\/p>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e<\/h3>\n<ul>\n<li>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 useEffect;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0434\u043e\u0440\u043e\u0433\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u043d\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p><strong>useEffect <\/strong>\u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 \u043f\u0435\u0440\u0432\u044b\u043c. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e 99% \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:\u00a0<\/p>\n<pre><code class=\"javascript\">import {createContext, useCallback, useEffect} from \u201creact\u201d;  const Context = createContext({});  export function NotifyContext({children}) {   const notify = useCallback(() => {     \/\/...   },[]);   return (     &lt;Context Provider value={{notify}}>       {children}     &lt;\/Context.Provider>   ) }<\/code><\/pre>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u043d\u0438\u0437 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c alert \u0438\u043b\u0438 \u043c\u043e\u0434\u0430\u043b\u043a\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043e\u0442\u0432\u0430\u043b\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0432 useEffect, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u043c \u0441\u0430\u0439\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 \u0438 \u0442.\u0434.<\/p>\n<pre><code class=\"javascript\">import {useContext} from \u201creact\";  export function Component() {   const {notify} = useContext(Context);    useEffect(() => {     fetch()       .then(() => {       \/\/...     })       .catch(error => {       notify(error.message)     })   }, [notify]) }<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 useEffect, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0451 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0410 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c React, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 useCallback. \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><strong>\u0421\u0443\u043f\u0435\u0440\u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f.<\/strong> \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u0438\u0442\u044b\u0441\u044f\u0447\u043d\u044b\u0435 \u0438\u043b\u0438 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0447\u0438\u0441\u043b\u0430 \u0424\u0438\u0431\u043e\u043d\u0430\u0447\u0447\u0438.<\/p>\n<pre><code class=\"javascript\">export function Component(count) {   const fibonacci = useMemo(() => {     calculate(count);   }, [count];    return (     &lt;>       { \/* .. *\/}     &lt;\/>   ) }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u0432\u0435\u0434\u044c \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0441\u0443\u043f\u0435\u0440\u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u0432 useMemo.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0440\u043e\u0433\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">const VeryExpensiveTree = memo(VeryExpensiveTreeComponent ) ;  export function Page() {   const [state, setState] = useState(0);    const handler = useCallback((event) => {     setState(event.target.value) }, [])  return (   &lt;Wrapper>     &lt;OtherComponent state={state}\/>     &lt;VeryExpensiveTree handler={handler}\/>   &lt;\/Wrapper> )}<\/code><\/pre>\n<p>\u041a\u0430\u043a\u043e\u0435-\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u0437\u0430\u0442\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440. \u0425\u043e\u0447\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 memo. \u0418 \u0432\u0441\u0435 props-\u044b \u2014 \u0432 useCallBack \u0438 \u0432 useMemo.<\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434\u044b<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/280\/878\/7e5\/2808787e5d8f222c758082d217c0d1fe.jpg\" width=\"831\" height=\"386\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/280\/878\/7e5\/2808787e5d8f222c758082d217c0d1fe.jpg\" data-blurred=\"true\"\/><\/figure>\n<p><strong>\u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0434\u0435\u0448\u0435\u0432\u0430\u044f.<\/strong> \u041e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 memo, \u0438 \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 porps-\u044b \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b \u0432 useMemo \u0438 useCallback.<\/p>\n<p><strong>\u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. <\/strong>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0441\u0443\u043f\u0435\u0440\u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043a\u0443\u0447\u0435\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0447\u0430\u0440\u0442\u043e\u0432, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0432 React.<\/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\/749294\/\"> https:\/\/habr.com\/ru\/articles\/749294\/<\/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-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u0432\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0445\u0443\u0436\u0435, \u0447\u0435\u043c \u0435\u0451 \u043f\u043e\u043b\u043d\u043e\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435? \u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u0435\u0448\u0451\u0432\u0430\u044f! \u041e\u043d\u0430 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 TTI \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0451 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0444\u0438\u0442, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043e\u0442 \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0443\u0433\u0437\u0430\u0440 \u0413\u0430\u0433\u0443\u043b\u0438\u044f. \u0423 \u043c\u0435\u043d\u044f 10 \u043b\u0435\u0442 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u042f\u043d\u0434\u0435\u043a\u0441 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0431\u0430\u043d\u043a. \u042f \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e \u043d\u0430 Google I\/O \u0438 Google Dev Fest, \u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435, \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0447\u0443 \u0438 \u043c\u0435\u043d\u0442\u043e\u0440\u044e. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u043c\u043e\u0435\u0433\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0434\u043b\u044f FrontendConf 2022. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0431 \u044d\u0442\u043e\u0439 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u043c\u0435\u043d\u044f \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u043d\u0438\u043a\u0443 NookieGrey \u0432 \u0441\u043e\u0446\u0441\u0435\u0442\u044f\u0445 \u0438 \u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c. \u042f \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u043d\u0430 \u043d\u0438\u0445 \u043e\u0442\u0432\u0435\u0447\u0443.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0433\u043e\u0434\u0430 \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043f\u044f\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 React, \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438 \u0438 React Memo. \u0413\u0434\u0435-\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0433\u0434\u0435-\u0442\u043e \u2014 callback\u2019\u0438, \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u0432 useCallback, \u0430 \u0433\u0434\u0435-\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u043b\u0438 \u0432\u0441\u0451 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0451. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u0430 \u0447\u0442\u043e \u043d\u0435\u0442.<\/p>\n<p>\u042f \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u044b\u0448\u0430\u043b \u043e\u0442 \u043a\u043e\u043b\u043b\u0435\u0433 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u043b\u0441\u044f \u0441 \u043d\u0438\u043c\u0438. \u041d\u043e \u043d\u0430 \u0440\u0435\u0432\u044c\u044e \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 React \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0442\u0430\u043a, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043b\u044e\u0431\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 useMemo, useCallback \u0438 memo? \u042f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0433\u0443\u0433\u043b\u0438\u0442\u044c \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0425\u0430\u0431\u0440, \u0430 \u0435\u0449\u0451 \u043f\u043e\u0448\u0435\u043b \u0432 \u0414\u0438\u0441\u043a\u043e\u0440\u0434 \u0420\u0435\u0430\u043a\u0442\u0430, \u0441\u043e\u0437\u0434\u0430\u043b \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u0435\u0433\u043e. \u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u044b\u0435.\u00a0 \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0438\u0437 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 useMemo;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u0412\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 useMemo<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 useMemo, \u0437\u0430\u043b\u0435\u0437\u0435\u043c \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u0435\u0431\u0440\u0438 React \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437\u043d\u0443\u0442\u0440\u0438.<\/p>\n<pre><code class=\"javascript\">function useMemo(create, deps) {   var dispatcher = resolveDtspatcher( );   return dispatcher.useMemo(create, deps); } function resolveDispatcher() {   var dispatcher = ReactCurrentDispatcher.current;   if (dispatcher === null) {    error('Hooks can only be called inside of the body of a function component.');   }   return dispatcher;  }<\/code><\/pre>\n<p>\u0412 React.useMemo \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432 dispatcher. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0445\u0443\u043a \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e. \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 useMemo \u0438\u0437 dispatcher, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0430 React. \u041a\u043e\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 react.js \u043d\u0430 \u044d\u0442\u043e\u043c \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c useMemo \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 dispatcher, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">var ReactSharedInternals = {   ReactCurrentDispatcher: ReactCurrentDtspatcher,   \/\/... }; exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;   \/\/---> react-dom.js<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0433\u0434\u0435 \u043e\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 react-dom.js, \u0442\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041e\u0431\u044b\u0447\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0447\u0442\u043e-\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c, \u0442\u043e \u043f\u0438\u0448\u0435\u043c \u00ab\u0438\u043c\u043f\u043e\u0440\u0442\u00bb. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">function renderWithHooks(current, ...) {   if (current !== null &amp;&amp; current.memoizedState !== null) {   ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;    }else {   ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;   }  }<\/code><\/pre>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c react-dom \u0435\u0441\u0442\u044c \u0441\u0435\u043c\u044c \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f dispatcher. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u0438\u0437 \u043d\u0438\u0445: dispatchOnUpdate, dispatchOnMount. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 dispatcher. \u041d\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 dispatchOnUpdate.<\/p>\n<pre><code class=\"javascript\">HooksDispatcherOnUpdatelnDEV = {   useCallback: function (callback, deps) {\/**\/},   useEffect: function (create, deps) {\/**\/},   useMemo: function (create, deps) {     currentHookNameInDev = 'useMemo';     updateHookTypesDev();     var prevDispatcher = ReactCurrentDispatcher.current;     ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;     try {       return updateMemo(create, deps);     } finally {       ReactCurrentDispatcher.current = prevDispatcher;     }   } };<\/code><\/pre>\n<p>\u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a, \u0440\u0430\u0437\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0434\u043b\u044f \u043d\u0430\u0441 \u044d\u0442\u043e updateMemo, \u0442\u043e \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0430\u043c\u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e: <strong>return updateMemo(create, deps);<\/strong><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043b\u0435\u0437\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<pre><code class=\"javascript\">function updateMemo(nextCreate, deps) {   var hook = updateWorkInProgressHook();   var nextDeps = deps == undefined ? null : deps;   var prevState = hook.nenoizedState;   if (prevstate !== null &amp;&amp; nextDeps !== null) {     var prevDeps = prevState[1];     if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevState[0];     }   }   var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValues; }<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0451 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 &#8212; deps.<\/p>\n<pre><code class=\"javascript\">   if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevState[0];     }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0443\u0436\u0435 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0435\u0439\u0442.<\/p>\n<pre><code class=\"javascript\">  var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValues;<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 dispatch \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\u043c\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u2014 updateWorkInProgressHook. \u0412 \u043d\u0435\u0439 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0445\u0443\u043a\u0438.\u00a0<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043f\u0440\u043e \u0445\u0443\u043a\u0438 \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0445\u0443\u043a \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0438 React \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443. \u041d\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0425\u0443\u043a \u2014 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u0443\u043a\u0430, \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 next.<\/p>\n<pre><code class=\"javascript\">function updateWorkInProgressHook() {   var newHook = {     memoizedState: currentHook.memoizedState,     baseState: currentHook.baseState,     baseQueue: currentHook.baseQueue,     queue: currentHook.queve,     next: null   };   if (workInProgressHook === null) {     cerrentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;   } else {     workInProgressHook = workInProgressHook.next = newHook;   }   return workInProgressHook; }<\/code><\/pre>\n<p>\u0423 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0445\u0443\u043a\u0430 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a \u0438 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 React \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432. \u0412\u044b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0438 \u0446\u0438\u043a\u043b\u043e\u0432, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u043d\u0430\u0435\u0442\u0435 \u043f\u043e\u0447\u0435\u043c\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u043d\u043a\u0435\u0434 \u043b\u0438\u0441\u0442\u0430.<\/p>\n<p>\u041c\u044b \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0435 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, dispatch \u0438 \u0442.\u043f.\u00a0<\/p>\n<pre><code class=\"javascript\">function updateMemo{nextCreate, deps) {   var hook = updateWorkInProgressHook();   var nextDeps = deps === undefined ? null : deps;   var prevState = hook.memoizedState;   if (prevState !== null &amp;&amp; nextDeps !== null) {     var prevDeps = prevState[1];     if (areHookInputsEqual(nextDeps, prevDeps)) {       return prevstate[@];     }   }   var nextValue = nextCreate();   hook.memoizedState = [nextValue, nextDeps];   return nextValue; }<\/code><\/pre>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0445\u0443\u043a \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u2014 updateMemo, useCallback, memo \u2013 \u043d\u0435 \u0434\u0435\u0448\u0435\u0432\u044b\u0435.<\/p>\n<p>\u042f \u0441\u0434\u0435\u043b\u0430\u043b <a href=\"https:\/\/github.com\/NookieGrey\/performance\"><strong>\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/a> \u0438 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0432 \u043d\u0451\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u043e\u043e\u0431\u0449\u0435, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f \u0437\u0430 138 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043d\u0430\u0447\u0430\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u2014 \u043e\u0442 141 \u0434\u043e 149 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u0435\u0440\u043d\u0451\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f 150 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410 \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 TTI \u2013 time to interaction, \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u043f\u043e\u043a\u0430\u0437\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. TTI \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 SEO\u0448\u043d\u0438\u043a\u0438 \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0412\u0430\u0436\u043d\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0448\u0443\u0441\u0442\u0440\u043e\u0439. \u0412\u0430\u0436\u043d\u0435\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0447\u0435\u043c \u0430\u043f\u0434\u0435\u0439\u0442\u044b.<\/p>\n<blockquote>\n<p><strong>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430\u00a0\u0442\u043e, \u0447\u0442\u043e\u00a0\u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, React Memo \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u00a0\u0443\u0449\u0435\u0440\u0431 \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0443 \u0438 TTI \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u00a0React, \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f, \u0441\u0442\u043e\u0438\u0442\u00a0\u043b\u0438 \u043e\u043d\u043e \u0442\u043e\u0433\u043e. <\/strong><\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0440\u0438\u043f\u043b\u0435\u0442\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0440\u0438\u043f\u043b\u0435\u0442 \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 memo, useMemo \u0438 useCallback. \u041d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 useMemo, \u0430\u043f\u0434\u0435\u0439\u0442\u044b \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 memo, useMemo &amp; useCallback \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435: \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u043d\u043e\u043b\u044c, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f. \u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 \u0432 memo, \u0432\u0441\u0435 props-\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 useMemo, \u0430 \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b \u0432 useCallback \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f.\u00a0<\/p>\n<p>\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0445\u0435\u043d\u0434\u043b\u0435\u0440\u044b \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e props-\u044b, \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430. \u0410\u043f\u0434\u0435\u0439\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f \u043f\u043e\u0448\u0435\u043b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0442\u0430\u0439\u043c\u0435\u0440\u044b, \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438 \u0438 \u0437\u0430\u0442\u0435\u043c \u0443\u0431\u0440\u0430\u043b memo \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React.memo<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0442\u0440\u0438\u043f\u043b\u0435\u0442\u0435. \u0415\u0441\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0418\u0437\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0431\u0440\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043b.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u043f\u0440\u043e\u0444\u0438\u0442\u0430.<\/p>\n<p>\u041d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u043c\u043e\u0436\u0435\u0442, \u044f \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u0431\u0440\u0430\u043b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e?<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0411\u044b\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0437\u0430\u043c\u0435\u0440\u044b, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0440\u044b.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0432 \u0437\u0430\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u0438 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0442\u043e, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u043f\u0440\u043e\u0444\u0438\u0442\u0430, \u0437\u0430\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 TTI.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u041f\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0418\u0437\u0443\u0447\u0438\u0432 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043a \u043f\u044f\u0442\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0441\u043f\u0438\u0447\u0435\u043a.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043d\u043e\u0433\u043e \u0433\u043e\u0440\u043b\u044b\u0448\u043a\u0430.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0432\u0440\u0435\u0434\u0430.<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u041f\u0440\u0435<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-404165","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/404165","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=404165"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/404165\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=404165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=404165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=404165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}