{"id":2082,"date":"2021-06-21T11:46:03","date_gmt":"2021-06-21T11:46:03","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2082"},"modified":"2021-06-21T11:46:03","modified_gmt":"2021-06-21T11:46:03","slug":"%d0%b7%d0%b0%d0%bc%d0%b5%d1%82%d0%ba%d0%b0-%d0%be-%d1%82%d0%be%d0%bc-%d0%ba%d0%b0%d0%ba-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%8e%d1%82-%d1%85%d1%83%d0%ba%d0%b8-%d0%b2-react","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2082","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<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\n\n\n<!--more-->\n\n\n\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\n\n\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html\">\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\n\n\n<p><a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html#only-call-hooks-at-the-top-level\">\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>&nbsp;(\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\n\n\n<blockquote class=\"wp-block-quote\"><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&nbsp;<strong>\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<\/strong>. \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\n\n\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\n\n\n<p><a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-rules.html#explanation\">\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435<\/a>&nbsp;(\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\n\n\n<blockquote class=\"wp-block-quote\"><p>&#8220;\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&nbsp;<strong>\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432<\/strong>.\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&nbsp;<strong>\u043d\u0435\u043a\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/strong>&nbsp;\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&nbsp;<strong>\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<\/strong>. React \u043e\u0436\u0438\u0434\u0430\u043b, \u0447\u0442\u043e&nbsp;<strong>\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<\/strong>, \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&nbsp;<strong>\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<\/strong>.\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;&#8221;<\/p><\/blockquote>\n\n\n\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\n\n\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&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-faq.html\">\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\n\n\n<p><a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-faq.html\">\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\n\n\n<blockquote class=\"wp-block-quote\"><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&nbsp;<strong>\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<\/strong>. \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&nbsp;<strong>\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/strong>. \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&nbsp;<strong>\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<\/strong>. \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\n\n\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&nbsp;<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\">\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\n\n\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\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/n0\/xu\/zx\/n0xuzxwavbnaqhsp7iuqmffvvbi.png\" alt=\"\"\/><\/figure>\n\n\n\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&nbsp;<a href=\"https:\/\/github.com\/facebook\/react\/tree\/master\/packages\/react\/src\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 React<\/a>.<\/p>\n\n\n\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\n\n\n<ul><li><a href=\"https:\/\/stackoverflow.com\/questions\/53974865\/how-do-react-hooks-determine-the-component-that-they-are-for\">\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>&nbsp;\u043d\u0430 Stack Overflow<\/li><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>&nbsp;\u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/li><li><a href=\"https:\/\/github.com\/reactjs\/rfcs\/issues\/82\">\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>&nbsp;\u043d\u0430 GitHub<\/li><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&nbsp;<a href=\"https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/react\/index.d.ts\">\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&nbsp;<a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/md\/react-types.md\">\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><\/ul>\n\n\n\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\n\n\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&nbsp;<a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react\/src\/ReactHooks.js\">ReactHooks.js<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export function useState&lt;S&gt;(\n  initialState: (() =&gt; S) | S\n): &#91;S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {\n  const dispatcher = resolveDispatcher()\n  return dispatcher.useState(initialState)\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import ReactCurrentDispatcher from '.\/ReactCurrentDispatcher'\n\nfunction resolveDispatcher() {\n  const dispatcher = ReactCurrentDispatcher.current\n\n  return ((dispatcher: any): Dispatcher)\n}\n<\/code><\/pre>\n\n\n\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&nbsp;<a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react\/src\/ReactCurrentDispatcher.js\">ReactCurrentDispatcher.js<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import type { Dispatcher } from 'react-reconciler\/src\/ReactInternalTypes'\n\nconst ReactCurrentDispatcher = {\n  current: (null: null | Dispatcher)\n}\n\nexport default ReactCurrentDispatcher\n<\/code><\/pre>\n\n\n\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&nbsp;<a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js#L118\">ReactFiberHooks.new.js<\/a>&nbsp;(\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\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ 118<\/em>\nconst { ReactCurrentDispatcher, ReactCurrentBatchConfig } = ReactSharedInternals\n<\/code><\/pre>\n\n\n\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0432&nbsp;<a href=\"https:\/\/%20https\/\/github.com\/facebook\/react\/blob\/master\/packages\/shared\/ReactSharedInternals.js\">ReactSharedInternals.js<\/a>&nbsp;\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\n\n\n<pre class=\"wp-block-code\"><code>const ReactSharedInternals =\n  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n\nexport default ReactSharedInternals\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ 405<\/em>\nReactCurrentDispatcher.current =\n  current === null || current.memoizedState === null\n    ? HooksDispatcherOnMount\n    : HooksDispatcherOnUpdate\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ 2086<\/em>\nconst HooksDispatcherOnMount: Dispatcher = {\n  useState: mountState,\n  <em>\/\/ \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438 \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e<\/em>\n}\n\n<em>\/\/ 2111<\/em>\nconst HooksDispatcherOnUpdate: Dispatcher = {\n  useState: updateState,\n  <em>\/\/ \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438 \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e<\/em>\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function mountState&lt;S&gt;(\n  initialState: (() =&gt; S) | S\n): &#91;S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {\n  <em>\/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0445\u0443\u043a\u0430<\/em>\n  const hook = mountWorkInProgressHook()\n  <em>\/\/ \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<\/em>\n  if (typeof initialState === 'function') {\n    initialState = initialState()\n  }\n  <em>\/\/ \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<\/em>\n  <em>\/\/ \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<\/em>\n  hook.memoizedState = hook.baseState = initialState\n  <em>\/\/ \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<\/em>\n  <em>\/\/ \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<\/em>\n  const queue = (hook.queue = {\n    pending: null,\n    interleaved: null,\n    lanes: NoLanes,\n    dispatch: null,\n    lastRenderedReducer: basicStateReducer,\n    lastRenderedState: (initialState: any)\n  })\n  <em>\/\/ \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)<\/em>\n  const dispatch: Dispatch&lt;\n    BasicStateAction&lt;S&gt;\n  &gt; = (queue.dispatch = (dispatchAction.bind(\n    null,\n    currentlyRenderingFiber,\n    queue\n  ): any))\n  <em>\/\/ \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<\/em>\n  return &#91;hook.memoizedState, dispatch]\n}\n\n<em>\/\/ 1266<\/em>\nfunction updateState&lt;S&gt;(\n  initialState: (() =&gt; S) | S\n): &#91;S, Dispatch&lt;BasicStateAction&lt;S&gt;&gt;] {\n  return updateReducer(basicStateReducer, (initialState: any))\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function updateReducer&lt;S, I, A&gt;(\n  reducer: (S, A) =&gt; S,\n  initialArg: I,\n  init?: (I) =&gt; S\n): &#91;S, Dispatch&lt;A&gt;] {\n  <em>\/\/ \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 (!)<\/em>\n  const hook = updateWorkInProgressHook()\n  <em>\/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0447\u0435\u0440\u0435\u0434\u044c<\/em>\n  const queue = hook.queue\n  <em>\/\/ \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<\/em>\n  queue.lastRenderedReducer = reducer\n\n  const current: Hook = (currentHook: any)\n\n  <em>\/\/ \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<\/em>\n  let baseQueue = current.baseQueue\n\n  <em>\/\/ \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<\/em>\n  if (baseQueue !== null) {\n    const first = baseQueue.next\n    let newState = current.baseState\n\n    let newBaseState = null\n    let newBaseQueueFirst = null\n    let newBaseQueueLast = null\n    let update = first\n    do {\n      <em>\/\/ \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<\/em>\n    } while (update !== null &amp;&amp; update !== first)\n\n    <em>\/\/ \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<\/em>\n    hook.memoizedState = newState\n    hook.baseState = newBaseState\n    hook.baseQueue = newBaseQueueLast\n\n    <em>\/\/ \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<\/em>\n    queue.lastRenderedState = newState\n  }\n\n  <em>\/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430<\/em>\n  const dispatch: Dispatch&lt;A&gt; = (queue.dispatch: any)\n  <em>\/\/ \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<\/em>\n  return &#91;hook.memoizedState, dispatch]\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ 592<\/em>\nfunction mountWorkInProgressHook(): Hook {\n  <em>\/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0443\u043a<\/em>\n  const hook: Hook = {\n    memoizedState: null,\n    baseState: null,\n    baseQueue: null,\n    queue: null,\n\n    <em>\/\/ \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a (?!)<\/em>\n    next: null\n  }\n\n  <em>\/\/ \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<\/em>\n  if (workInProgressHook === null) {\n    currentlyRenderingFiber.memoizedState = workInProgressHook = hook\n  } else {\n    <em>\/\/ \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<\/em>\n    workInProgressHook = workInProgressHook.next = hook\n  }\n  return workInProgressHook\n}\n\n<em>\/\/ 613<\/em>\nfunction updateWorkInProgressHook(): Hook {\n  <em>\/\/ \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<\/em>\n  <em>\/\/ \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,<\/em>\n  <em>\/\/ \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<\/em>\n  <em>\/\/ \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<\/em>\n  let nextCurrentHook: null | Hook\n  if (currentHook === null) {\n    const current = currentlyRenderingFiber.alternate\n    if (current !== null) {\n      nextCurrentHook = current.memoizedState\n    } else {\n      nextCurrentHook = null\n    }\n  } else {\n    nextCurrentHook = currentHook.next\n  }\n\n  let nextWorkInProgressHook: null | Hook\n  if (workInProgressHook === null) {\n    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState\n  } else {\n    nextWorkInProgressHook = workInProgressHook.next\n  }\n\n  if (nextWorkInProgressHook !== null) {\n    <em>\/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 workInProgressHook<\/em>\n    workInProgressHook = nextWorkInProgressHook\n    nextWorkInProgressHook = workInProgressHook.next\n\n    currentHook = nextCurrentHook\n  } else {\n    <em>\/\/ \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0445\u0443\u043a<\/em>\n\n    <em>\/\/ \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<\/em>\n    <em>\/\/ \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<\/em>\n    <em>\/\/ \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?<\/em>\n    <em>\/\/ \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 \"\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\" \u0445\u0443\u043a\u043e\u0432?<\/em>\n    invariant(\n      nextCurrentHook !== null,\n      'Rendered more hooks than during the previous render.'\n    )\n    currentHook = nextCurrentHook\n\n    const newHook: Hook = {\n      memoizedState: currentHook.memoizedState,\n\n      baseState: currentHook.baseState,\n      baseQueue: currentHook.baseQueue,\n      queue: currentHook.queue,\n\n      next: null\n    }\n\n    <em>\/\/ \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<\/em>\n    if (workInProgressHook === null) {\n      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook\n    } else {\n      <em>\/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u0443\u043a \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u043f\u0438\u0441\u043a\u0430<\/em>\n      workInProgressHook = workInProgressHook.next = newHook\n    }\n  }\n  return workInProgressHook\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/xp\/iy\/q9\/xpiyq99zo2qm2hutppit0ntnxta.jpeg\" alt=\"\"\/><\/figure>\n\n\n\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\n\n\n<p><strong>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/strong><br>\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\n\n\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.&nbsp;<a href=\"https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/eslint-plugin-react-hooks\/src\/RulesOfHooks.js\">RulesOfHooks.js<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (isDirectlyInsideComponentOrHook) {\n  if (!cycled &amp;&amp; pathsFromStartToEnd !== allPathsFromStartToEnd) {\n    const message =\n      `React Hook \"${context.getSource(hook)}\" is called ` +\n      'conditionally. React Hooks must be called in the exact ' +\n      'same order in every component render.' +\n      (possiblyHasEarlyReturn\n        ? ' Did you accidentally call a React Hook after an' + ' early return?'\n        : '')\n    context.report({ node: hook, message })\n  }\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function isHookName(s) {\n  return \/^use&#91;A-Z0-9].*$\/.test(s)\n}\n\nfunction isHook(node) {\n  if (node.type === 'Identifier') {\n    return isHookName(node.name)\n  } else if (\n    node.type === 'MemberExpression' &amp;&amp;\n    !node.computed &amp;&amp;\n    isHook(node.property)\n  ) {\n    const obj = node.object\n    const isPascalCaseNameSpace = \/^&#91;A-Z].*\/\n    return obj.type === 'Identifier' &amp;&amp; isPascalCaseNameSpace.test(obj.name)\n  } else {\n    return false\n  }\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useEffect, useState } from 'react'\n\n<em>\/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a<\/em>\nfunction useText() {\n  const &#91;text, setText] = useState('')\n\n  useEffect(() =&gt; {\n    const id = setTimeout(() =&gt; {\n      setText('Hello')\n      const _id = setTimeout(() =&gt; {\n        setText((text) =&gt; text + ' World')\n        clearTimeout(_id)\n      }, 1000)\n    }, 1000)\n    return () =&gt; {\n      clearTimeout(id)\n    }\n  }, &#91;])\n\n  return text\n}\n\n<em>\/\/ \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a<\/em>\nfunction useCount() {\n  const &#91;count, setCount] = useState(0)\n\n  useEffect(() =&gt; {\n    const id = setInterval(() =&gt; {\n      setCount((count) =&gt; count + 1)\n    }, 1000)\n    return () =&gt; {\n      clearInterval(id)\n    }\n  }, &#91;])\n\n  return count\n}\n\n<em>\/\/ \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<\/em>\nconst Content = ({ active }) =&gt; &lt;p&gt;{active ? useText() : useCount()}&lt;\/p&gt;\n\nfunction ConditionalHook() {\n  const &#91;active, setActive] = useState(false)\n\n  return (\n    &lt;&gt;\n      &lt;button onClick={() =&gt; setActive(!active)}&gt;\u0414\u0440\u0443\u0433\u043e\u0439 \u0445\u0443\u043a&lt;\/button&gt;\n      &lt;Content active={active} \/&gt;\n    &lt;\/&gt;\n  )\n}\n\nexport default ConditionalHook\n<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function getText() {\n  <em>\/\/ ...<\/em>\n}\n\nfunction getCount() {\n  <em>\/\/ ...<\/em>\n}\n\nconst Content = ({ active }) =&gt; &lt;p&gt;{active ? getText() : getCount()}&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function Text() {\n  <em>\/\/ ...<\/em>\n}\n\nfunction Count() {\n  <em>\/\/ ...<\/em>\n}\n\nconst Content = ({ active }) =&gt; &lt;p&gt;{active ? &lt;Text \/&gt; : &lt;Count \/&gt;}&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>function useText() {\n  <em>\/\/ ...<\/em>\n}\n\nfunction useCount() {\n  <em>\/\/ ...<\/em>\n}\n\nconst Content = ({ active }) =&gt; &lt;p&gt;{active ? useText() : useCount()}&lt;\/p&gt;\n\nfunction ConditionalHook() {\n  const &#91;active, setActive] = useState(false)\n\n  return (\n    &lt;&gt;\n      &lt;button onClick={() =&gt; setActive(!active)}&gt;\u0414\u0440\u0443\u0433\u043e\u0439 \u0445\u0443\u043a&lt;\/button&gt;\n      {\/* \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c key *\/}\n      &lt;Content key={active} active={active} \/&gt;\n    &lt;\/&gt;\n  )\n}\n<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useEffect, useState } from 'react'\n\nconst getNum = (min = 100, max = 1000) =&gt;\n  ~~(min + Math.random() * (max + 1 - min))\n\n<em>\/\/ \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a<\/em>\nfunction useNum() {\n  const &#91;num, setNum] = useState(getNum())\n\n  useEffect(() =&gt; {\n    const id = setInterval(() =&gt; setNum(getNum()), 1000)\n    return () =&gt; clearInterval(id)\n  }, &#91;])\n\n  return num\n}\n\n<em>\/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0435\u0440\u0442\u043a\u0430<\/em>\nfunction NumWrapper({ setNum }) {\n  const num = useNum()\n\n  useEffect(() =&gt; {\n    setNum(num)\n  }, &#91;setNum, num])\n\n  return null\n}\n\nfunction ConditionalHook2() {\n  const &#91;active, setActive] = useState(false)\n  const &#91;num, setNum] = useState(0)\n\n  return (\n    &lt;&gt;\n      &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;\n      &lt;button onClick={() =&gt; setActive(!active)}&gt;\u042d\u0442\u043e \u043d\u0435 \u043a\u043d\u043e\u043f\u043a\u0430&lt;\/button&gt;\n      &lt;p&gt;{active &amp;&amp; num}&lt;\/p&gt;\n      {active &amp;&amp; &lt;NumWrapper setNum={setNum} \/&gt;}\n    &lt;\/&gt;\n  )\n}\n\nexport default ConditionalHook2\n<\/code><\/pre>\n\n\n\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\n\n\n<p>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f&nbsp;<a href=\"https:\/\/github.com\/harryheman\/React-Projects\/tree\/main\/conditional-hooks\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n\n\n\n<p>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n\n\n\n<p>https:\/\/embedd.srv.habr.com\/iframe\/607d17bcd990706d645cc0b9<br>\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\n\n\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\n\n\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\n\n\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&nbsp;<a href=\"https:\/\/github.com\/harryheman\/React-Total\">\u044d\u0442\u043e\u0442 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<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","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[140],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2082"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2082"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2082\/revisions"}],"predecessor-version":[{"id":2083,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2082\/revisions\/2083"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}