{"id":321687,"date":"2021-04-19T09:00:51","date_gmt":"2021-04-19T09:00:51","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321687"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321687","title":{"rendered":"\u0417\u0430\u043c\u0435\u0442\u043a\u0430 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0445\u0443\u043a\u0438 \u0432 React"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/98\/k9\/is\/98k9issmcul9hqqfqbjuflx57uo.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 React, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 if, \u0446\u0438\u043a\u043b\u0430\u0445, \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0438 \u0442.\u0434. \u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u0438\u0445 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c?<\/p>\n<p>  \u0412\u043e\u043f\u0440\u043e\u0441 \u0437\u0432\u0443\u0447\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435? \u0412\u043e\u0442 \u0447\u0442\u043e \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0430\u0432\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432<\/a>.<br \/>  <a name=\"habracut\"><\/a><br \/>  <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html#only-call-hooks-at-the-top-level\" rel=\"nofollow noopener noreferrer\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435<\/a> (\u0432\u044b\u0434\u0435\u043b\u0438\u043b \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435):<\/p>\n<blockquote><p>\u00ab\u041d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0446\u0438\u043a\u043b\u043e\u0432, \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 React-\u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0434\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043d\u0438\u0445. \u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <b>\u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/b>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 React \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 useState \u0438 useEffect. (\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u0435.)\u00bb  <\/p><\/blockquote>\n<p>  \u041d\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0438\u0436\u0435.<\/p>\n<p>  <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html#explanation\" rel=\"nofollow noopener noreferrer\">\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435<\/a> (\u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u043f\u0443\u0449\u0435\u043d\u044b \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438):<\/p>\n<blockquote><p>&quot;\u2026 \u043a\u0430\u043a \u0436\u0435 React \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 useState? \u041e\u0442\u0432\u0435\u0442 \u0442\u0430\u043a\u043e\u0432: React \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <b>\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432<\/b>.\u2026 \u0414\u043e \u0442\u0435\u0445 \u043f\u043e\u0440 \u043f\u043e\u043a\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, React \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c <b>\u043d\u0435\u043a\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/b> \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0438\u0437 \u043d\u0438\u0445. \u041d\u043e \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430?\u2026 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0445\u0443\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0445\u0443\u043a\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. React <b>\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u0430 useState<\/b>. React \u043e\u0436\u0438\u0434\u0430\u043b, \u0447\u0442\u043e <b>\u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0443 persistForm, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/b>, \u043d\u043e \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u0430\u043a. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u043e\u0432 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0445\u0443\u043a\u0430, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0437\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c, \u0442\u0430\u043a\u0436\u0435 <b>\u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0432\u0438\u043d\u0443\u0442 \u043d\u0430 \u043e\u0434\u0438\u043d \u043d\u0430\u0437\u0430\u0434, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c<\/b>.\u2026 \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\u2026 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c &#8230;&quot;  <\/p><\/blockquote>\n<p>  \u041f\u043e\u043d\u044f\u0442\u043d\u043e? \u0414\u0430 \u043a\u0430\u043a-\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c. \u0427\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u00abReact \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432\u00bb? \u041a\u0430\u043a \u043e\u043d \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442? \u0427\u0442\u043e \u0437\u0430 \u00ab\u043d\u0435\u043a\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u00bb? \u041a \u043a\u0430\u043a\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u0445\u0443\u043a\u0430 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435? \u042f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043b\u0438 \u044d\u0442\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/p>\n<p>  \u0415\u0441\u0442\u044c \u043b\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443? \u0415\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-faq.html\" rel=\"nofollow noopener noreferrer\">\u00ab\u0425\u0443\u043a\u0438: \u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b\u00bb<\/a>. \u0422\u0430\u043c \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435.<\/p>\n<p>  <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-faq.html\" rel=\"nofollow noopener noreferrer\">\u041a\u0430\u043a React \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432\u044b \u0445\u0443\u043a\u043e\u0432 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c?<\/a><\/p>\n<blockquote><p>\u00abReact \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0442\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.\u2026 \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <b>\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044f\u0447\u0435\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c<\/b>. \u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f JavaScript-\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c <b>\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/b>. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u0438\u0439 \u0445\u0443\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 useState(), \u043e\u043d <b>\u0447\u0438\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 (\u0438\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0435\u0451 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430) \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e<\/b>. \u0422\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 useState() \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0441\u0432\u043e\u0451 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.\u00bb  <\/p><\/blockquote>\n<p>  \u0423\u0436\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e. \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044f\u0447\u0435\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0425\u0443\u043a \u0447\u0438\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e. \u041a\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA\" rel=\"nofollow noopener noreferrer\">\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u043c (\u0441\u0432\u044f\u0437\u043d\u043e\u043c) \u0441\u043f\u0438\u0441\u043a\u0435<\/a>.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0430\u043a, \u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0445\u0443\u043a\u043e\u0432, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c\u0430\u044f React \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u2014 \u044d\u0442\u043e \u0445\u0443\u043a\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u0443\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439):<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/n0\/xu\/zx\/n0xuzxwavbnaqhsp7iuqmffvvbi.png\"><\/p>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0430\u044f \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0437\u0443\u043c\u043d\u043e. \u041a\u0430\u043a \u043d\u0430\u043c \u0435\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c? \u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u043e\u0439, \u043d\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0444\u0430\u043a\u0442\u043e\u0432. \u0410 \u0437\u0430 \u0444\u0430\u043a\u0442\u0430\u043c\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0434\u0442\u0438 \u043d\u0430 GitHub, \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 <a href=\"https:\/\/github.com\/facebook\/react\/tree\/master\/packages\/react\/src\" rel=\"nofollow noopener noreferrer\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 React<\/a>.<\/p>\n<p>  \u041d\u0435 \u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u044f \u0441\u0440\u0430\u0437\u0443 \u0440\u0435\u0448\u0438\u043b\u0441\u044f \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043e\u0442\u0447\u0430\u044f\u043d\u043d\u044b\u0439 \u0448\u0430\u0433. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u043d\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u0432\u0441\u0435\u0432\u0435\u0434\u0443\u0449\u0435\u043c\u0443 \u0413\u0443\u0433\u043b\u0443. \u0412\u043e\u0442 \u0447\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c:<\/p>\n<ul>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/53974865\/how-do-react-hooks-determine-the-component-that-they-are-for\" rel=\"nofollow noopener noreferrer\">\u0412\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0445\u0443\u043a\u0438 React \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0432\u043e\u044e \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u044c \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443,<\/a> \u043d\u0430 Stack Overflow<\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/537410\/\">\u0421\u0442\u0430\u0442\u044c\u044f \u00ab\u041f\u0435\u0440\u0432\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0445\u0443\u043a\u043e\u0432 (\u0437\u0430\u0434\u0435\u043b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438)\u00bb<\/a> \u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/li>\n<li><a href=\"https:\/\/github.com\/reactjs\/rfcs\/issues\/82\" rel=\"nofollow noopener noreferrer\">\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0445\u0443\u043a\u043e\u0432 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u00abif\u00bb<\/a> \u043d\u0430 GitHub<\/li>\n<li>\u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u0435-\u043a\u0430\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0435\u0440\u043f\u043d\u0443\u0442\u044c \u0438\u0437 <a href=\"https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/react\/index.d.ts\" rel=\"nofollow noopener noreferrer\">\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439 TypsScript-\u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f React<\/a>. \u0412\u043e\u0442 <a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/md\/react-types.md\" rel=\"nofollow noopener noreferrer\">\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u044b\u0434\u0435\u0440\u0436\u043a\u0438<\/a><\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435 \u044d\u0442\u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043e\u0442\u0441\u044b\u043b\u0430\u044e\u0442 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c React. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432 \u043d\u0438\u0445 \u043f\u043e\u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f. \u0418\u0442\u0430\u043a, \u0442\u0435\u0437\u0438\u0441\u043d\u043e \u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u00abuseState\u00bb.<\/p>\n<p>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useState() \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react\/src\/ReactHooks.js\" rel=\"nofollow noopener noreferrer\">ReactHooks.js<\/a>:<\/p>\n<pre><code class=\"javascript\">export function useState&lt;S&gt;(   initialState: (() =&gt; S) | S ): [S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {   const dispatcher = resolveDispatcher()   return dispatcher.useState(initialState) } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 useState() (\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u0438\u0439 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440. \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0442\u043e\u0433\u043e \u0436\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"javascript\">import ReactCurrentDispatcher from '.\/ReactCurrentDispatcher'  function resolveDispatcher() {   const dispatcher = ReactCurrentDispatcher.current    return ((dispatcher: any): Dispatcher) } <\/code><\/pre>\n<p>  \u0414\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 useState() (\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432), \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abcurrent\u00bb \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u00abReactCurrentDispatcher\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 <a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react\/src\/ReactCurrentDispatcher.js\" rel=\"nofollow noopener noreferrer\">ReactCurrentDispatcher.js<\/a>:<\/p>\n<pre><code class=\"javascript\">import type { Dispatcher } from 'react-reconciler\/src\/ReactInternalTypes'  const ReactCurrentDispatcher = {   current: (null: null | Dispatcher) }  export default ReactCurrentDispatcher <\/code><\/pre>\n<p>  ReactCurrentDispatcher \u2014 \u044d\u0442\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u00abcurrent\u00bb. \u0417\u043d\u0430\u0447\u0438\u0442, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u043d \u0433\u0434\u0435-\u0442\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041d\u043e \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e? \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: \u0438\u043c\u043f\u043e\u0440\u0442 \u0442\u0438\u043f\u0430 \u00abDispatcher\u00bb \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 \u043a\u0430\u043a-\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u00ab\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438\u00bb React. \u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432 <a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js#L118\" rel=\"nofollow noopener noreferrer\">ReactFiberHooks.new.js<\/a> (\u0447\u0438\u0441\u043b\u043e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u2014 \u044d\u0442\u043e \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438):<\/p>\n<pre><code class=\"javascript\">\/\/ 118 const { ReactCurrentDispatcher, ReactCurrentBatchConfig } = ReactSharedInternals <\/code><\/pre>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e \u0432 <a href=\"\/\/%20https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/shared\/ReactSharedInternals.js\" rel=\"nofollow noopener noreferrer\">ReactSharedInternals.js<\/a> \u043c\u044b \u0443\u043f\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0432 \u00ab\u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0432\u043e\u043b\u0435\u043d\u043d\u044b\u043c\u00bb:<\/p>\n<pre><code class=\"javascript\">const ReactSharedInternals =   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED  export default ReactSharedInternals <\/code><\/pre>\n<p>  \u0418 \u0447\u0442\u043e, \u044d\u0442\u043e \u0432\u0441\u0435? \u041d\u0435\u0443\u0436\u0435\u043b\u0438 \u043d\u0430\u0448\u0438 \u043f\u043e\u0438\u0441\u043a\u0438, \u043d\u0435 \u0443\u0441\u043f\u0435\u0432 \u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u043a\u043e\u043d\u0446\u0443? \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c. \u0414\u0435\u0442\u0430\u043b\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 React \u043c\u044b \u043d\u0435 \u0443\u0437\u043d\u0430\u0435\u043c, \u043d\u043e \u043d\u0430\u043c \u044d\u0442\u043e \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a React \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0445\u0443\u043a\u0430\u043c\u0438. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 ReactFiberHooks.new.js:<\/p>\n<pre><code class=\"javascript\">\/\/ 405 ReactCurrentDispatcher.current =   current === null || current.memoizedState === null     ? HooksDispatcherOnMount     : HooksDispatcherOnUpdate <\/code><\/pre>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 \u2014 HooksDispatcherOnMount (\u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438) \u0438 HooksDispatcherOnUpdate (\u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435).<\/p>\n<pre><code class=\"javascript\">\/\/ 2086 const HooksDispatcherOnMount: Dispatcher = {   useState: mountState,   \/\/ \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438 \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e }  \/\/ 2111 const HooksDispatcherOnUpdate: Dispatcher = {   useState: updateState,   \/\/ \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438 \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e } <\/code><\/pre>\n<p>  \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u00ab\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\/\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u00bb \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0445\u0443\u043a\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">function mountState&lt;S&gt;(   initialState: (() =&gt; S) | S ): [S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0445\u0443\u043a\u0430   const hook = mountWorkInProgressHook()   \/\/ \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f   if (typeof initialState === 'function') {     initialState = initialState()   }   \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0445\u0443\u043a\u0430   \/\/ \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\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 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438   hook.memoizedState = hook.baseState = initialState   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0435 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0445\u0443\u043a\u0430   \/\/ \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439   const queue = (hook.queue = {     pending: null,     interleaved: null,     lanes: NoLanes,     dispatch: null,     lastRenderedReducer: basicStateReducer,     lastRenderedState: (initialState: any)   })   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 - \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (setState)   const dispatch: Dispatch&lt;     BasicStateAction&lt;S&gt;   &gt; = (queue.dispatch = (dispatchAction.bind(     null,     currentlyRenderingFiber,     queue   ): any))   \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u0430\u043c \u0445\u0443\u043a, \u0430 \u0435\u0433\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440   return [hook.memoizedState, dispatch] }  \/\/ 1266 function updateState&lt;S&gt;(   initialState: (() =&gt; S) | S ): [S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {   return updateReducer(basicStateReducer, (initialState: any)) } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u00abupdateReducer\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e useState \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 useReducer \u0438\u043b\u0438 \u0447\u0442\u043e useReducer \u2014 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useState.<\/p>\n<pre><code class=\"javascript\">function updateReducer&lt;S, I, A&gt;(   reducer: (S, A) =&gt; S,   initialArg: I,   init?: (I) =&gt; S ): [S, Dispatch&lt;A&gt;] {   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0443\u043a, \u043d\u043e \u0443\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (!)   const hook = updateWorkInProgressHook()   \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0447\u0435\u0440\u0435\u0434\u044c   const queue = hook.queue   \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0434\u0443\u043a\u0442\u043e\u0440 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c   queue.lastRenderedReducer = reducer    const current: Hook = (currentHook: any)    \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c   let baseQueue = current.baseQueue    \/\/ \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438\u0437 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f   if (baseQueue !== null) {     const first = baseQueue.next     let newState = current.baseState      let newBaseState = null     let newBaseQueueFirst = null     let newBaseQueueLast = null     let update = first     do {       \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435     } while (update !== null &amp;&amp; update !== first)      \/\/ \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0445\u0443\u043a\u0430 \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f     hook.memoizedState = newState     hook.baseState = newBaseState     hook.baseQueue = newBaseQueueLast      \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c     queue.lastRenderedState = newState   }    \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430   const dispatch: Dispatch&lt;A&gt; = (queue.dispatch: any)   \/\/ \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 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430   return [hook.memoizedState, dispatch] } <\/code><\/pre>\n<p>  \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0430\u043c\u0438 \u0445\u0443\u043a\u0438. \u0413\u0434\u0435 \u0436\u0435 \u0441\u043f\u0438\u0441\u043e\u043a? \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: \u0445\u0443\u043a\u0438 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438\/\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u00abmountWorkInProgressHook\u00bb \u0438 \u00abupdateWorkInProgressHook\u00bb, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ 592 function mountWorkInProgressHook(): Hook {   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0443\u043a   const hook: Hook = {     memoizedState: null,     baseState: null,     baseQueue: null,     queue: null,      \/\/ \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a (?!)     next: null   }    \/\/ \u0435\u0441\u043b\u0438 workInProgressHook \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f null, \u0437\u043d\u0430\u0447\u0438\u0442, \u0434\u0430\u043d\u043d\u044b\u0439 \u0445\u0443\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u0438   if (workInProgressHook === null) {     currentlyRenderingFiber.memoizedState = workInProgressHook = hook   } else {     \/\/ \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u0443\u043a \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u043f\u0438\u0441\u043a\u0430     workInProgressHook = workInProgressHook.next = hook   }   return workInProgressHook }  \/\/ 613 function updateWorkInProgressHook(): Hook {   \/\/ \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430   \/\/ \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u0438\u0431\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0445\u0443\u043a (current hook), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u0441\u043c. \u043d\u0438\u0436\u0435), \u043b\u0438\u0431\u043e workInProgressHook \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430,   \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443   \/\/ \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0446\u0430 \u0441\u043f\u0438\u0441\u043a\u0430, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f   let nextCurrentHook: null | Hook   if (currentHook === null) {     const current = currentlyRenderingFiber.alternate     if (current !== null) {       nextCurrentHook = current.memoizedState     } else {       nextCurrentHook = null     }   } else {     nextCurrentHook = currentHook.next   }    let nextWorkInProgressHook: null | Hook   if (workInProgressHook === null) {     nextWorkInProgressHook = currentlyRenderingFiber.memoizedState   } else {     nextWorkInProgressHook = workInProgressHook.next   }    if (nextWorkInProgressHook !== null) {     \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 workInProgressHook     workInProgressHook = nextWorkInProgressHook     nextWorkInProgressHook = workInProgressHook.next      currentHook = nextCurrentHook   } else {     \/\/ \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0445\u0443\u043a      \/\/ \u0414\u0430\u043d\u043d\u043e\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0445\u0443\u043a\u043e\u0432, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437     \/\/ \u0425\u043c, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u043e\u0434\u0438\u043d, \u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0445\u0443\u043a     \/\/ \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u0443\u043a\u043e\u0432 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c?     \/\/ \u0418\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e, \u043d\u043e \u0438 &quot;\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e&quot; \u0445\u0443\u043a\u043e\u0432?     invariant(       nextCurrentHook !== null,       'Rendered more hooks than during the previous render.'     )     currentHook = nextCurrentHook      const newHook: Hook = {       memoizedState: currentHook.memoizedState,        baseState: currentHook.baseState,       baseQueue: currentHook.baseQueue,       queue: currentHook.queue,        next: null     }      \/\/ \u0435\u0441\u043b\u0438 workInProgressHook \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f null, \u0437\u043d\u0430\u0447\u0438\u0442, \u0434\u0430\u043d\u043d\u044b\u0439 \u0445\u0443\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u0438     if (workInProgressHook === null) {       currentlyRenderingFiber.memoizedState = workInProgressHook = newHook     } else {       \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u0443\u043a \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u043f\u0438\u0441\u043a\u0430       workInProgressHook = workInProgressHook.next = newHook     }   }   return workInProgressHook } <\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0430\u0433\u0430\u044e, \u043d\u0430\u0448\u0430 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u0430\u0448\u043b\u0430 \u0441\u0432\u043e\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435. \u041c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u0443\u043a \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abnext\u00bb, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a. \u0412\u043e\u0442 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xp\/iy\/q9\/xpiyq99zo2qm2hutppit0ntnxta.jpeg\"><\/p>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0432\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u044f\u0437\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 JavaScript:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">class Node {   constructor(data, next = null) {     this.data = data     this.next = next   } }  class LinkedList {   constructor() {     this.head = null   }    insertHead(data) {     this.head = new Node(data, this.head)   }    size() {     let counter = 0     let node = this.head      while (node) {       counter++       node = node.next     }      return counter   }    getHead() {     return this.head   }    getTail() {     if (!this.head) return null      let node = this.head      while (node) {       if (!node.next) return node       node = node.next     }   }    clear() {     this.head = null   }    removeHead() {     if (!this.head) return     this.head = this.head.next   }    removeTail() {     if (!this.head) return      if (!this.head.next) {       this.head = null       return     }      let prev = this.head     let node = this.head.next      while (node.next) {       prev = node       node = node.next     }      prev.next = null   }    insertTail(data) {     const last = this.getTail()      if (last) last.next = new Node(data)     else this.head = new Node(data)   }    getAt(index) {     let counter = 0     let node = this.head      while (node) {       if (counter === index) return node       counter++       node = node.next     }     return null   }    removeAt(index) {     if (!this.head) return      if (index === 0) {       this.head = this.head.next       return     }      const prev = this.getAt(index - 1)      if (!prev || !prev.next) return      prev.next = prev.next.next   }    insertAt(index, data) {     if (!this.head) {       this.head = new Node(data)       return     }      const prev = this.getAt(index - 1) || this.getTail()      const node = new Node(data, prev.next)      prev.next = node   }    forEach(fn) {     let node = this.head     let index = 0      while (node) {       fn(node, index)       node = node.next       index++     }   }    *[Symbol.iterator]() {     let node = this.head      while (node) {       yield node       node = node.next     }   } }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f const chain = new LinkedList()  chain.insertHead(1) console.log(   chain.head.data, \/\/ 1   chain.size(), \/\/ 1   chain.getHead().data \/\/ 1 )  chain.insertHead(2) console.log(chain.getTail().data) \/\/ 1  chain.clear() console.log(chain.size()) \/\/ 0  chain.insertHead(1) chain.insertHead(2) chain.removeHead() console.log(chain.size()) \/\/ 1  chain.removeTail() console.log(chain.size()) \/\/ 0  chain.insertTail(1) console.log(chain.getTail().data) \/\/ 1  chain.insertHead(2) console.log(chain.getAt(0).data) \/\/ 2  chain.removeAt(0) console.log(chain.size()) \/\/ 1  chain.insertAt(0, 2) console.log(chain.getAt(1).data) \/\/ 2  chain.forEach((node, index) =&gt; (node.data = node.data + index)) console.log(chain.getTail().data) \/\/ 3  for (const node of chain) node.data = node.data + 1 console.log(chain.getHead().data) \/\/ 2  \/\/ \u043f\u043e\u0438\u0441\u043a \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 function middle(list) {   let one = list.head   let two = list.head    while (two.next &amp;&amp; two.next.next) {     one = one.next     two = two.next.next   }    return one }  chain.clear() chain.insertHead(1) chain.insertHead(2) chain.insertHead(3) console.log(middle(chain).data) \/\/ 2  \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 function circular(list) {   let one = list.head   let two = list.head    while (two.next &amp;&amp; two.next.next) {     one = one.next     two = two.next.next      if (two === one) return true   }    return false }  chain.head.next.next.next = chain.head console.log(circular(chain)) \/\/ true <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441 \u043c\u0435\u043d\u044c\u0448\u0438\u043c (\u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c) \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0445\u0443\u043a\u043e\u0432, updateWorkInProgressHook() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0445\u0443\u043a, \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435, \u0442.\u0435. \u0432 \u043d\u043e\u0432\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u0443\u0437\u043b\u0430 (\u0438\u043b\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b). \u0418 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u044d\u0442\u043e \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043d\u043e \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0430 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0430? \u041d\u0435\u0443\u0436\u0435\u043b\u0438 React \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0445\u0443\u043a\u043e\u0432 \u043d\u0430 \u043b\u0435\u0442\u0443? \u0418 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0432\u044b\u044f\u0441\u043d\u0438\u043c.<\/p>\n<p>  \u0414\u0430, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0443\u0448\u043b\u0438 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432, \u043f\u043e\u0438\u0449\u0435\u043c \u043b\u0438\u043d\u0442\u0435\u0440, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432. <a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/eslint-plugin-react-hooks\/src\/RulesOfHooks.js\" rel=\"nofollow noopener noreferrer\">RulesOfHooks.js<\/a>:<\/p>\n<pre><code class=\"javascript\">if (isDirectlyInsideComponentOrHook) {   if (!cycled &amp;&amp; pathsFromStartToEnd !== allPathsFromStartToEnd) {     const message =       `React Hook &quot;${context.getSource(hook)}&quot; is called ` +       'conditionally. React Hooks must be called in the exact ' +       'same order in every component render.' +       (possiblyHasEarlyReturn         ? ' Did you accidentally call a React Hook after an' + ' early return?'         : '')     context.report({ node: hook, message })   } } <\/code><\/pre>\n<p>  \u041d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0445\u0443\u043a\u043e\u0432. \u0410 \u0432\u043e\u0442 \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0445\u0443\u043a:<\/p>\n<pre><code class=\"javascript\">function isHookName(s) {   return \/^use[A-Z0-9].*$\/.test(s) }  function isHook(node) {   if (node.type === 'Identifier') {     return isHookName(node.name)   } else if (     node.type === 'MemberExpression' &amp;&amp;     !node.computed &amp;&amp;     isHook(node.property)   ) {     const obj = node.object     const isPascalCaseNameSpace = \/^[A-Z].*\/     return obj.type === 'Identifier' &amp;&amp; isPascalCaseNameSpace.test(obj.name)   } else {     return false   } } <\/code><\/pre>\n<p>  \u041d\u0430\u0431\u0440\u043e\u0441\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0441\u0442\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u0438 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<pre><code class=\"javascript\">import { useEffect, useState } from 'react'  \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a function useText() {   const [text, setText] = useState('')    useEffect(() =&gt; {     const id = setTimeout(() =&gt; {       setText('Hello')       const _id = setTimeout(() =&gt; {         setText((text) =&gt; text + ' World')         clearTimeout(_id)       }, 1000)     }, 1000)     return () =&gt; {       clearTimeout(id)     }   }, [])    return text }  \/\/ \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a function useCount() {   const [count, setCount] = useState(0)    useEffect(() =&gt; {     const id = setInterval(() =&gt; {       setCount((count) =&gt; count + 1)     }, 1000)     return () =&gt; {       clearInterval(id)     }   }, [])    return count }  \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f const Content = ({ active }) =&gt; &lt;p&gt;{active ? useText() : useCount()}&lt;\/p&gt;  function ConditionalHook() {   const [active, setActive] = useState(false)    return (     &lt;&gt;       &lt;button onClick={() =&gt; setActive(!active)}&gt;\u0414\u0440\u0443\u0433\u043e\u0439 \u0445\u0443\u043a&lt;\/button&gt;       &lt;Content active={active} \/&gt;     &lt;\/&gt;   ) }  export default ConditionalHook <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u0430 \u2014 useText() \u0438 useCount(). \u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0445\u0443\u043a \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u00abactive\u00bb. \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043c. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u00abReact Hook &#8216;useText&#8217; is called conditionally. React Hooks must be called in the exact same order in every component render\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0434\u0435\u043b\u043e \u043d\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0432 React, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432 ESLint. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0435\u0433\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \/* eslint-disable *\/ \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00abContent\u00bb \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f, \u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0445\u0443\u043a\u0430\u043c\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0417\u043d\u0430\u0447\u0438\u0442, \u0434\u0435\u043b\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432 React. \u0427\u0442\u043e \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438? \u041f\u0440\u043e\u0431\u0443\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">function getText() {   \/\/ ... }  function getCount() {   \/\/ ... }  const Content = ({ active }) =&gt; &lt;p&gt;{active ? getText() : getCount()}&lt;\/p&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441 getCount(), \u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f. \u041a \u0441\u043b\u043e\u0432\u0443, \u0431\u0435\u0437 \/* eslint-disable *\/ \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u00abReact Hook \u201euseState\u201c is called in function \u201egetText\u201c that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0445\u0443\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0445\u0443\u043a\u043e\u043c. \u0412 \u044d\u0442\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430.<\/p>\n<p>  \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438?<\/p>\n<pre><code class=\"javascript\">function Text() {   \/\/ ... }  function Count() {   \/\/ ... }  const Content = ({ active }) =&gt; &lt;p&gt;{active ? &lt;Text \/&gt; : &lt;Count \/&gt;}&lt;\/p&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \u043f\u0440\u0438\u0447\u0435\u043c, \u0434\u0430\u0436\u0435 \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u043c. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\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 React \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c. \u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u0445\u0443\u043a\u043e\u0432?<\/p>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0434\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u00abkey\u00bb, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 React \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430. \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435?<\/p>\n<pre><code class=\"javascript\">function useText() {   \/\/ ... }  function useCount() {   \/\/ ... }  const Content = ({ active }) =&gt; &lt;p&gt;{active ? useText() : useCount()}&lt;\/p&gt;  function ConditionalHook() {   const [active, setActive] = useState(false)    return (     &lt;&gt;       &lt;button onClick={() =&gt; setActive(!active)}&gt;\u0414\u0440\u0443\u0433\u043e\u0439 \u0445\u0443\u043a&lt;\/button&gt;       {\/* \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c key *\/}       &lt;Content key={active} active={active} \/&gt;     &lt;\/&gt;   ) } <\/code><\/pre>\n<p>  \u0421 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443. \u0411\u0435\u0437 \u043b\u0438\u043d\u0442\u0435\u0440\u0430\u2026 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, React \u0441\u0447\u0438\u0442\u0430\u0435\u0442 Content \u0441 useText() \u0438 Content \u0441 useCount() \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f active. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c. \u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import { useEffect, useState } from 'react'  const getNum = (min = 100, max = 1000) =&gt;   ~~(min + Math.random() * (max + 1 - min))  \/\/ \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a function useNum() {   const [num, setNum] = useState(getNum())    useEffect(() =&gt; {     const id = setInterval(() =&gt; setNum(getNum()), 1000)     return () =&gt; clearInterval(id)   }, [])    return num }  \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0435\u0440\u0442\u043a\u0430 function NumWrapper({ setNum }) {   const num = useNum()    useEffect(() =&gt; {     setNum(num)   }, [setNum, num])    return null }  function ConditionalHook2() {   const [active, setActive] = useState(false)   const [num, setNum] = useState(0)    return (     &lt;&gt;       &lt;h3&gt;\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432? &lt;br \/&gt; \u041d\u0435\u0442, \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438&lt;\/h3&gt;       &lt;button onClick={() =&gt; setActive(!active)}&gt;\u042d\u0442\u043e \u043d\u0435 \u043a\u043d\u043e\u043f\u043a\u0430&lt;\/button&gt;       &lt;p&gt;{active &amp;&amp; num}&lt;\/p&gt;       {active &amp;&amp; &lt;NumWrapper setNum={setNum} \/&gt;}     &lt;\/&gt;   ) }  export default ConditionalHook2 <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0445\u0443\u043a \u00abuseNum\u00bb, \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 100 \u0434\u043e 1000. \u041c\u044b \u0437\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00abNumWrapper\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 (\u0442\u043e\u0447\u043d\u0435\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 null), \u043d\u043e\u2026 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f setNum \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434\u044a\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438, \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>  \u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/React-Projects\/tree\/main\/conditional-hooks\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\"><iframe allowfullscreen id=\"607d17bcd990706d645cc0b9\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/607d17bcd990706d645cc0b9\"><\/iframe><\/div>\n<p>  \u041f\u043e\u0434\u0432\u0435\u0434\u0435\u043c \u0438\u0442\u043e\u0433\u0438. \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u0430\u043c\u0438 React \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0432\u044f\u0437\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u041a\u0430\u0436\u0434\u044b\u0439 (\u0442\u0435\u043a\u0443\u0449\u0438\u0439) \u0445\u0443\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a \u0438\u043b\u0438 null (\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u00abnext\u00bb). \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e, \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442: \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c\u0438.<\/p>\n<p>  \u0415\u0449\u0435 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 React: \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 (\u0434\u0430\u0436\u0435 \u0442\u0435\u0440\u043d\u0430\u0440\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e); \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0445\u043e\u0442\u044f \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 \u00abbase\u00bb, \u00abcurrent\u00bb \u0438 \u0442.\u0434., \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0435, \u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b, \u0442\u0430\u043a\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0439; \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f TODO.<\/p>\n<p>  \u041d\u0430 \u043f\u0440\u0430\u0432\u0430\u0445 \u0441\u0430\u043c\u043e\u0440\u0435\u043a\u043b\u0430\u043c\u044b: \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0448\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (React, Express, Mongoose, GraphQL \u0438 \u0442.\u0434.), \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/harryheman\/React-Total\" rel=\"nofollow noopener noreferrer\">\u044d\u0442\u043e\u0442 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>.<\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\u0441\u044f. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/553104\/\"> https:\/\/habr.com\/ru\/post\/553104\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/98\/k9\/is\/98k9issmcul9hqqfqbjuflx57uo.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 React, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 if, \u0446\u0438\u043a\u043b\u0430\u0445, \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0438 \u0442.\u0434. \u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u0438\u0445 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c?<\/p>\n<p>  \u0412\u043e\u043f\u0440\u043e\u0441 \u0437\u0432\u0443\u0447\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043f\u043e\u0447\u0435\u043c\u0443 \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435? \u0412\u043e\u0442 \u0447\u0442\u043e \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 <a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0430\u0432\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432<\/a>.  <\/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-321687","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321687","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=321687"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321687\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=321687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=321687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}