{"id":470930,"date":"2025-08-15T21:00:11","date_gmt":"2025-08-15T21:00:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=470930"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=470930","title":{"rendered":"<span>20 \u0447\u0430\u0441\u0442\u044b\u0445 \u0430\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u0432 React \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c: \u043a\u0440\u0430\u0442\u043a\u043e, \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0431\u0435\u0437 \u043c\u0438\u0444\u043e\u0432<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>React \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c UI \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0434\u0435\u0442\u0435\u0440\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 props \u0438 state, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0434\u0430\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0438 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0435\u0445\u0438: \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u044e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u0434 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0440\u0435\u043c\u043e\u0443\u043d\u0442\u043e\u043c \u043f\u043e key \u0438 \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u041f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u2014 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b, \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0435\u0444\u0435\u043a\u0442\u044b, \u043f\u043b\u043e\u0445\u043e \u043f\u043e\u0434\u0434\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0435.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0438\u043f\u043e\u0432\u044b\u0435 \u0430\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0443\u043a\u0430\u043c\u0438, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u0441 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445: \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0441\u0442\u0438\u043d\u044b, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0445\u0443\u043a\u043e\u0432, \u0447\u0435\u0442\u043a\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043a\u0430\u043a \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.<\/p>\n<hr\/>\n<h2>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\" rel=\"noopener noreferrer nofollow\">useState \u0438 useEffect \u0434\u043b\u044f\u00a0\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u043e useState \u0434\u043b\u044f\u00a0\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 CSS \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS\u2011in\u2011JS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5-usecallback-dlya-stabilnyh-zavisimostej\" rel=\"noopener noreferrer nofollow\">useCallback \u0434\u043b\u044f\u00a0\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6-ispolzovanie-usecallback-dlya-predotvrasheniya-lishnih-srabatyvanij-useeffect\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 useCallback \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u00a0\u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0439 useEffect<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#7-dobavlyajte-pustoj-massiv-zavisimostej-k-useeffect,-esli-zavisimostej-net\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u00a0useEffect, \u0435\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0435\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#8-vsegda-ukazyvajte-vse-zavisimosti-v-useeffect-i-drugih-react-hukah\" rel=\"noopener noreferrer nofollow\">\u0412\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u00a0useEffect \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 React\u2011\u0445\u0443\u043a\u0430\u0445<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#9-ne-ispolzujte-useeffect-dlya-inicializacii-vneshnego-koda\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useEffect \u0434\u043b\u044f\u00a0\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#10-ne-oborachivajte-vneshnie-funkcii-v-usecallback-bez-neobhodimosti\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u00a0useCallback \u0431\u0435\u0437\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#11-ne-ispolzujte-usememo-s-pustym-spiskom-zavisimostej\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useMemo \u0441\u00a0\u043f\u0443\u0441\u0442\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#12-ne-obuyavlyajte-komponenty-vnutri-drugih-komponentov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#13-ne-ispolzujte-huki-vnutri-uslovnyh-operatorov-nikakih-uslovnyh-hukov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 (\u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#14-ne-ispolzujte-huki-posle-return-ili-vnutri-uslovnyh-operatorov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 return (\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#15-ne-zastavlyajte-roditelskij-komponent-reshat,-dolzhen-li-dochernij-renderitsya\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0448\u0430\u0442\u044c, \u0434\u043e\u043b\u0436\u0435\u043d\u00a0\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#16-ispolzujte-usereducer-vmesto-mnozhestva-usestate\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useReducer \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 useState<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#17-pishite-nachalnoe-sostoyanie-v-vide-funkcii,-a-ne-obuekta\" rel=\"noopener noreferrer nofollow\">\u041f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u00a0\u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430\u00a0\u043d\u0435\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#18-ispolzujte-useref-vmesto-usestate,-esli-ne-nuzhen-povtornyj-rendering-komponenta\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useRef \u0432\u043c\u0435\u0441\u0442\u043e useState, \u0435\u0441\u043b\u0438 \u043d\u0435\u00a0\u043d\u0443\u0436\u0435\u043d \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#19-ispolzovanie-props-ili-context-v-kachestve-nachalnogo-sostoyaniya\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 props \u0438\u043b\u0438\u00a0context \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#20-udalenie-i-vosstanovlenie-remount-on-prop-change\" rel=\"noopener noreferrer nofollow\">\u00ab\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u00bb (Remount on Prop Change)<\/a><\/p>\n<\/li>\n<\/ol>\n<hr\/>\n<p><a class=\"anchor\" name=\"1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\" id=\"1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\"><\/a><\/p>\n<h2>1. useState \u0438 useEffect \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 <code><strong>useState<\/strong><\/code> \u0438 <code><strong>useEffect<\/strong><\/code> \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0445, <em>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435.<br \/> \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0440\u0443\u0434\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u0445 \u0431\u0430\u0433\u043e\u0432.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import React, { useState, useEffect } from 'react';  interface Props {   firstName: string;   lastName: string; }  function MyComponent(props: Props) {   const { firstName, lastName } = props;   const [fullName, setFullName] = useState('');    useEffect(() =&gt; {     setFullName(`${firstName} ${lastName}`);   }, [firstName, lastName]);    return (     &lt;span&gt;{fullName}&lt;\/span&gt;   ); }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><code><strong>useEffect<\/strong><\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <em>\u043f\u043e\u0441\u043b\u0435<\/em> \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0438\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c <em>\u0434\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u0435\u043d \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/strong>: \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>useEffect<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0439 render<\/strong>: <code>useEffect<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>setState<\/code> \u2192 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u044f\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/strong>: \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/strong>: \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0440\u0438\u0441\u043a \u0431\u0430\u0433\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import React from 'react';  interface Props {   firstName: string;   lastName: string; }  function MyComponent(props: Props) {   const { firstName, lastName } = props;   const fullName = `${firstName} ${lastName}`;    return (     &lt;span&gt;{fullName}&lt;\/span&gt;   ); }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430<\/strong>: \u043d\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong>: \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0434\u0438\u043d render<\/strong>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 UX<\/strong>: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0431\u0435\u0437 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u043c\u0438\u0433\u0430\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\" id=\"2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\"><\/a><\/p>\n<h2>2. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u043e useState \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 <code><strong>useState<\/strong><\/code> \u0438\u043b\u0438 <code><strong>useReducer<\/strong><\/code>.<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u2014 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 React.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import AnotherComponent from 'components\/AnotherComponent';  function Component() {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   const value = { someKey: 'someValue' };    return &lt;AnotherComponent value={value} \/&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u041d\u0430 <em>\u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em> \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <code><strong>value<\/strong><\/code> \u0441\u043e <em>\u0441\u0432\u0435\u0436\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041b\u044e\u0431\u044b\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 (<code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code>, <code><strong>useCallback<\/strong><\/code>) \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u2014 React \u0432\u0438\u0434\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b (<code><strong>useEffect<\/strong><\/code>), \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c <em>\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0435 \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: React \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 render\u2019\u044b<\/strong>: \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code><strong>memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code> \u0438 \u043f\u0440\u043e\u0447\u0435\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u0438\u043b\u0438\u0435 \u0431\u0430\u0433\u043e\u0432<\/strong>: \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, &#171;\u0434\u0440\u043e\u0436\u0430\u0449\u0438\u0435&#187; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react'; import AnotherComponent from 'components\/AnotherComponent';  function Component() {   \/\/ \u0414\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   const [value, setValue] = useState({ someKey: 'someValue' });    return &lt;AnotherComponent value={value} \/&gt;; } <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430<\/strong>: \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d <code><strong>setValue<\/strong><\/code>, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <code><strong>value<\/strong><\/code> \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: React \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/strong>: <code><strong>useEffect<\/strong><\/code> \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430), \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u0435\u0433\u043e <em>\u0441\u043d\u0430\u0440\u0443\u0436\u0438<\/em> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0442\u043e\u0433\u0434\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438.<\/p>\n<pre><code class=\"javascript\">\/\/ \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0435\u0441\u043b\u0438 value \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f const value = { someKey: 'someValue' };  function Component() {   return &lt;AnotherComponent value={value} \/&gt;; } <\/code><\/pre>\n<hr\/>\n<p><a class=\"anchor\" name=\"3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\" id=\"3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\"><\/a><\/p>\n<h2>3. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 CSS \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-in-JS<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-in-JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0438\u043b\u044f \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f <em>\u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em>, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 JS, \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import makeCss from 'some\/css\/in\/js\/library';  function Component() {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   return &lt;div className={makeCss({ background: 'red', width: '100%' })} \/&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442<\/strong>: \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0432\u0435\u0436\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: CSS-\u043a\u043b\u0430\u0441\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0451\u0442\u0430\u043c \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f \u0440\u0438\u0441\u043a \u0431\u0430\u0433\u043e\u0432<\/strong>: \u043c\u043e\u0433\u0443\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (<code><strong>useEffect<\/strong><\/code>, <code><strong>React.memo<\/strong><\/code> \u0438 \u0434\u0440.).<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/strong>: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0437\u0430\u043d\u043e\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 CSS-\u043a\u043b\u0430\u0441\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0447\u0442\u043e \u0437\u0430\u0431\u0438\u0432\u0430\u0435\u0442 \u043f\u0430\u043c\u044f\u0442\u044c \u0438 \u043c\u0435\u0448\u0430\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 JS<\/strong>: \u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 CPU \u0432\u0440\u0435\u043c\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043b\u043e\u0445\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f\u043c\u0438 React<\/strong>: \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u044f\u0442\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import makeCss from 'some\/css\/in\/js\/library';  \/\/ \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u041e\u0414\u0418\u041d \u0420\u0410\u0417 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430! const someCssClass = makeCss({   background: 'red',   width: '100%' });  function Component() {   return &lt;div className={someCssClass} \/&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442<\/strong>: CSS-\u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043c\u043e\u0434\u0443\u043b\u044f, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0443\u0447\u0448\u0435\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>: \u0441\u0442\u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0441\u044f \u043f\u0430\u043c\u044f\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong>: \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439\/\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/strong>: \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438\/\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\" id=\"4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\"><\/a><\/p>\n<h2>4. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f <em>\u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em>. \u042d\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0445\u0443\u043a\u043e\u0432, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0445 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react';  function Component() {   const [value, setValue] = useState(false);    \/\/ \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435!   const handleClick = () =&gt; {     setValue(true);   };    return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439<\/strong>: \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 <code><strong>React.memo<\/strong><\/code> \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0445\u0443\u043a\u0438 (<code><strong>useMemo<\/strong><\/code>, <code><strong>useEffect<\/strong><\/code>, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 deps) \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <em>\u043d\u043e\u0432\u0430\u044f<\/em> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/strong>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u043c\u0435\u043c\u043e-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: \u0435\u0441\u043b\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0432\u044b\u0439, <code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code> \u0438 <code><strong>useEffect<\/strong><\/code> \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u044f\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/strong>: \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u0447\u0442\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0433\u0438<\/strong>: \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u2014 \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0443\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong>: \u0434\u043e\u0447\u0435\u0440\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 &#171;\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f&#187; \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u043e\u0432-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import { useState, useCallback } from 'react';  function Component() {   const [value, setValue] = useState(false);    \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e stable, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438   const handleClick = useCallback(() =&gt; {     setValue(true);   }, []); \/\/ \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432: \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430    return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/strong>: <code>handleClick<\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>: \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f <code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code> \u0438 <code><strong>useEffect<\/strong><\/code> \u043f\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c \u2014 \u043b\u0438\u0448\u043d\u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u043d\u0435\u0442;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/strong>: \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445\/\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u044c\u0448\u0435 \u0431\u0430\u0433\u043e\u0432<\/strong>: \u0441\u043d\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u0440\u0438\u0441\u043a \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u0437-\u0437\u0430 \u201c\u043d\u043e\u0432\u044b\u0445\u201d \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u043e\u0433\u0434\u0430 useCallback \u0441\u0442\u043e\u0438\u0442 \u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/h4>\n<h3>\u041a\u043e\u0433\u0434\u0430 useCallback \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u0435\u043d<\/h3>\n<ul>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 <strong>\u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/strong> (<code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code>, <code><strong>useEffect<\/strong><\/code>), \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f <strong>\u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/strong> \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0443\u0448\u0438\u0442\u044c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u0433\u0434\u0430 useCallback \u043d\u0435 \u043d\u0443\u0436\u0435\u043d<\/h3>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430\u0440\u0443\u0436\u0443 (\u201c\u0432\u043d\u0438\u0437\u201d \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443), \u0438 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432\/\u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code><strong>useCallback<\/strong><\/code> \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0436\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"5-usecallback-dlya-stabilnyh-zavisimostej\" id=\"5-usecallback-dlya-stabilnyh-zavisimostej\"><\/a><\/p>\n<h2>5. useCallback \u0434\u043b\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f <code><strong>useMemo<\/strong><\/code>, \u043c\u0435\u043c\u0443\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (<code><strong>React.memo<\/strong><\/code>) \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 \u2014 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code><strong>useCallback<\/strong><\/code>.<br \/> \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import React, { memo, useMemo } from 'react';  const MemoizedChildComponent = memo(({ onTriggerFn }) =&gt; {   \/\/ \u041a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u0434... });  function Component({ someProp }) {   \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435!   const onTrigger = () =&gt; {     \/\/ \u041a\u0430\u043a\u0430\u044f-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u0430...   };    \/\/ memoizedValue \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440,   \/\/ \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e onTrigger \u2014 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438!   const memoizedValue = useMemo(() =&gt; {     \/\/ \u041a\u0430\u043a\u0430\u044f-\u0442\u043e \u0434\u043e\u0440\u043e\u0433\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f...   }, [onTrigger]);    \/\/ MemoizedChildComponent \u0431\u0443\u0434\u0435\u0442 \u041e\u0422\u041a\u0410\u0422\u042b\u0412\u0410\u0422\u042c \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u2014 \u0438 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u2014   \/\/ \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e onTriggerFn \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.   return (     &lt;&gt;       &lt;MemoizedChildComponent onTriggerFn={onTrigger} \/&gt;       &lt;button onClick={onTrigger}&gt;Click me&lt;\/button&gt;     &lt;\/&gt;   ); }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u044b<\/strong>: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code><strong>useMemo<\/strong><\/code> \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 rerender-\u044b<\/strong>: \u0434\u0430\u0436\u0435 \u043c\u0435\u043c\u0443\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0441\u043c\u0435\u043d\u044b \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0438 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f &#171;\u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439&#187; \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u0438\u0435 \u0431\u0430\u0433\u0438: \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0447\u0430\u0449\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0432 <code><strong>React.memo<\/strong><\/code> \u0438 <code><strong>useMemo<\/strong><\/code>, \u0435\u0441\u043b\u0438 \u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import React, { memo, useCallback, useMemo } from 'react';  const MemoizedChildComponent = memo(({ onTriggerFn }) =&gt; {   \/\/ \u041a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u0434... });  function Component({ someProp }) {   \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u2014 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 someProp   const onTrigger = useCallback(() =&gt; {     \/\/ \u041a\u0430\u043a\u0430\u044f-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u0430...   }, [someProp]);    \/\/ \u0422\u0435\u043f\u0435\u0440\u044c useMemo \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 onTrigger \u2014 \u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438,   \/\/ \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f someProp.   const memoizedValue = useMemo(() =&gt; {     \/\/ \u041a\u0430\u043a\u0430\u044f-\u0442\u043e \u0434\u043e\u0440\u043e\u0433\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f...   }, [onTrigger]);    \/\/ \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u043f onTriggerFn \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438,   \/\/ \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432.   return (     &lt;&gt;       &lt;MemoizedChildComponent onTriggerFn={onTrigger} \/&gt;       &lt;button onClick={onTrigger}&gt;Click me&lt;\/button&gt;     &lt;\/&gt;   ); } <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/strong>: <code><strong>onTrigger<\/strong><\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 deps \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u044c\u0448\u0435 \u043b\u0438\u0448\u043d\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439<\/strong>: <code><strong>useMemo<\/strong><\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0438\u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043c\u0435\u043c\u0443\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f &#171;\u0437\u0440\u044f&#187;;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430<\/strong>: \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c, \u043c\u0435\u043d\u044c\u0448\u0435 &#171;\u043c\u0430\u0433\u0438\u0438&#187;.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"6-ispolzovanie-usecallback-dlya-predotvrasheniya-lishnih-srabatyvanij-useeffect\" id=\"6-ispolzovanie-usecallback-dlya-predotvrasheniya-lishnih-srabatyvanij-useeffect\"><\/a><\/p>\n<h2>6. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 useCallback \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0439 useEffect<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439) \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 <code>useEffect<\/code>. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e \u0441\u0443\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0449\u0435, \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u044b \u0438 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0430\u0433\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useEffect } from 'react';  const Component = ({ someProp }) =&gt; {   const onTrigger = () =&gt; {     \/\/ ...logic   };    useEffect(() =&gt; {     \/\/ ...effect logic   }, [onTrigger]); \/\/ &lt;- onTrigger \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435!    return &lt;button onClick={onTrigger}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><code>useEffect<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>onTrigger<\/code> \u2014 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0437\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u0438 \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u0421\u043d\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c: \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0449\u0435, \u0447\u0435\u043c \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438: \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0430\u0433\u0438: side-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useCallback<\/code> \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u0442\u0430\u043a \u0438\u0445 \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443, <code>useEffect<\/code> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">import { useCallback, useEffect } from 'react';  const Component = ({ someProp }) =&gt; {   const onTrigger = useCallback(() =&gt; {     \/\/ ...logic   }, [someProp]); \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 someProp    useEffect(() =&gt; {     \/\/ ...effect logic   }, [onTrigger]); \/\/ \u0442\u0435\u043f\u0435\u0440\u044c useEffect \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438    return &lt;button onClick={onTrigger}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><code>useEffect<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044c\u0448\u0435 \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u043b\u0435\u0433\u043a\u043e \u0447\u0438\u0442\u0430\u0442\u044c: dependencies <code>useEffect<\/code> \u0438 <code>useCallback<\/code> \u0432\u044b\u0440\u0430\u0436\u0430\u044e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044c\u0448\u0435 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0430\u0433\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"7-dobavlyajte-pustoj-massiv-zavisimostej-k-useeffect,-esli-zavisimostej-net\" id=\"7-dobavlyajte-pustoj-massiv-zavisimostej-k-useeffect,-esli-zavisimostej-net\"><\/a><\/p>\n<h2>7. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a useEffect, \u0435\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0435\u0442<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 <code>useEffect<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0438 \u043e\u0442 \u043a\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0447\u0442\u043e \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useEffect } from 'react';  const Component = () =&gt; {   useEffect(() =&gt; {     \/\/ \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430      \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   })    return &lt;div&gt;Example&lt;\/div&gt;; } <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><code>useEffect<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0430\u0434\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043e\u0441\u043e\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0433\u0438 \u0438\u043b\u0438 \u043d\u0435\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0438\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430).<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c: \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u0434 \u0432 <code>useEffect<\/code> \u2015 \u0434\u0430\u0436\u0435 \u0442\u044f\u0436\u0435\u043b\u044b\u0439 \u0438\u043b\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u2015 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438: \u0431\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 <code>useEffect<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u044b\u0439 \u0440\u0438\u0441\u043a \u0431\u0430\u0433\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0442\u0435\u0447\u043a\u0430\u043c\u0438 \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u0438 \u0442. \u043f.).<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0412\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (<code><strong>[]<\/strong><\/code>), \u0435\u0441\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">import { useEffect } from 'react';  const Component = () =&gt; {   useEffect(() =&gt; {     \/\/ \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430      \/\/ \u0422\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e!   }, [])    return &lt;div&gt;Example&lt;\/div&gt;; } <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 (\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438);<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0440\u0438\u0441\u043a\u0430 \u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u0438\u043b\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u0448\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e, \u043a\u0430\u043a \u0430\u043d\u0430\u043b\u043e\u0433 <code>componentDidMount<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 <code>React<\/code>.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u0412\u0430\u0436\u043d\u043e<\/h4>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u0430 \u043a \u0434\u0440\u0443\u0433\u0438\u043c <code>React<\/code>-\u0445\u0443\u043a\u0430\u043c \u2014 <code>useCallback<\/code> \u0438 <code>useMemo<\/code>: \u0435\u0441\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0438 \u043e\u0442 \u043a\u0430\u043a\u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043b\u0438\u0431\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u0438 \u0445\u0443\u043a\u0438 \u0432\u043e\u0432\u0441\u0435, \u043b\u0438\u0431\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.<\/p>\n<hr\/>\n<p><a class=\"anchor\" name=\"8-vsegda-ukazyvajte-vse-zavisimosti-v-useeffect-i-drugih-react-hukah\" id=\"8-vsegda-ukazyvajte-vse-zavisimosti-v-useeffect-i-drugih-react-hukah\"><\/a><\/p>\n<h2>8. \u0412\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 useEffect \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 React-\u0445\u0443\u043a\u0430\u0445<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0445\u0443\u043a\u043e\u0432 (<code>useEffect<\/code>, <code>useCallback<\/code>, <code>useMemo<\/code>). \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u0442\u0440\u0443\u0434\u043d\u043e\u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0430\u0433\u0438, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useEffect, useState } from 'react';  const Component = () =&gt; {   const [value, setValue] = useState();    useEffect(() =&gt; {     \/\/ \u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f value, \u043d\u043e \u043e\u043d \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445!     \/\/ \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 value.   }, []);    return &lt;div&gt;{value}&lt;\/div&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b, \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0431\u0430\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0443\u0434\u0443\u0449\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 <code>React<\/code> (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 <code>React 18+<\/code>) \u0438\u043b\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u044f\u0432\u0438\u0442\u044c \u044d\u0442\u0438 \u0431\u0430\u0433\u0438 \u0432 \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u0420\u0438\u0441\u043a \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0431\u0430\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0438\u043b\u0438 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445 <code>React<\/code> \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044cc\u044f \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0438\u0437-\u0437\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p><code>ESLint<\/code> \u043f\u0440\u0430\u0432\u0438\u043b\u043e <code>react-hooks\/exhaustive-deps<\/code> \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442 \u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u2014 \u043d\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0439\u0442\u0435 \u0435\u0433\u043e.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0412\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 <code>useEffect<\/code> (\u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432).<\/p>\n<pre><code>import { useEffect, useState } from 'react';  const Component = () =&amp;gt; {   const [value, setValue] = useState();    useEffect(() =&amp;gt; {     if (!value) {       \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430, \u0435\u0441\u043b\u0438 value \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.     }   }, [value]); \/\/ value \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445!    return &lt;div&gt;{value}&lt;\/div&gt;; } <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 &#171;\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e&#187; \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0438\u0434\u0435\u043c\u043f\u043e\u0442\u0435\u043d\u0442\u043d\u044b\u043c?<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>if<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438)?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0444\u0444\u0435\u043a\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u043d\u0435 <code>useEffect<\/code>.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p>\u0412\u0430\u0448\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0440\u0443\u0434\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u0445 \u0431\u0430\u0433\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u0438 \u043b\u0435\u0433\u0447\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445 React;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0435 <code>best practices<\/code> \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/h4>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0438\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0438 <code>useEffect<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0438\u043d\u0430\u0447\u0435 \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438\u0437-\u0437\u0430 \u043d\u043e\u0432\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"9-ne-ispolzujte-useeffect-dlya-inicializacii-vneshnego-koda\" id=\"9-ne-ispolzujte-useeffect-dlya-inicializacii-vneshnego-koda\"><\/a><\/p>\n<h2>9. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useEffect \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/strong> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438) \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442 \u0432 <code>useEffect<\/code> \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c (\u201c\u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438\u201d), \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043b\u0438\u0448\u0451\u043d \u0441\u043c\u044b\u0441\u043b\u0430 \u0438 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d \u043e\u0448\u0438\u0431\u043a\u0430\u043c. \u0415\u0441\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u0442\u043e \u043d\u0435\u0442 \u043f\u0440\u0438\u0447\u0438\u043d \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0435\u0451 \u0432 <code>useEffect<\/code>.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useEffect } from 'react'; import initLibrary from '\/libraries\/initLibrary';  const Component = () =&gt; {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   useEffect(() =&gt; {     initLibrary()   }, []);    return &lt;div&gt;Example&lt;\/div&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0443\u044e\u0441\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u043b\u0438 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0436\u0438\u0442\u044c \u0432\u043d\u0435 <code>React<\/code>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043d\u0435 \u201c\u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u201d \u0438\u0445 \u043a \u0435\u0433\u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u0435\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c: \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u0434, \u043b\u0435\u0433\u043a\u043e \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u044f\u0432\u043d\u043e\u0441\u0442\u044c: \u043d\u0435 \u0432\u0438\u0434\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 <code>React<\/code>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0435\u0451 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u0438\u043b\u0438 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435.<\/p>\n<pre><code class=\"javascript\">import initLibrary from '\/libraries\/initLibrary';  \/\/ \u0421\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u2014 \u043b\u043e\u0433\u0438\u043a\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f initLibrary();  const Component = () =&gt; {   return &lt;div&gt;Example&lt;\/div&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p>\u041a\u043e\u0434 \u043e\u0447\u0435\u0432\u0438\u0434\u0435\u043d: \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 <code>React<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u042f\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u0412\u0430\u0436\u043d\u043e\u0435 \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u0430\u043c \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useEffect<\/code> \u2014 \u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044d\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 <code>useEffect<\/code>.<\/p>\n<hr\/>\n<p><a class=\"anchor\" name=\"10-ne-oborachivajte-vneshnie-funkcii-v-usecallback-bez-neobhodimosti\" id=\"10-ne-oborachivajte-vneshnie-funkcii-v-usecallback-bez-neobhodimosti\"><\/a><\/p>\n<h2>10. \u041d\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 useCallback \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>useCallback<\/code> \u0434\u043b\u044f \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0438 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0430 <code>React<\/code>: \u043e\u043d \u0442\u0440\u0430\u0442\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0445\u043e\u0442\u044f \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useCallback } from 'react'; import externalFunction from '\/services\/externalFunction';  const Component = () =&gt; {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   const handleClick = useCallback(() =&gt; {     externalFunction()   }, []);    return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u041b\u0438\u0448\u043d\u044f\u044f \u201c\u0440\u0430\u0431\u043e\u0442\u0430\u201d <code>React<\/code> \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0438 <code>API<\/code>-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0447\u0438\u0442\u0430\u0442\u044c, \u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u043f\u0440\u0438\u0447\u0438\u043d \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0443\u0436\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u2014 \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044c\u0448\u0435 <code>React<\/code>-\u043c\u0430\u0433\u0438\u0438 \u2014 \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0438\u0441\u043a\u0430 \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0447\u0438\u0449\u0435 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0435\u0435.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u0432\u043d\u0435 \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0451 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e!<\/p>\n<pre><code class=\"javascript\">import externalFunction from '\/services\/externalFunction';  const Component = () =&gt; {   \/\/ \u041f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e   return &lt;button onClick={externalFunction}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u0434 \u043f\u0440\u043e\u0449\u0435:<\/strong> \u0412\u044b \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442\u0435 \u043b\u0438\u0448\u043d\u0435\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u2014 \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0435, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u201c\u0440\u0430\u0441\u043f\u0443\u0442\u044b\u0432\u0430\u0442\u044c\u201d \u0443\u0440\u043e\u0432\u043d\u0438 \u0432\u044b\u0437\u043e\u0432\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439:<\/strong> <code>React<\/code> \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435, \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u044c\u0448\u0435 \u0431\u0430\u0433\u043e\u0432:<\/strong> \u041d\u0435\u0442 \u0440\u0438\u0441\u043a\u0430 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u0435\u0434\u044c <code>useCallback<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u0435\u043d;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440:<\/strong> \u0412\u044b \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 React \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>callback<\/code>-\u0438 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0449\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c:<\/strong> \u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c, \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0442\u044c \u2014 \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u044f\u0442, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2014 \u044d\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0430 \u043d\u0435 \u043d\u0435\u043a\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u043e\u0433\u0434\u0430 useCallback \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u0435\u043d<\/h4>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useCallback<\/code> \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u0447\u0435\u0440\u0435\u0437 <code>useState<\/code>, <code>useReducer<\/code>) \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u0438 \u043d\u0443\u0436\u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 <code>memo<\/code>&#8212; \u0438\u043b\u0438 <code>useEffect<\/code>-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439).<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h3>\n<pre><code class=\"javascript\">import { useCallback, useState } from 'react'; import { externalFunction, anotherExternalFunction } from '\/services';  const Component = ({ passedInProp }) =&gt; {   const [value, setValue] = useState();    \/\/ \u0417\u0434\u0435\u0441\u044c useCallback \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d:   const handleClick = useCallback(() =&gt; {     externalFunction()     anotherExternalFunction()     setValue(passedInProp) \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c prop \u0438 state \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435   }, [passedInProp, value]);    return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<hr\/>\n<p><a class=\"anchor\" name=\"11-ne-ispolzujte-usememo-s-pustym-spiskom-zavisimostej\" id=\"11-ne-ispolzujte-usememo-s-pustym-spiskom-zavisimostej\"><\/a><\/p>\n<h2>11. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useMemo \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c <code>useMemo<\/code> \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 <code>([])<\/code> \u0431\u0435\u0437 \u0432\u0435\u0441\u043a\u0438\u0445 \u043d\u0430 \u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0439. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u043c\u044b \u00ab\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u00bb \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043b\u0438\u0431\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0438 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043c\u044b \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useMemo } from 'react';  const Component = () =&gt; {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a.   const memoizedValue = useMemo(() =&gt; {     return 3 + 5;   }, []);    return &lt;div&gt;{memoizedValue}&lt;\/div&gt;; };<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u042d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043b\u0438\u0448\u043d\u044e\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c: <code>useMemo<\/code> \u0437\u0434\u0435\u0441\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u00ab\u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0423\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430: \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0434\u0440\u0443\u0433 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0445\u0443\u043a\u043e\u043c?<\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u043e\u0434\u0438\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0435: \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0431\u0443\u0434\u0442\u043e \u0435\u0441\u0442\u044c \u00ab\u0441\u043a\u0440\u044b\u0442\u0430\u044f\u00bb \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0442\u044f\u0436\u0451\u043b\u043e\u0435, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>useMemo<\/code> \u0442\u0430\u043c, \u0433\u0434\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041b\u0438\u0448\u043d\u044f\u044f \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0434\u0430\u0451\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u044b, \u043d\u043e \u0446\u0435\u043f\u043b\u044f\u0435\u0442 \u0442\u0435\u0445\u0434\u043e\u043b\u0433.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0439\u0442\u0435 \u0435\u0433\u043e \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u0441\u0440\u0430\u0437\u0443 \u0432 \u043c\u0435\u0441\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">const memoizedValue = 3 + 5;  const Component = () =&gt; {   return &lt;div&gt;{memoizedValue}&lt;\/div&gt;; };<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430<\/strong>: \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u043d\u043e \u0441\u0440\u0430\u0437\u0443, \u043d\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u0442 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u0441\u043c\u044b\u0441\u043b\u043e\u0432<\/strong>: \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c<\/strong>: \u043a\u043e\u0434 \u043b\u0435\u0433\u0447\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u0448\u0443\u043c\u0430<\/strong>: \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u00ab\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438\u00bb, \u0432\u0441\u0451 \u043f\u043e \u0434\u0435\u043b\u0443.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"12-ne-obuyavlyajte-komponenty-vnutri-drugih-komponentov\" id=\"12-ne-obuyavlyajte-komponenty-vnutri-drugih-komponentov\"><\/a><\/p>\n<h2>12. \u041d\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \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\u044f\u043c\u043e \u0432 \u0435\u0433\u043e \u0442\u0435\u043b\u0435.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">const Component = () =&gt; {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a.   const ChildComponent = () =&gt; {     return &lt;div&gt;I'm a child component&lt;\/div&gt;;   };    return &lt;div&gt;&lt;ChildComponent \/&gt;&lt;\/div&gt;; };<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b {#voznikayushie-problemy10}<\/h4>\n<ul>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0434\u0430\u0436\u0435 \u0442\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p>React \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e <code>ChildComponent<\/code> \u2014 \u044d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>React.memo<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c \u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u0447\u0438\u0441\u043b\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u2014 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/strong>: \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>ChildComponent<\/code> \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 React<\/strong>: <code>React<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432\u0435\u0434\u044c \u0441 \u0435\u0433\u043e \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f <code>ChildComponent<\/code> \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0445\u0443\u043a\u043e\u0432<\/strong>: \u0415\u0441\u043b\u0438 <code>ChildComponent<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0445\u0443\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>useState<\/code> \u0438\u043b\u0438 <code>useEffect<\/code>), \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043b\u043e\u043c\u0430\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/strong>: \u0412 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0434\u043b\u044f \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0438\u0442\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043d\u0435 \u0442\u0435\u043b\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e:<\/p>\n<pre><code class=\"javascript\">const ChildComponent = () =&gt; {   return &lt;div&gt;I'm a child component&lt;\/div&gt;; };  const Component = () =&gt; {   return &lt;div&gt;&lt;ChildComponent \/&gt;&lt;\/div&gt;; }; <\/code><\/pre>\n<p><strong>\u0418\u043b\u0438 \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u2014 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438.<\/strong><\/p>\n<pre><code class=\"javascript\">import ChildComponent from 'components\/ChildComponent'  const Component = () =&gt; {   return &lt;div&gt;&lt;ChildComponent \/&gt;&lt;\/div&gt; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437<\/strong>: <code>ChildComponent<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: <code>React<\/code> \u043c\u043e\u0436\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0445\u0443\u043a\u043e\u0432<\/strong>: \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0445\u0443\u043a\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u0427\u0438\u0441\u0442\u044b\u0439 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u043a\u043e\u0434<\/strong>: \u0424\u0430\u0439\u043b \u043f\u0440\u043e\u0449\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"13-ne-ispolzujte-huki-vnutri-uslovnyh-operatorov-nikakih-uslovnyh-hukov\" id=\"13-ne-ispolzujte-huki-vnutri-uslovnyh-operatorov-nikakih-uslovnyh-hukov\"><\/a><\/p>\n<h2>13. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 (\u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432)<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, useState, useEffect) \u0432\u043d\u0443\u0442\u0440\u0438 if, switch, \u0446\u0438\u043a\u043b\u043e\u0432 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react';  const Component = ({ propValue }) =&gt; {   if (!propValue) {     \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!     const [value, setValue] = useState(propValue);   }    return &lt;div&gt;{value}&lt;\/div&gt;; };<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b \u0445\u0443\u043a\u043e\u0432:<\/strong> <code>React<\/code> \u0442\u0440\u0435\u0431\u0443\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0445\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438:<\/strong> \u0415\u0441\u043b\u0438 \u0445\u0443\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f, <code>React<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u0431\u0430\u0433\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0431\u043e\u0438 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0445\u0443\u043a\u043e\u0432:<\/strong> \u041f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 \u0445\u0443\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043c\u0435\u0441\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u0441\u043b\u043e\u043c\u0430\u0435\u0442 \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>useState<\/code> \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0445\u0443\u043a\u043e\u0432 \u043d\u0430\u0440\u0443\u0448\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<ul>\n<li>\n<p><strong>\u0412\u0441\u0435 \u0445\u0443\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u0439<\/strong> \u2014 \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0442\u0435\u043b\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u043b\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430 \u043d\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">import { useState } from 'react';  const Component = ({ propValue }) =&gt; {   const [value, setValue] = useState(propValue);    if (!propValue) {     return &lt;span&gt;No value&lt;\/span&gt;;   }    return &lt;div&gt;{value}&lt;\/div&gt;; };<\/code><\/pre>\n<h4>\u041a\u0430\u043a \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0441 \u00ab\u0443\u0441\u043b\u043e\u0432\u043d\u044b\u043c\u0438 \u0445\u0443\u043a\u0430\u043c\u0438\u00bb<\/h4>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0445\u0443\u043a \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u2014 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u0435 \u0435\u0451 \u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0445\u0443\u043a\u0438. \u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0444\u043b\u0430\u0433 <code>enabled<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0445\u0443\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u0438 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">function useCustomHook(enabled) {   useEffect(() =&gt; {     if (!enabled) return;     \/\/ \u043d\u0443\u0436\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430   }, [enabled]); }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432.<\/strong> React \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a\u043e\u0439 \u0445\u0443\u043a \u0447\u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434.<\/strong> \u0418\u0441\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u0438\u0435 \u0438 \u043e\u0447\u0435\u043d\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f.<\/strong> \u041a\u043e\u0434 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u043f\u0440\u043e\u0449\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"14-ne-ispolzujte-huki-posle-return-ili-vnutri-uslovnyh-operatorov\" id=\"14-ne-ispolzujte-huki-posle-return-ili-vnutri-uslovnyh-operatorov\"><\/a><\/p>\n<h2>14. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 return (\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432)<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 <code>return<\/code>. \u041c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u043d\u0430\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0445\u0443\u043a\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 <code>if<\/code>, \u043d\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u043c\u0435\u0447\u0430\u044e\u0442, \u0447\u0442\u043e return \u0442\u043e\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react'  const Component = ({ propValue }) =&gt; {   if (!propValue) {     return null   }    \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a: \u0445\u0443\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 propValue \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.   const [value, setValue] = useState(propValue)    return &lt;div&gt;{value}&lt;\/div&gt; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432:<\/strong> \u0425\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e <code>React<\/code> \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u043b\u0435\u0434 \u0437\u0430 \u0438\u0445 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/strong> <code>React<\/code> \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 (&#171;Rendered fewer hooks than expected&#187;), \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0445\u0443\u043a\u043e\u0432 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 React:<\/strong> <code>React<\/code> \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \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.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u0435 \u0445\u0443\u043a\u0438:<\/strong> \u0415\u0441\u043b\u0438 \u043d\u0435 \u0432\u0441\u0435 \u0445\u0443\u043a\u0438 \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0432 \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, <code>React<\/code> \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0445\u0443\u043a\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u0431\u0430\u0433\u0438:<\/strong> \u0422\u0430\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0430\u0433\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u043c\u0438 \u0438 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/strong> \u041f\u0440\u0438 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432 React \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0412\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0445\u0443\u043a\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0435 \u043b\u044e\u0431\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  const Component = ({ propValue }) =&gt; {   \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e: \u0445\u0443\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u043e \u043b\u044e\u0431\u044b\u0445 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0439   const [value, setValue] = useState(propValue)    if (!propValue) {     return null   }    return &lt;div&gt;{value}&lt;\/div&gt; }<\/code><\/pre>\n<p><strong>\u0418\u043b\u0438 \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u2014 \u0432\u044b\u043d\u0435\u0441\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/strong><\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/strong> <code>React<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438 \u043a\u0430\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 \u0431\u044b\u043b\u043e \u0432\u044b\u0437\u0432\u0430\u043d\u043e, \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435:<\/strong> \u041a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0438 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u044b\u043c \u043e\u0442 \u043e\u0448\u0438\u0431\u043e\u043a, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:<\/strong> \u042d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0445\u0443\u043a\u043e\u0432 <code>React<\/code>: \u201c\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0445\u0443\u043a\u043e\u0432: \u0412\u044b\u0437\u044b\u0432\u0430\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 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u201d.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"15-ne-zastavlyajte-roditelskij-komponent-reshat,-dolzhen-li-dochernij-renderitsya\" id=\"15-ne-zastavlyajte-roditelskij-komponent-reshat,-dolzhen-li-dochernij-renderitsya\"><\/a><\/p>\n<h2>15. \u041d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0448\u0430\u0442\u044c, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u041e\u0431\u044b\u0447\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430<\/strong> \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0447\u0435\u0440\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react'  const ChildComponent = ({ shouldRender }) =&gt; {   return &lt;div&gt;Rendered: {shouldRender}&lt;\/div&gt; }  const Component = () =&gt; {   const [shouldRender, setShouldRender] = useState(false)    return &lt;&gt;     { !!shouldRender &amp;&amp; &lt;ChildComponent shouldRender={shouldRender} \/&gt; }   &lt;\/&gt; }  <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, <code>React<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0435\u0441\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 state \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u043e\u0440\u043c\u0430 \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>useState<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 <code>useEffect<\/code>\/<code>useMemo<\/code>\/<code>useCallback<\/code> \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u043e\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u044f\u0436\u0451\u043b\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u2014 \u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/strong> \u0444\u043e\u0440\u043c\u0430 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0441\u043e\u043a\u0440\u044b\u0442\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u044b:<\/strong> \u043d\u0435\u043d\u0443\u0436\u043d\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b:<\/strong> \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0432 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445:<\/strong> \u043a\u043e\u0433\u0434\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e \u043c\u0435\u0441\u0442\u0443 \u0432\u044b\u0437\u043e\u0432\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0438\u0442\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0430\u043c\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  const ChildComponent = ({ shouldRender }) =&gt; {   if (!shouldRender) {     return null   }   return &lt;div&gt;Rendered: {shouldRender}&lt;\/div&gt; }  const Component = () =&gt; {   const [shouldRender, setShouldRender] = useState(false)   return &lt;ChildComponent shouldRender={shouldRender} \/&gt; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/strong> \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c, \u0435\u0433\u043e \u0445\u0443\u043a\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 state \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u044c\u0448\u0435 \u043b\u0438\u0448\u043d\u0438\u0445 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439:<\/strong> <code>useEffect<\/code>, <code>useMemo<\/code>, <code>useCallback<\/code> \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0435 &#171;\u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442&#187; \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0441\u043a\u0440\u044b\u0442\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0434\u043e\u0431\u0441\u0442\u0432\u043e:<\/strong> \u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 prop (\u0441\u0442\u0438\u043b\u044c <code>single responsibility<\/code>);<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438:<\/strong> \u041d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439, \u043d\u0435 \u0442\u0440\u0430\u0442\u044f\u0442\u0441\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e<\/h4>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0440\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432), \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440, \u0433\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">const ChildComponent = ({ shouldRender, someOtherProp }) =&gt; {   useEffect(() =&gt; {     \/\/ \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 shouldRender === false!   }, [someOtherProp])    if (!shouldRender) {     return null   }    return &lt;div&gt;Rendered: {shouldRender}&lt;\/div&gt; }<\/code><\/pre>\n<p>\u041f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0445\u0443\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043d\u0435\u043b\u044c\u0437\u044f:<\/p>\n<pre><code class=\"javascript\">const ChildComponent = ({ shouldRender, someOtherProp }) =&gt; {   if (!shouldRender) {     return null   }   \/\/ \u0425\u0443\u043a \u043d\u0438\u0436\u0435 - \u0442\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f, React \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443!   useEffect(() =&gt; {}, [someOtherProp]) } <\/code><\/pre>\n<h4>\u0412\u044b\u0431\u043e\u0440 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447\u0438:<\/h4>\n<ul>\n<li>\n<p>\u0425\u043e\u0442\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0432 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435? \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e!<\/p>\n<\/li>\n<li>\n<p>\u0425\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0435\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b? \u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f!<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"16-ispolzujte-usereducer-vmesto-mnozhestva-usestate\" id=\"16-ispolzujte-usereducer-vmesto-mnozhestva-usestate\"><\/a><\/p>\n<h2>16. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useReducer \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 useState<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u0432 <code>useState<\/code> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react'  const Component = () =&gt; {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a: \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e useState \u043d\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.   const [text, setText] = useState('')   const [error, setError] = useState('')   const [touched, setTouched] = useState(false)    const handleChange = (event) =&gt; {     const value = event.target.value     setText(value)      if (value.length &lt; 6) {       setError('Too short')     } else {       setError('')     }   }    return &lt;&gt;     {!touched &amp;&amp; &lt;div&gt;Write something...&lt;\/div&gt; }     &lt;input type=\"text\" value={text} onChange={handleChange} \/&gt;     &lt;div&gt;Error: {error}&lt;\/div&gt;   &lt;\/&gt; } <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 <code>useState<\/code> \u0434\u0435\u043b\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0440\u0443\u0434\u043d\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442: \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0451 \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 state.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438:<\/strong> \u041a\u043e\u0434 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c <code>useState<\/code> \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 &#171;\u043b\u043e\u0441\u043a\u0443\u0442\u043d\u043e\u0435 \u043e\u0434\u0435\u044f\u043b\u043e&#187;, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438:<\/strong> \u0421\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c <code>state<\/code>-\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u043d\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043d\u043e\u0433\u043e \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432:<\/strong> \u041a\u0430\u0436\u0434\u044b\u0439 <code>useState<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440, \u0435\u0441\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 <code>state<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useReducer<\/code> \u2014 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0432\u0441\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">import { useReducer } from 'react'  const UPDATE_TEXT = 'UPDATE_TEXT' const RESET_FORM = 'RESET_FORM'  const getInitialFormState = () =&gt; ({   text: '',   error: '',   touched: false })  const formReducer = (state, action) =&gt; {   switch (action.type) {     case UPDATE_TEXT:       const text = action.text ?? ''       return {         ...state,         text,         error: text.length &lt; 6 ? 'Too short' : '',         touched: true       }     case RESET_FORM:       return getInitialFormState()     default:       return state   } }  const Component = () =&gt; {   const [state, dispatch] = useReducer(formReducer, getInitialFormState())   const { text, error, touched } = state    const handleChange = (event) =&gt; {     const value = event.target.value     dispatch({ type: UPDATE_TEXT, text: value })   }    return &lt;&gt;     {!touched &amp;&amp; &lt;div&gt;Write something...&lt;\/div&gt;}     &lt;input type=\"text\" value={text} onChange={handleChange} \/&gt;     &lt;div&gt;Error: {error}&lt;\/div&gt;   &lt;\/&gt; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438:<\/strong> \u0412\u0441\u0451 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c <code>reducer<\/code>-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c:<\/strong> \u041b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0439\u0442\u0435 <code>reducer<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435:<\/strong> \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e, \u0434\u0430\u043d\u043d\u044b\u0435 &#171;\u043d\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044f\u0442\u0441\u044f&#187;;<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440:<\/strong> \u041e\u0434\u0438\u043d <code>dispatch<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432\u0441\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430 \u0440\u0430\u0437.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c useReducer<\/h4>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0438\u0445 \u0447\u0430\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p><em>\u041d\u0435\u0442 \u0436\u0451\u0441\u0442\u043a\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0441 <\/em><code><em>useState<\/em><\/code><em> \u043d\u0430 <\/em><code><em>useReducer<\/em><\/code><em>, \u043d\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0442\u0440\u0438 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u043f\u043e\u0440\u0430 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 <\/em><code><em>useReducer<\/em><\/code><\/p>\n<hr\/>\n<p><a class=\"anchor\" name=\"17-pishite-nachalnoe-sostoyanie-v-vide-funkcii,-a-ne-obuekta\" id=\"17-pishite-nachalnoe-sostoyanie-v-vide-funkcii,-a-ne-obuekta\"><\/a><\/p>\n<h2>17. \u041f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p>\u0412 <code>React<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">const initialFormState = {   text: '',   error: '',   touched: false }  const formReducer = (state, action) =&gt; {   \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430 }  const Component = () =&gt; {   const [state, dispatch] = useReducer(formReducer, initialFormState)   \/\/ \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 } <\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u0441 \u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u0415\u0441\u043b\u0438 \u0433\u0434\u0435-\u0442\u043e \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <code><strong>initialFormState<\/strong><\/code>, \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0442\u0435\u0441\u0442\u0430\u0445).<\/p>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041c\u0443\u0442\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430:<\/strong> \u0415\u0441\u043b\u0438 <code><strong>initialFormState<\/strong><\/code> \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0433\u0434\u0435-\u0442\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0432\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u201c\u0447\u0438\u0441\u0442\u043e\u0435\u201d \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u0435\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0441\u0431\u0440\u043e\u0441\u0435:<\/strong> \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0443\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0432 \u0442\u0435\u0441\u0442\u0430\u0445:<\/strong> \u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043f\u043e\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u043c \u0442\u0435\u0441\u0442\u0430\u043c \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u044f \u0447\u0438\u0441\u0442\u043e\u0442\u044b:<\/strong> \u0412\u044b \u043d\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0435, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u043e\u0432\u043e\u043c \u0435\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043a\u0440\u044b\u0442\u044b\u0435 \u0431\u0430\u0433\u0438:<\/strong> \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u201c\u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435\u201d \u0431\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u0445 \u0438 \u043f\u0440\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435:<\/p>\n<pre><code class=\"javascript\">const getInitialFormState = () =&gt; ({   text: '',   error: '',   touched: false })  const formReducer = (state, action) =&gt; {   \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430 }  const Component = () =&gt; {   const [state, dispatch] = useReducer(formReducer, getInitialFormState())   \/\/ \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0412\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/strong> \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c:<\/strong> \u041d\u0435\u0442 \u0440\u0438\u0441\u043a\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0434\u0451\u0436\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b:<\/strong> \u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0438 \u043d\u0435 \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441:<\/strong> \u041c\u043e\u0436\u043d\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u044b\u0437\u0432\u0430\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f<\/h4>\n<ul>\n<li>\n<p>\u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<br \/> <code><strong>const getInitialState = () =&gt;; ({ ... })<\/strong><\/code><\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>useReducer<\/code> \u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0447\u0438\u0441\u0442\u044b\u0439, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0438 \u0438\u0437\u0431\u0435\u0436\u0438\u0442\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"18-ispolzujte-useref-vmesto-usestate,-esli-ne-nuzhen-povtornyj-rendering-komponenta\" id=\"18-ispolzujte-useref-vmesto-usestate,-esli-ne-nuzhen-povtornyj-rendering-komponenta\"><\/a><\/p>\n<h2>18. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useRef \u0432\u043c\u0435\u0441\u0442\u043e useState, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <code>useState<\/code> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useEffect, useState } from 'react'  const Component = () =&gt; {   const [triggered, setTriggered] = useState(false)    useEffect(() =&gt; {     if (!triggered) {       setTriggered(true)       \/\/ \u041a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437...     }   }, [triggered]) } <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <code>setTriggered<\/code> \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0445\u043e\u0442\u044f \u0442\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u0430\u043a &#171;<code>triggered<\/code>&#171;, \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u043a\u0442\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b:<\/strong> \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>setTriggered<\/code> \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0443, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 <code>JSX<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435:<\/strong> \u041b\u0438\u0448\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043b\u043e\u0433\u0438\u043a\u0435:<\/strong> \u0422\u0430\u043a\u043e\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>useState<\/code> \u0447\u0430\u0441\u0442\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 <code>React<\/code>.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438:<\/strong> \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 <code>React<\/code> \u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430:<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>useState<\/code> \u0440\u0430\u0434\u0438 \u0444\u043b\u0430\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0437\u0430\u043f\u0443\u0442\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<p>\u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 <code>JSX<\/code> \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useRef<\/code>. \u0415\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">import { useRef, useEffect } from 'react'  const Component = () =&gt; {   const triggeredRef = useRef(false)    useEffect(() =&gt; {     if (!triggeredRef.current) {       triggeredRef.current = true       \/\/ \u041a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u0439 \u043a\u043e\u0434\u2026     }   }, []) } <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432:<\/strong> \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <code>triggeredRef.current<\/code> \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0449\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443:<\/strong> \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>useRef<\/code> \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438 \u0438 &#171;\u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e&#187; \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u043b\u0430\u0433\u043e\u0432:<\/strong> <code>useRef<\/code> &#8212; \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 &#171;\u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445&#187; \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e?<\/h3>\n<pre><code class=\"javascript\">\/\/ \u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c! let triggered = false  const Component = () =&gt; {   useEffect(() =&gt; {     if (!triggered) {       triggered = true       \/\/ \u041a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u043e\u0434...     }   }, []) } <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0449\u0435\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043a \u0435\u0433\u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c.<\/p>\n<h4>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f<\/h4>\n<ul>\n<li>\n<p>\u0414\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0445 \u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u0442\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435 <code>useRef<\/code>: <code><strong>const myRef = useRef(initialValue)<\/strong><\/code> \u0418\u0437\u043c\u0435\u043d\u044f\u044f <code><strong>myRef.current<\/strong><\/code>, \u0432\u044b \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0435 \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0432\u0435\u0441\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"19-ispolzovanie-props-ili-context-v-kachestve-nachalnogo-sostoyaniya\" id=\"19-ispolzovanie-props-ili-context-v-kachestve-nachalnogo-sostoyaniya\"><\/a><\/p>\n<h2>19. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 props \u0438\u043b\u0438 context \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong> \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 <code>props<\/code> \u0438\u043b\u0438 <code>context<\/code> \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>useState<\/code> \u0438\u043b\u0438 <code>useRef<\/code>.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">const ArticleContent: React.FC&lt;{ article: Articles[\"articles\"][\"0\"] }&gt; = (props) =&gt; {   \/\/ \u0410\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 props   const [length] = useState&lt;number&gt;(     props.article.text.length + props.article.title.length   );    \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u044d\u043c\u043e\u0446\u0438\u0439   const emotions = useGetEmoji();    \/\/ \u042d\u043c\u043e\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 UI   const [emotion, setEmotion] = useState&lt;string&gt;(\"\");   useEffect(() =&gt; {     if (emotions) {       setEmotion(emotions[\"stickers\"][length]);     }   }, [emotions, length]);    return (     &lt;div&gt;       &lt;h2&gt;{props.article.title}&lt;\/h2&gt;       &lt;div&gt;{props.article.text}&lt;\/div&gt;       &lt;h3 dangerouslySetInnerHTML={{         __html: `Total Length ${length} ${emotion}`       }} \/&gt;     &lt;\/div&gt;   ); };  <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0439 prop (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f), <code><strong>length<\/strong><\/code> \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u043c\u0443 \u0438\u043b\u0438 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e <code>UI<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 <code>props\/context<\/code>, \u043d\u0435 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u201c\u0417\u0430\u0441\u0442\u044b\u0432\u0448\u0438\u0435\u201d \u0434\u0430\u043d\u043d\u044b\u0435:<\/strong> \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 props \u043f\u043e\u0441\u043b\u0435 \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e <code>UI<\/code> \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0441\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b:<\/strong> <code>React<\/code> \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u0430\u0432\u0434\u044b:<\/strong> \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0434\u0432\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 props \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0442\u0440\u0443\u0434\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u043c \u0431\u0430\u0433\u0430\u043c \u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>props<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 <code>props<\/code>, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useMemo<\/code>\/<code>useEffect<\/code> \u0441 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438):<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">const ArticleContent: React.FC&lt;{ article: Articles[\"articles\"][\"0\"] }&gt; = (props) =&gt; {   \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e: \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0435   const length = props.article.text.length + props.article.title.length;    const emotions = useGetEmoji();    const [emotion, setEmotion] = useState&lt;string&gt;(\"\");   useEffect(() =&gt; {     if (emotions) {       setEmotion(emotions[\"stickers\"][length]);     }   }, [emotions, length]);    return (     &lt;div&gt;       &lt;h2&gt;{props.article.title}&lt;\/h2&gt;       &lt;div&gt;{props.article.text}&lt;\/div&gt;       &lt;h3 dangerouslySetInnerHTML={{         __html: `Total Length ${length} ${emotion}`       }} \/&gt;     &lt;\/div&gt;   ); };  <\/code><\/pre>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 <code>props<\/code>, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>useEffect<\/code>:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">const [length, setLength] = useState(props.article.text.length + props.article.title.length);  useEffect(() =&gt; {   setLength(props.article.text.length + props.article.title.length); }, [props.article]);  <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p>React \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0432\u0435\u0436\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 <code>props<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u0440\u0430\u0432\u0434\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"20-udalenie-i-vosstanovlenie-remount-on-prop-change\" id=\"20-udalenie-i-vosstanovlenie-remount-on-prop-change\"><\/a><\/p>\n<h2>20. \u201c\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u201d (Remount on Prop Change)<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p>\u0412 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 <code>props<\/code>, \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u044e\u0442 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u201c\u0440\u0435\u0448\u0435\u043d\u0438\u044e\u201d: \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c React \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>props<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>key<\/code>. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">const PartiallyCorrect: React.FC = () =&gt; {   const articles = useGetArticles();   const [currentArticle, setCurrentArticle] = useState&lt;     Articles[\"articles\"][\"0\"] | null   &gt;();   const onClickHandler = useCallback((article) =&gt; {     setCurrentArticle(article);   }, []);   return (     &lt;div style={styles.container}&gt;       &lt;Navigation articles={articles} onClickHandler={onClickHandler} \/&gt;       &lt;div style={styles.content}&gt;         {currentArticle ? (           \/\/ \u0410\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e key           &lt;ArticleContent article={currentArticle} key={currentArticle.id} \/&gt;         ) : null}       &lt;\/div&gt;     &lt;\/div&gt;   ); }; <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041c\u0435\u0440\u0446\u0430\u043d\u0438\u0435:<\/strong> \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043b\u044e\u0447\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 <code>DOM<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 (\u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435);<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/strong> \u0412\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0445\u0443\u043a\u0438 \u043e\u0431\u043d\u0443\u043b\u044f\u044e\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0447\u0430\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u044b\u043b\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e\u0439 \u0434\u043b\u044f <code>UX<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0431\u0440\u043e\u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/strong> \u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438:<\/strong> \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<\/strong> \u0427\u0430\u0441\u0442\u044b\u0435 \u043f\u043e\u043b\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0442\u044f\u0436\u0451\u043b\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u043b\u044f <code>React<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043b\u043e\u0445\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/strong> \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0442.\u0434;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u0445\u043e\u0434 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0430 \u043d\u0435 \u0435\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/strong> \u0412\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 <code>props<\/code> \u0432\u044b \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043a \u0442\u0440\u044e\u043a\u0430\u043c \u0441 <code>key<\/code>, \u0447\u0442\u043e\u0431\u044b \u201c\u043f\u0435\u0440\u0435\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u201d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u043c\u0438 \u043e\u0442 <code>props<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043b\u0435\u0442\u0443 \u0438\u0437 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 <code>props<\/code> \u2014 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0439\u0442\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\/\u0432\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0447\u0435\u0440\u0435\u0437 <code>useEffect<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>useEffect<\/code> \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 <code>props<\/code> \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">import { useEffect, useState } from \"react\"; import { useGetArticles } from \"..\/hooks\/useGetArticles\"; import { useGetEmoji } from \"..\/hooks\/useGetEmoji\"; import { Navigation } from \"..\/components\/Navigation\"; import { Articles } from \"..\/types\";  const styles = {   container: {     background: \"#FEF2F2\",     height: \"100%\",     display: \"grid\",     gridTemplateColumns: \"10rem auto\"   },   content: {} };  const ArticleContent = ({ article }) =&gt; {   \/\/ \u0414\u043b\u0438\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438   const length = article.text.length + article.title.length;    \/\/ \u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0441\u0442\u0438\u043a\u0435\u0440\u0430\u0445 (\u044d\u043c\u043e\u0446\u0438\u044f\u0445)   const emotions = useGetEmoji();    \/\/ \u0425\u0440\u0430\u043d\u0438\u043c \u044d\u043c\u043e\u0446\u0438\u044e \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0434\u043b\u0438\u043d\u044b \u2014 \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u043b\u0438 \u044d\u043c\u043e\u0446\u0438\u0439   const [emotion, setEmotion] = useState(\"\");    useEffect(() =&gt; {     if (emotions) {       setEmotion(emotions[\"stickers\"][length]);     }   }, [emotions, length]); \/\/ \u0421\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438: \u0435\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u043b\u0438 \u044d\u043c\u043e\u0446\u0438\u0438    return (     &lt;div&gt;       &lt;div&gt;         &lt;h2&gt;{article.title}&lt;\/h2&gt;         &lt;div&gt;{article.text}&lt;\/div&gt;       &lt;\/div&gt;       &lt;h3         dangerouslySetInnerHTML={{           __html: `Total Length ${length} ${emotion}`         }}       \/&gt;     &lt;\/div&gt;   ); };  const Correct = () =&gt; {   const articles = useGetArticles();   const [currentArticle, setCurrentArticle] = useState(null);    const onClickHandler = (article) =&gt; setCurrentArticle(article);    return (     &lt;div style={styles.container}&gt;       &lt;Navigation articles={articles} onClickHandler={onClickHandler} \/&gt;       &lt;div style={styles.content}&gt;         {currentArticle ? &lt;ArticleContent article={currentArticle} \/&gt; : null}       &lt;\/div&gt;     &lt;\/div&gt;   ); };  export default Correct;<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439 \u0438 \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u0439; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u0448 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435, \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0435\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u0435, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u2014 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u2014 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0430 \u043d\u0435 \u043d\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u0412\u044b\u0431\u043e\u0440 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0442\u0430\u043a\u0442\u0438\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, SLA, \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435. \u0420\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043a\u0430\u043a \u0447\u0435\u043a-\u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0432\u044c\u044e; \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0439\u0442\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u0438 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u043e\u0432, \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u044b\u0445 \u0432\u0430\u0448\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.  <\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/937656\/\"> https:\/\/habr.com\/ru\/articles\/937656\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>React \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c UI \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0434\u0435\u0442\u0435\u0440\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 props \u0438 state, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0434\u0430\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0438 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0435\u0445\u0438: \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u044e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u0434 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0440\u0435\u043c\u043e\u0443\u043d\u0442\u043e\u043c \u043f\u043e key \u0438 \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044e. \u041f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u2014 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044b, \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0435\u0444\u0435\u043a\u0442\u044b, \u043f\u043b\u043e\u0445\u043e \u043f\u043e\u0434\u0434\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0435.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0438\u043f\u043e\u0432\u044b\u0435 \u0430\u043d\u0442\u0438\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0443\u043a\u0430\u043c\u0438, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u0441 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445: \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0441\u0442\u0438\u043d\u044b, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0445\u0443\u043a\u043e\u0432, \u0447\u0435\u0442\u043a\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043a\u0430\u043a \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.<\/p>\n<hr\/>\n<h2>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\" rel=\"noopener noreferrer nofollow\">useState \u0438 useEffect \u0434\u043b\u044f\u00a0\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u043e useState \u0434\u043b\u044f\u00a0\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 CSS \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS\u2011in\u2011JS<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5-usecallback-dlya-stabilnyh-zavisimostej\" rel=\"noopener noreferrer nofollow\">useCallback \u0434\u043b\u044f\u00a0\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6-ispolzovanie-usecallback-dlya-predotvrasheniya-lishnih-srabatyvanij-useeffect\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 useCallback \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u00a0\u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0439 useEffect<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#7-dobavlyajte-pustoj-massiv-zavisimostej-k-useeffect,-esli-zavisimostej-net\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u00a0useEffect, \u0435\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0435\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#8-vsegda-ukazyvajte-vse-zavisimosti-v-useeffect-i-drugih-react-hukah\" rel=\"noopener noreferrer nofollow\">\u0412\u0441\u0435\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u00a0useEffect \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 React\u2011\u0445\u0443\u043a\u0430\u0445<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#9-ne-ispolzujte-useeffect-dlya-inicializacii-vneshnego-koda\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useEffect \u0434\u043b\u044f\u00a0\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#10-ne-oborachivajte-vneshnie-funkcii-v-usecallback-bez-neobhodimosti\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u00a0useCallback \u0431\u0435\u0437\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#11-ne-ispolzujte-usememo-s-pustym-spiskom-zavisimostej\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useMemo \u0441\u00a0\u043f\u0443\u0441\u0442\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#12-ne-obuyavlyajte-komponenty-vnutri-drugih-komponentov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#13-ne-ispolzujte-huki-vnutri-uslovnyh-operatorov-nikakih-uslovnyh-hukov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 (\u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#14-ne-ispolzujte-huki-posle-return-ili-vnutri-uslovnyh-operatorov\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 return (\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#15-ne-zastavlyajte-roditelskij-komponent-reshat,-dolzhen-li-dochernij-renderitsya\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u00a0\u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0448\u0430\u0442\u044c, \u0434\u043e\u043b\u0436\u0435\u043d\u00a0\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#16-ispolzujte-usereducer-vmesto-mnozhestva-usestate\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useReducer \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 useState<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#17-pishite-nachalnoe-sostoyanie-v-vide-funkcii,-a-ne-obuekta\" rel=\"noopener noreferrer nofollow\">\u041f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u00a0\u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430\u00a0\u043d\u0435\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#18-ispolzujte-useref-vmesto-usestate,-esli-ne-nuzhen-povtornyj-rendering-komponenta\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useRef \u0432\u043c\u0435\u0441\u0442\u043e useState, \u0435\u0441\u043b\u0438 \u043d\u0435\u00a0\u043d\u0443\u0436\u0435\u043d \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#19-ispolzovanie-props-ili-context-v-kachestve-nachalnogo-sostoyaniya\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 props \u0438\u043b\u0438\u00a0context \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#20-udalenie-i-vosstanovlenie-remount-on-prop-change\" rel=\"noopener noreferrer nofollow\">\u00ab\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u00bb (Remount on Prop Change)<\/a><\/p>\n<\/li>\n<\/ol>\n<hr\/>\n<p><a class=\"anchor\" name=\"1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\" id=\"1-usestate-i-useeffect-dlya-sinhronnyh-dannyh\"><\/a><\/p>\n<h2>1. useState \u0438 useEffect \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 <code><strong>useState<\/strong><\/code> \u0438 <code><strong>useEffect<\/strong><\/code> \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0445, <em>\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435.<br \/> \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0440\u0443\u0434\u043d\u043e\u0443\u043b\u043e\u0432\u0438\u043c\u044b\u0445 \u0431\u0430\u0433\u043e\u0432.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import React, { useState, useEffect } from 'react';  interface Props {   firstName: string;   lastName: string; }  function MyComponent(props: Props) {   const { firstName, lastName } = props;   const [fullName, setFullName] = useState('');    useEffect(() =&gt; {     setFullName(`${firstName} ${lastName}`);   }, [firstName, lastName]);    return (     &lt;span&gt;{fullName}&lt;\/span&gt;   ); }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><code><strong>useEffect<\/strong><\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <em>\u043f\u043e\u0441\u043b\u0435<\/em> \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0438\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c <em>\u0434\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u0435\u043d \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/strong>: \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>useEffect<\/code>;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0439 render<\/strong>: <code>useEffect<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>setState<\/code> \u2192 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u044f\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/strong>: \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/strong>: \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0440\u0438\u0441\u043a \u0431\u0430\u0433\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import React from 'react';  interface Props {   firstName: string;   lastName: string; }  function MyComponent(props: Props) {   const { firstName, lastName } = props;   const fullName = `${firstName} ${lastName}`;    return (     &lt;span&gt;{fullName}&lt;\/span&gt;   ); }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430<\/strong>: \u043d\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong>: \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0434\u0438\u043d render<\/strong>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 UX<\/strong>: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0431\u0435\u0437 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u043c\u0438\u0433\u0430\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\" id=\"2-ne-ispolzujte-peremennye-vmesto-usestate-dlya-hraneniya-sostoyaniya\"><\/a><\/p>\n<h2>2. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u043e useState \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 <code><strong>useState<\/strong><\/code> \u0438\u043b\u0438 <code><strong>useReducer<\/strong><\/code>.<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u2014 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 React.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import AnotherComponent from 'components\/AnotherComponent';  function Component() {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   const value = { someKey: 'someValue' };    return &lt;AnotherComponent value={value} \/&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p>\u041d\u0430 <em>\u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em> \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <code><strong>value<\/strong><\/code> \u0441\u043e <em>\u0441\u0432\u0435\u0436\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041b\u044e\u0431\u044b\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 (<code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code>, <code><strong>useCallback<\/strong><\/code>) \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u2014 React \u0432\u0438\u0434\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437;<\/p>\n<\/li>\n<li>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b (<code><strong>useEffect<\/strong><\/code>), \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c <em>\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em>;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0435 \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: React \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 render\u2019\u044b<\/strong>: \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code><strong>memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code> \u0438 \u043f\u0440\u043e\u0447\u0435\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u0438\u043b\u0438\u0435 \u0431\u0430\u0433\u043e\u0432<\/strong>: \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, &#171;\u0434\u0440\u043e\u0436\u0430\u0449\u0438\u0435&#187; \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react'; import AnotherComponent from 'components\/AnotherComponent';  function Component() {   \/\/ \u0414\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   const [value, setValue] = useState({ someKey: 'someValue' });    return &lt;AnotherComponent value={value} \/&gt;; } <\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u0421\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430<\/strong>: \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d <code><strong>setValue<\/strong><\/code>, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <code><strong>value<\/strong><\/code> \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: React \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/strong>: <code><strong>useEffect<\/strong><\/code> \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430), \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0439\u0442\u0435 \u0435\u0433\u043e <em>\u0441\u043d\u0430\u0440\u0443\u0436\u0438<\/em> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0442\u043e\u0433\u0434\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438.<\/p>\n<pre><code class=\"javascript\">\/\/ \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0435\u0441\u043b\u0438 value \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f const value = { someKey: 'someValue' };  function Component() {   return &lt;AnotherComponent value={value} \/&gt;; } <\/code><\/pre>\n<hr\/>\n<p><a class=\"anchor\" name=\"3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\" id=\"3-opisyvajte-css-vne-komponenta-pri-ispolzovanii-css-in-js\"><\/a><\/p>\n<h2>3. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 CSS \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-in-JS<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-in-JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0438\u043b\u044f \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f <em>\u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435<\/em>, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 JS, \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import makeCss from 'some\/css\/in\/js\/library';  function Component() {   \/\/ \u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a!   return &lt;div className={makeCss({ background: 'red', width: '100%' })} \/&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442<\/strong>: \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0432\u0435\u0436\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: CSS-\u043a\u043b\u0430\u0441\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0435\u0440\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0451\u0442\u0430\u043c \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f \u0440\u0438\u0441\u043a \u0431\u0430\u0433\u043e\u0432<\/strong>: \u043c\u043e\u0433\u0443\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (<code><strong>useEffect<\/strong><\/code>, <code><strong>React.memo<\/strong><\/code> \u0438 \u0434\u0440.).<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/strong>: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0437\u0430\u043d\u043e\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 CSS-\u043a\u043b\u0430\u0441\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0447\u0442\u043e \u0437\u0430\u0431\u0438\u0432\u0430\u0435\u0442 \u043f\u0430\u043c\u044f\u0442\u044c \u0438 \u043c\u0435\u0448\u0430\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 JS<\/strong>: \u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 CPU \u0432\u0440\u0435\u043c\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043b\u043e\u0445\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f\u043c\u0438 React<\/strong>: \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u044f\u0442\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import makeCss from 'some\/css\/in\/js\/library';  \/\/ \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u041e\u0414\u0418\u041d \u0420\u0410\u0417 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430! const someCssClass = makeCss({   background: 'red',   width: '100%' });  function Component() {   return &lt;div className={someCssClass} \/&gt;; }<\/code><\/pre>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435<\/h4>\n<ul>\n<li>\n<p><strong>\u041e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442<\/strong>: CSS-\u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043c\u043e\u0434\u0443\u043b\u044f, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0443\u0447\u0448\u0435\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>: \u0441\u0442\u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0441\u044f \u043f\u0430\u043c\u044f\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong>: \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439\/\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/strong>: \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438\/\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<p><a class=\"anchor\" name=\"4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\" id=\"4-ispolzujte-usecallback-dlya-predotvrasheniya-peresozdaniya-funkcij\"><\/a><\/p>\n<h2>4. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h2>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h4>\n<p><strong>\u0427\u0430\u0441\u0442\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<\/strong>: \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f <em>\u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em>. \u042d\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0445\u0443\u043a\u043e\u0432, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0445 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<hr\/>\n<h4>\u041f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"javascript\">import { useState } from 'react';  function Component() {   const [value, setValue] = useState(false);    \/\/ \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435!   const handleClick = () =&gt; {     setValue(true);   };    return &lt;button onClick={handleClick}&gt;Click me&lt;\/button&gt;; }<\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<ul>\n<li>\n<p><strong>\u041d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0435\u0439<\/strong>: \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 <code><strong>React.memo<\/strong><\/code> \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0445\u0443\u043a\u0438 (<code><strong>useMemo<\/strong><\/code>, <code><strong>useEffect<\/strong><\/code>, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 deps) \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <em>\u043d\u043e\u0432\u0430\u044f<\/em> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/strong>: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u043c\u0435\u043c\u043e-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong>: \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e<\/h4>\n<ul>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>: \u0435\u0441\u043b\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0432\u044b\u0439, <code><strong>React.memo<\/strong><\/code>, <code><strong>useMemo<\/strong><\/code> \u0438 <code><strong>useEffect<\/strong><\/code> \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>\u041b\u0438\u0448\u043d\u044f\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/strong>: \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u0447\u0442\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0433\u0438<\/strong>: \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u2014 \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0443\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong>: \u0434\u043e\u0447\u0435\u0440\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 &#171;\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f&#187; \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u043e\u0432-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h4>\u041a\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c<\/h4>\n<pre><code class=\"javascript\">import { useState, useCallback } from 'react';  function<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-470930","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470930","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=470930"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470930\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=470930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=470930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=470930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}