{"id":327610,"date":"2022-01-10T08:57:42","date_gmt":"2022-01-10T08:57:42","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=327610"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=327610","title":{"rendered":"<span>React.js: \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\" class=\"article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/pu\/no\/zh\/punozh3zkth3cqyppf_przd5wco.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0441 \u0432\u0430\u043c\u0438 \u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0432 <a href=\"https:\/\/ru.reactjs.org\/\"><code>React.js<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c?<\/strong><\/p>\n<p>  <\/p>\n<p><code>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\/state<\/code> \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u043a \u043b\u044e\u0431\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 <code>\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\/rendering<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 <code>\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\/reactive variables<\/code> ](\u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <a href=\"https:\/\/rxjs.dev\/\"><code>RxJS<\/code><\/a>).<\/p>\n<p>  <\/p>\n<p><code>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c\/state management<\/code> \u2014 \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c &#171;\u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435&#187; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 <a href=\"https:\/\/refactoring.guru\/ru\/design-patterns\/observer\"><code>\u0418\u0437\u0434\u0430\u0442\u0435\u043b\u044c-\u041f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\/Publisher-Subscriber\/Pub-Sub<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e, \u043d\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\/\u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c <code>HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/code> \u0432\/\u0438\u0437 <code>DOM<\/code>. \u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>DOM<\/code>, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u043e\u0431\u0443\u0441\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 2 \u0432\u0438\u0434\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435\/local<\/code>: \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0445\u0443\u043a <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-state.html\"><code>useState<\/code><\/a>;<\/li>\n<li><code>\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435\/shared<\/code>: \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0445\u0443\u043a <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-reference.html#usecontext\"><code>useContext<\/code><\/a> (\u0447\u0430\u0441\u0442\u043e \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u0445\u0443\u043a\u043e\u043c <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-reference.html#usereducer\"><code>useReducer<\/code><\/a>) \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0438\u043f\u0430 <a href=\"https:\/\/redux.js.org\/\"><code>Redux<\/code><\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 2 \u0432\u0438\u0434\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0435\/co-located<\/code>: \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u044b \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u044b\u0445, \u0442.\u0435. \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445 <code>\u043f\u0440\u0435\u0434\u043e\u043a-\u043f\u043e\u0442\u043e\u043c\u043e\u043a\/parent-child<\/code>, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (<code>useContext\/useReducer<\/code>; \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0439 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c <a href=\"https:\/\/recoiljs.org\/\"><code>Recoil<\/code><\/a>);<\/li>\n<li><code>\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435\/global<\/code> \u2014 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<code>Redux<\/code>).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gz\/_o\/yx\/gz_oyx9xhm_7wvpydh1uk1wc3wy.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gz\/_o\/yx\/gz_oyx9xhm_7wvpydh1uk1wc3wy.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0433\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/react-query.tanstack.com\/\"><code>React Query<\/code><\/a>. \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c <code>\u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u043c\/mixed<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u2014 \u044d\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445), \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\/\u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c <code>HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/code> \u0432\/\u0438\u0437 <code>DOM<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430) \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 <code>DOM<\/code>. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 <code>DOM<\/code> <code>React<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u0438\u043a: \u043e\u0431\u044a\u0435\u043a\u0442 <code>\u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM\/virtual DOM<\/code> \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u0435\u0435, <code>\u0432\u043e\u043b\u043e\u043a\u043d\u043e\/fiber<\/code>, \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c <code>\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 DOM\/DOM diffing<\/code> (\u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u043e\u043b\u043e\u043a\u043e\u043d), \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>\u043a\u043b\u044e\u0447\/key<\/code> \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u044b\u0432\u0430\u0435\u0442 2 \u0432\u0438\u0434\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>\u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439\/initial<\/code>: \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li><code>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439\/rerendering<\/code>: \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 (\u0441\u043c. \u043d\u0438\u0436\u0435).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438 \u043a\u0430\u043a \u0443\u0442\u0438\u043b\u0438\u0442\u0430 <a href=\"https:\/\/ru.reactjs.org\/docs\/react-api.html#reactlazy\"><code>lazy<\/code><\/a> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f <a href=\"https:\/\/ru.reactjs.org\/docs\/react-api.html#reactsuspense\"><code>Suspense<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <a href=\"https:\/\/ru.reactjs.org\/docs\/code-splitting.html\"><code>\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430\/code splitting<\/code><\/a>, \u0442.\u0435. \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c (\u0432 \u044d\u0442\u043e\u043c <code>React<\/code> \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 <a href=\"https:\/\/webpack.js.org\/\"><code>Webpack<\/code><\/a>) \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 <code>JS-\u043a\u043e\u0434<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/ru.reactjs.org\/docs\/conditional-rendering.html\"><code>\u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\/conditional rendering<\/code><\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 &#171;\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442&#187; \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/li>\n<li>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>\u043f\u0440\u043e\u043f\u043e\u0432\/props<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443;<\/li>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><a href=\"https:\/\/alexsidorenko.com\/blog\/react-render-always-rerenders\/\"><code>\u041e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0432 React<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><code>\u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\/context consuming<\/code> \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f (\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0442\u0441\u044f) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438 \u043a\u0430\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0445\u0443\u043a <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-reference.html#usecallback\"><code>useCallback<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c (<code>\u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\/memoize<\/code>) \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432);<\/li>\n<li>\u0445\u0443\u043a <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-reference.html#usememo\"><code>useMemo<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u043e\u0432 \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c) \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043a\u0438;<\/li>\n<li>\u0443\u0442\u0438\u043b\u0438\u0442\u0430 <a href=\"https:\/\/ru.reactjs.org\/docs\/react-api.html#reactmemo\"><code>memo<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0437\u0430 \u0441\u0447\u0435\u0442 <code>\u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0433\u043e\/shallow<\/code> \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0438\u043c \u043f\u0440\u043e\u043f\u043e\u0432.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438 \u043a\u0430\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/ru.reactjs.org\/docs\/profiler.html\"><code>\u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a (\u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0435\u0440)\/profiler<\/code><\/a> \u2014 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0441 <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi?hl=ru\"><code>React Developer Tools<\/code><\/a>;<\/li>\n<li>\u0443\u0442\u0438\u043b\u0438\u0442\u0430 <a href=\"https:\/\/github.com\/welldone-software\/why-did-you-render\"><code>why-did-you-render<\/code><\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e?<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 <code>React\/TypeScript-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/code> \u0438 \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/61c2db2ef61f533babdf2fc3\" data-style=\"\" id=\"61c2db2ef61f533babdf2fc3\" width=\"\"><\/div>\n<\/div>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/create-react-app.dev\/\"><code>create-react-app<\/code><\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">yarn create react-app my-app --template typescript # or npx create-react-app ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 2 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: <code>RandomString<\/code> \u0438 <code>RandomHexColor<\/code>. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 3 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: <code>Container<\/code>, <code>Button<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0439 \u0438\u0445 \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (<code>createStore<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u0443\u043a \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (<code>useLogAfterFirstRender<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">- components  - RandomHexColor    - Button.tsx    - Container.tsx    - index.tsx  - RandomString    - Button.tsx    - Container.tsx    - index.tsx  - index.ts - hooks  - useLogAfterFirstRender.ts - types  - index.d.ts - utils  - createStore.tsx - App.scss - App.tsx - index.tsx<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0449\u0438\u043c (\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c) \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <code>RandomString<\/code> \u0438 <code>RandomHexColor<\/code>. \u0418\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0447\u0435\u043c \u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 (<code>\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\/store<\/code>) \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c (<code>state<\/code>) \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u0430\u043c\u0438 (<code>setters<\/code>) \u2014 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f <code>\u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\/state slices<\/code> \u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/li>\n<li>\u0441\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f;<\/li>\n<li>\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u044b\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0438\u0445 \u0441\u0435\u0442\u0442\u0435\u0440\u044b;<\/li>\n<li>\u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0438 \u0445\u0443\u043a\u0438 \u0434\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u044b (<code>types\/index.d.ts<\/code>) \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0442\u0438\u043f \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0443\u0442\u0438\u043b\u0438\u0442\u0435 export type State = { [k: string]: any } \/\/ \u0442\u0438\u043f \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432 export type InitialSetters = {  [k: string]: (s: State, ...args: any[]) => void | Partial&lt;State> } \/\/ \u0442\u0438\u043f \u0434\u043b\u044f \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432 export type ProxySetters = { [k: string]: (v: any) => void } \/\/ \u0442\u0438\u043f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 export type Store = { state: State; setters: InitialSetters } \/\/ \u0442\u0438\u043f \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 export type Children = { children: React.ReactNode }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0443\u0442\u0438\u043b\u0438\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const store = {  state: {    stateSlice: value  },  setters: {    setter: (state, args) => stateSlice  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a\u0438 \u0438 \u0442\u0438\u043f\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React, { createContext, useContext, useMemo, useState } from 'react' import { State, InitialSetters, ProxySetters, Store, Children } from 'types'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const createSetters = (  setters: InitialSetters,  setState: React.Dispatch&lt;(prevState: State) => State> ) => {  const _setters = {} as ProxySetters   for (const key in setters) {    _setters[key] = (...args) => {      setState((state) => {        const newState = setters[key](state, ...args)         return { ...state, ...newState }      })    }  }   return _setters }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043b\u044e\u0447\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0421\u0435\u0442\u0442\u0435\u0440 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export function createStore(store: Store) {  \/\/ \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b (\u043d\u0438\u0436\u0435)  const StateContext = createContext&lt;State>(store.state)  const SetterContext = createContext&lt;ProxySetters>(store.setters)   const Provider = ({ children }: Children) => {    const [state, setState] = useState(store.state)    \/\/ \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0438\u0445 \u0441\u0435\u0442\u0442\u0435\u0440\u044b (\u043a\u043d\u043e\u043f\u043e\u043a)    const setters = useMemo(() => createSetters(store.setters, setState), [])     return (      &lt;StateContext.Provider value={state}>        &lt;SetterContext.Provider value={setters}>          {children}        &lt;\/SetterContext.Provider>      &lt;\/StateContext.Provider>    )  }   const useStore = () => useContext(StateContext)  const useSetter = () => useContext(SetterContext)   return [Provider, useStore, useSetter] as const }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u0443\u044e \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432 <code>App.tsx<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0438\u043b\u0438, \u0442\u0438\u043f, \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import '.\/App.scss' import { Store } from 'types' import { createStore } from 'utils\/createStore' import { RandomString, RandomHexColor } from 'components'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const store: Store = {  state: {    randomString: '',    randomHexColor: ''  },  setters: {    setRandomString: (_, randomString) => ({ randomString }),    setRandomHexColor: (_, randomHexColor) => ({ randomHexColor })  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 2 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>randomString<\/code> \u0438 <code>randomHexColor<\/code> \u0438 2 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u044d\u0442\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445: <code>setRandomString<\/code> \u0438 <code>setRandomHexColor<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a\u0438 \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \/\/ \u043c\u044b \u0432\u043e\u043b\u044c\u043d\u044b \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0438 \u0445\u0443\u043a\u0438 \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e, \/\/ \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \/\/ \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b \u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u0445\/\u0445\u0443\u043a\u0430\u0445 export const [Provider, useStore, useSetter] = createStore(store)  function App() {  return (    &lt;Provider>      &lt;RandomString \/>      &lt;RandomHexColor \/>    &lt;\/Provider>  ) }  export default App<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u0442\u0438\u043b\u0438 (`App.scss`)<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">\/\/ \u0448\u0440\u0438\u0444\u0442 @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@200;400;600&amp;display=swap');  \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 $primary: #0275d8; $success: #5cb85c; $warning: #f0ad4e; $light: #f7f7f7; $dark: #292b2c;  \/\/ \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 @mixin reset($font-family, $font-size, $color) {  margin: 0;  padding: 0;  box-sizing: border-box;  @if $font-family {    font-family: $font-family;  }  @if $font-size {    font-size: $font-size;  }  @if $color {    color: $color;  } }  \/\/ \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f @mixin flex-center($column: false) {  display: flex;  justify-content: center;  align-items: center;   @if $column {    &amp; {      flex-direction: column;    }  } }  *, *::before, *::after {  \/\/ \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d  @include reset('Montserrat', 1rem, $dark); }  #root {  min-height: 100vh;  @include flex-center(true);   \/\/ \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e gap \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Firefox, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a  div + div {    margin-top: 1rem;  }   .random-string,  .random-color {    @include flex-center(true);  }   .random-color {    div {      width: 120px;      height: 120px;      border-radius: 4px;      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);    }  }   button {    margin: 0.5rem;    padding: 0.5rem 1rem;    border: none;    outline: none;    border-radius: 4px;    background-color: $primary;    color: $light;    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);    cursor: pointer;    user-select: none;     &amp;:active {      box-shadow: none;    }  }   .color-button {    background-color: $success;  }   .reload-button {    background-color: $warning;    color: $dark;  } }<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <a href=\"https:\/\/sass-lang.com\/\"><code>sass<\/code><\/a>: <code>yarn add -D sass<\/code> \u0438\u043b\u0438 <code>npm i -D sass<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0425\u0443\u043a \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (<code>hooks\/useLogAfterFirstRender.ts<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useEffect, useRef } from 'react'  export const useLogAfterFirstRender = (message: string) => {  const firstRender = useRef(true)   useEffect(() => {    firstRender.current = false  }, [])   if (!firstRender.current) {    console.log(message)  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 (<code>RandomString\/Container.tsx<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useStore } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  export const Container = () => {  \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 `randomString`  const { randomString } = useStore()   useLogAfterFirstRender('Random string container')   return &lt;p>{randomString || 'qwerty'}&lt;\/p> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 (<code>RandomString\/Button.tsx<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useCallback } from 'react' import { useSetter } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 const getRandomString = () => Math.random().toString(36).slice(2)  export const Button = () => {  \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 `randomString`  const { setRandomString } = useSetter()   useLogAfterFirstRender('Random string button')   \/\/ \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438  const onClick = useCallback(() => {    const randomString = getRandomString()    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0442\u0442\u0435\u0440    setRandomString(randomString)  }, [setRandomString])   return &lt;button onClick={onClick}>Set random string&lt;\/button> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RandomString<\/code> (<code>RandomString\/index.tsx<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Container } from '.\/Container' import { Button } from '.\/Button'  export const RandomString = () => (  &lt;div className='random-string'>    &lt;Container \/>    &lt;Button \/>  &lt;\/div> )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RandomHexColor<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ RandomHexColor\/Container.tsx import { useStore } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  export const Container = () => {  \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 `randomHexColor`  const { randomHexColor } = useStore()   useLogAfterFirstRender('Random HEX color container')   \/\/ \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439  const containerStyles = useMemo(    () => ({      backgroundColor: randomHexColor || 'deepskyblue'    }),    [randomHexColor]  )   return &lt;div style={containerStyles}>&lt;\/div> }  \/\/ RandomHexColor\/Button.tsx import { useCallback } from 'react' import { useSetter } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 const getRandomHexColor = () =>  `#${((Math.random() * 0xffffff) &lt;&lt; 0).toString(16)}`  export const Button = () => {  \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 `randomHexColor`  const { setRandomHexColor } = useSetter()   useLogAfterFirstRender('Random HEX color button')   const onClick = useCallback(() => {    const randomHexColor = getRandomHexColor()    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0442\u0442\u0435\u0440    setRandomHexColor(randomHexColor)  }, [setRandomHexColor])   return (    &lt;button onClick={onClick} className='color-button'>Set random HEX color&lt;\/button>  ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (<code>components\/index.ts<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export { RandomString } from '.\/RandomString' export { RandomHexColor } from '.\/RandomHexColor'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>yarn start<\/code> \u0438\u043b\u0438 <code>npm start<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/s2\/ad\/hq\/s2adhqjqtdhdkizy8cbfnaddirq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <code>Set random string<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/qa\/j7\/ql\/qaj7ql2gyhraon6jjmohkgo25fy.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e? \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>RandomString<\/code>, \u0442\u0430\u043a \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>RandomHexColor<\/code>. \u041d\u043e \u043c\u044b \u0436\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u0441 <code>RandomHexColor<\/code>. \u041f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u043e\u043d \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443?<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Random HEX color container<\/code>, \u0430 \u043b\u0438\u0448\u044c \u0435\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435;<\/li>\n<li>\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f. \u042d\u0442\u0438\u043c \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f \u0437\u0430 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0443 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043d\u0435\u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">Container.displayName = 'Random string container' \/\/ \u0438 \u0442.\u0434.<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <code>Profiler<\/code> \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e: \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0448\u0435\u0441\u0442\u0435\u0440\u0435\u043d\u043a\u0438 <code>View settings<\/code> \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c <code>Highlight updates when components render.<\/code> \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 <code>General<\/code> \u0438 <code>Record why each component rendered while profiling.<\/code> \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 <code>Profiler<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/l4\/84\/l6\/l484l6jogz8nrmfov_hxyth8yhc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/pu\/vc\/1t\/puvc1tonopvwxqqeae62za4qn7c.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0441\u0442\u0440\u0435\u043b\u043a\u0443 <code>Reload and start profiling<\/code> \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/f6\/oo\/-l\/f6oo-l8lmhwb1ukrnbabap54px0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <code>Set random string<\/code>, \u0432\u0438\u0434\u0438\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0437\u0430\u043f\u0438\u0441\u0438 \u0434\u043b\u044f \u0435\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 <code>Ranked chart<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/ay\/fa\/zz\/ayfazzootcfbxvoq-8pkaaiz38i.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u0432 (<code>1 \/ 2<\/code>). \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/vt\/qh\/1d\/vtqh1dw0xram04294zg37g5yqhk.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Random HEX color container<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/8e\/z7\/1v\/8ez71vj3g2tsnjx8hqm7rpixlr8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u043b \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442.\u0435. \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (<code>Context.Provider<\/code>) (\u0435\u0433\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u0436\u0435). \u042d\u0442\u043e \u0432\u0435\u0440\u043d\u043e, \u043d\u043e \u043b\u0438\u0448\u044c \u043e\u0442\u0447\u0430\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0430\u043a\u0435\u0442 <code>why-did-you-render<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">yarn add -D @welldone-software\/why-did-you-render # or npm i ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <code>src\/index.tsx<\/code> \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (process.env.NODE_ENV === 'development') {  const whyDidYouRender = require('@welldone-software\/why-did-you-render')  whyDidYouRender(React, {    titleColor: 'green',    diffNameColor: 'blue',    logOnDifferentValues: true,    trackHooks: true  }) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 <code>CRA<\/code> \u043d\u0430 <code>react-scripts v4<\/code> (\u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/ru.reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\">\u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 JSX \u0432 JS<\/a>) \u0434\u0430\u043d\u043d\u0430\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0438 \u0440\u044f\u0434 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e <code>wdyr<\/code> \u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u043e\u0438\u0449\u0438\u0442\u0435 \u043e\u0442\u0432\u0435\u0442 \u0432 <a href=\"https:\/\/github.com\/welldone-software\/why-did-you-render\/issues\/154\">\u044d\u0442\u043e\u043c \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RandomHexColor\/Container<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">Container.whyDidYouRender = true<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u043d\u043e\u0432\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <code>Set random string<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/ee\/hn\/xl\/eehnxlerb8mmwcgza85pwa08bmm.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>randomString<\/code> \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 <code>\"\"<\/code> \u043d\u0430 <code>\"wpkhijfo7xi\"<\/code>, \u0437\u0430\u0442\u0435\u043c, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 <code>{ randomString: '', randomHexColor: '' }<\/code> \u043d\u0430 <code>{ randomString: 'wpkhijfo7xi', randomHexColor: '' }<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442 \u0432 \u0447\u0435\u043c \u0434\u0435\u043b\u043e! \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>  <\/p>\n<p><em>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0432 \u043f\u043e\u0434\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u044d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Random HEX color container<\/code> \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0430\u043b\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>randomHexColor<\/code>. \u041a\u0430\u043a \u043d\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f? \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431, \u043d\u043e \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>memo<\/code>. \u041d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u043e\u043f\u044b \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e <code>\u043f\u043e\u0434\u043d\u044f\u0442\u044c\/lift<\/code> \u0434\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>RandomHexColor\/index.tsx<\/code>. \u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useStore } from 'App' import { Button } from '.\/Button' import { Container } from '.\/Container'  export const RandomHexColor = () => {  const { randomHexColor } = useStore()   return (    &lt;div className='random-color'>      {\/* \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e `randomHexColor` \u043a\u0430\u043a \u043f\u0440\u043e\u043f *\/}      &lt;Container randomHexColor={randomHexColor} \/>      &lt;Button \/>    &lt;\/div>  ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RandomHexColor\/Container.tsx<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { memo } from 'react' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  type Props = {  randomHexColor: string }  \/\/ \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 export const Container = memo(({ randomHexColor }: Props) => {  useLogAfterFirstRender('Random HEX color container')   const containerStyles = useMemo(    () => ({      backgroundColor: randomHexColor || 'deepskyblue'    }),    [randomHexColor]  )   return &lt;div style={containerStyles}>&lt;\/div> })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <code>Set random string<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/jw\/xb\/9x\/jwxb9xvngodyyb25wkklwh6shra.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Random HEX color container<\/code> \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>randomString<\/code>, \u043d\u043e \u0437\u0430 \u0432\u0441\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0438\u0442\u044c: \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Random HEX color button<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043e\u043a (<code>RandomHexColor<\/code>). \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0430\u0448\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0438\u0432\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0432\u044b\u0433\u043e\u0434\u0443 \u043e\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Random HEX color button<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>memo<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { memo, useCallback, useState } from 'react' import { useSetter } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  \/\/ \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 export const Button = memo(() => {  const { setRandomHexColor } = useSetter()   useLogAfterFirstRender('Random HEX color button')   const onClick = useCallback(() => {    const randomHexColor = getRandomHexColor()    setRandomHexColor(randomHexColor)  }, [setRandomHexColor])   return (    &lt;button onClick={onClick} className='color-button'>      Set random HEX color    &lt;\/button>  ) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043d\u043e\u0432\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <code>Set random string<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/0a\/mq\/nb\/0amqnbntqfrcnbrnrzinl-qciq4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>randomString<\/code> \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e <code>Random string container<\/code>. \u041c\u044b \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c, \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u0438, \u043d\u043e \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u044e: \u043d\u0430\u0448\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0432 \u043d\u0438\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>Random HEX color button<\/code>. \u042d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { memo, useCallback, useState } from 'react' import { useSetter } from 'App' import { useLogAfterFirstRender } from 'hooks\/useLogAfterFirstRender'  const getRandomHexColor = () =>  `#${((Math.random() * 0xffffff) &lt;&lt; 0).toString(16)}`  export const Button = memo(() => {  const { setRandomHexColor } = useSetter()  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435  const [, setState] = useState({})   const forceUpdate = useCallback(() => {    \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0432\u043b\u0435\u0447\u0435\u0442 \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433    setState({})  }, [])   useLogAfterFirstRender('Random HEX color button')   const onClick = useCallback(() => {    const randomHexColor = getRandomHexColor()    setRandomHexColor(randomHexColor)  }, [setRandomHexColor])   return (    &lt;>      &lt;button onClick={onClick} className='color-button'>        Set random HEX color      &lt;\/button>      {\/* \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 *\/}      &lt;button onClick={forceUpdate} className='reload-button'>        Force update      &lt;\/button>    &lt;\/>  ) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <code>Force update<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/rw\/at\/mf\/rwatmfyr7-wlylu5vfm9yau-nuo.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 <code>Random HEX color button<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0435\u043c \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0438 \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/cloud.timeweb.com\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=cloud&amp;utm_content=direct&amp;utm_term=low\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/wn\/cq\/lp\/wncqlp9abeml4npwzsybuvhzcta.png\"\/><\/a><\/p>\n<\/div>\n<\/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\/company\/timeweb\/blog\/597109\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/597109\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\" class=\"article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" data-src=\"https:\/\/habrastorage.org\/webt\/pu\/no\/zh\/punozh3zkth3cqyppf_przd5wco.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0441 \u0432\u0430\u043c\u0438 \u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0432 <a href=\"https:\/\/ru.reactjs.org\/\"><code>React.js<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c?<\/strong><\/p>\n<p>  <\/p>\n<p><code>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\/state<\/code> \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u043a \u043b\u044e\u0431\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 <code>\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\/rendering<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 <code>\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\/reactive variables<\/code> ](\u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <a href=\"https:\/\/rxjs.dev\/\"><code>RxJS<\/code><\/a>).<\/p>\n<p>  <\/p>\n<p><code>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c\/state management<\/code> \u2014 \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c &#171;\u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435&#187; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 <a href=\"https:\/\/refactoring.guru\/ru\/design-patterns\/observer\"><code>\u0418\u0437\u0434\u0430\u0442\u0435\u043b\u044c-\u041f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\/Publisher-Subscriber\/Pub-Sub<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e, \u043d\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\/\u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c <code>HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/code> \u0432\/\u0438\u0437 <code>DOM<\/code>. \u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>DOM<\/code>, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u043e\u0431\u0443\u0441\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\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-327610","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327610","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=327610"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/327610\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=327610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=327610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}