{"id":395185,"date":"2024-06-29T12:04:22","date_gmt":"2024-06-29T12:04:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=395185"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=395185","title":{"rendered":"<span>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 React 18<\/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<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React 18  \u043a \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0437\u043e\u0432\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c (Reusable State). \u041f\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f  \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432: useEffect, useLayoutEffect, useInsertionEffect \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 componentDidMount, componentWillUnmount. \u0414\u0430\u043b\u0435\u0435 \u044f \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0445\u0443\u043a\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e  React 18 StrictMode \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh. \u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u0432 <a href=\"https:\/\/codesandbox.io\" rel=\"noopener noreferrer nofollow\"><u>codesandbox<\/u><\/a>, React \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c StrictMode.<\/p>\n<p> React 18 \u0432\u044b\u0448\u0435\u043b \u0432 \u043c\u0430\u0440\u0442\u0435 2022 \u0433\u043e\u0434\u0430, \u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0432\u044b\u043c. \u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0443\u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 \u0441\u0442\u0430\u0442\u044c\u044f\u0445:  <a href=\"https:\/\/habr.com\/ru\/post\/577168\/\" rel=\"noopener noreferrer nofollow\"><u>React 18: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<\/u><\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/company\/domclick\/blog\/689152\/\" rel=\"noopener noreferrer nofollow\"><u>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f React 18<\/u><\/a>, \u043d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430  \u0442\u0435\u043c\u0443 Reusable State \u0438 Strict Mode \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 \u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<h2>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u0442\u044c\u0438<\/h2>\n<p>\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c  \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u044b. \u0412\u0442\u043e\u0440\u043e\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u044d\u0442\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u0430\u043d\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0435.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u044f \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0435 \u0437\u0440\u044f \u0438 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u043c\u0443 \u043e\u0442\u0437\u044b\u0432\u0443, \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0438 Reusable State<\/h2>\n<h3>Reusable State<\/h3>\n<p>\u042d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Reusable State, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0447\u0442\u043e Reusable State \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 <a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#what-is-concurrent-react\" rel=\"noopener noreferrer nofollow\"><u>Concurrent React<\/u><\/a> (\u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0430\u0431\u0437\u0430\u0446 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435).<\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e \u0442\u0430\u043a: \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useState \u0438\u043b\u0438 useRef \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f, \u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f Reusable State: \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c React \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<p><a href=\"https:\/\/ru.reactjs.org\/docs\/strict-mode.html#ensuring-reusable-state\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Strict Mode<\/u><\/a><\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c, \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u044b\u043c\u0438 \u043a \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<h3>\u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 React 18 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 React 17.<\/h3>\n<ul>\n<li>\n<p>\u041c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435(React17\/React18) &#8212; \u0437\u0430\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f(React18) &#8212; \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (React18)- \u0437\u0430\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0435), \u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0438 \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e 2 \u0440\u0430\u0437\u0430, \u0442.\u0435. \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442.\u0435. \u0434\u0430\u0436\u0435 \u043d\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/reactjs.org\/docs\/refs-and-the-dom.html\" rel=\"noopener noreferrer nofollow\">ref<\/a> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u041d\u0430 reactwg github discussion \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043e 2 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f  \u0438 \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e React \u043f\u0440\u0438\u043d\u044f\u043b\u043e \u044d\u0442\u0443 \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0441 \u0434\u043e\u043b\u0435\u0439 \u043d\u0435\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/18\" rel=\"noopener noreferrer nofollow\"><u>#18 How to support Reusable State in Effects<\/u><\/a> &#8212; \u043a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a Reusable State.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" rel=\"noopener noreferrer nofollow\"><u>#19 Adding Reusable State to StrictMode<\/u><\/a> &#8212; \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f Strict Mode<\/h3>\n<p>\u0422\u0443\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0430 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0430\u043f\u043e\u0432 \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:<\/p>\n<pre><code>root.render(   &lt;StrictMode>     &lt;App \/>   &lt;\/StrictMode> ); <\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-1-mount-unmount-mount-sync-b6m14y\" rel=\"noopener noreferrer nofollow\"><u>\u0414\u0435\u043c\u043e \u043a\u043e\u0434<\/u><\/a> \u0438 \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code>const Component = () => {   const simulation = React.useRef(false);   console.log(\"render\");   React.useEffect(() => {     if (simulation.current) {       console.log(\"mount simulation\");     } else {       console.log(\"mount\");       simulation.current = true;     }     Promise.resolve().then(() => (simulation.current = false));     return () => {       if (simulation.current) {         console.log(\"unmount simulation\");       } else {         console.log(\"unmount \");       }     };   }, []);   return &lt;>Component Mounted&lt;\/>; }; <\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438  \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<p><code>render<\/code><br \/><code>render<\/code><br \/><code>mount<\/code><br \/><code>unmount simulation<\/code><br \/><code>mount simulation<\/code><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e NextJS:<\/p>\n<p><code>mount<\/code><\/p>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n<p><code>unmount<\/code><\/p>\n<p>Promise \u0432 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c simulation.current \u0432 false \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 &#171;mount&#187; \u0432\u043c\u0435\u0441\u0442\u043e &#171;unmount simulation&#187;. \u041f\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 Reusable State<\/h3>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 React \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Reusable State. \u041f\u043e\u043a\u0430 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043e \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a #19 Adding Reusable State to StrictMode<\/u><\/a><\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u044d\u0442\u043e Fast Refresh, \u043f\u0440\u0438\u0448\u043b\u0430 \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 <a href=\"https:\/\/webpack.js.org\/concepts\/hot-module-replacement\/\" rel=\"noopener noreferrer nofollow\"><u>HMR<\/u><\/a> \u0435\u0449\u0435 \u0432 React 16.9 <a href=\"https:\/\/github.com\/facebook\/create-react-app\/pull\/8582\" rel=\"noopener noreferrer nofollow\"><u>2020 \u0433\u043e\u0434\u0443<\/u><\/a> \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f.  \u0421\u0435\u0433\u043e\u0434\u043d\u044f Fast Refresh \u0443\u0436\u0435 \u043d\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438  \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 React \u0438 React Native. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438 \u0444\u0430\u0439\u043b \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 reusable state, \u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0439\u0434\u0435\u0442 \u0438\u0437 \u0441\u0442\u0440\u043e\u044f \u0438\u0437-\u0437\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0424\u0443\u043d\u043a\u0446\u0438\u044f Fast Refresh \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435: <a href=\"https:\/\/frontend-stuff.com\/blog\/react-fast-refresh\/\" rel=\"noopener noreferrer nofollow\"><u>React Fast Refresh<\/u><\/a><\/p>\n<p>\u041f\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u0423 \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 \u044d\u0442\u043e \u0445\u0443\u043a\u0438 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c, \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0442.\u0435. \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a useEffect, useReducer, useCallback<\/p>\n<\/li>\n<li>\n<p>\u0423 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 componentDidMount, componentWillUnmount<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 Fast Refresh:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nextjs.org\/docs\/basic-features\/fast-refresh\" rel=\"noopener noreferrer nofollow\"><u>NextJS<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/local-development\/fast-refresh\/\" rel=\"noopener noreferrer nofollow\"><u>Gatsby<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/reactnative.dev\/docs\/fast-refresh\" rel=\"noopener noreferrer nofollow\"><u>React Native<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Offscreen API &#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0441 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a content-visibility. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React Native. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<h2>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443: \u041f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c.  \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 (side effect) &#8212; \u044d\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c: \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 API, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u0442.\u0434. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u043f\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443 \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f 1 \u0440\u0430\u0437, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e Strict Mode \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b React Fast Refresh \u0438 Reusable State \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0435\u0449\u0435 \u0434\u043e 18 \u0432\u0435\u0440\u0441\u0438\u0438 React, \u0430 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0435\u043b\u0435\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 18  \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043e, \u0436\u0434\u0435\u043c \u043d\u043e\u0432\u043e\u0435 API.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \/ \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>StrictMode \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e:  mount > simulation unmount > mount<\/p>\n<\/li>\n<li>\n<p>React Resfresh \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430: unmount > mount<\/p>\n<\/li>\n<\/ul>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c <a href=\"https:\/\/codesandbox.io\/s\/problem-effect-reusable-state-and-fast-reload-7zoge8\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/u><\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u0432 \u043d\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c Strict Mode \u0438 React Fast Refresh \u043f\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0434\u0443\u043b\u044f. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u043e\u0441\u044c, \u0434\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043c\u0435\u0448\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0448\u044c \u0432 \u0447\u0435\u043c \u0434\u0435\u043b\u043e \u0438 \u043d\u0435 \u043b\u0435\u043d\u044c \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u043e\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u0440\u043e\u0433\u043e, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u0435\u0433\u043e \u043d\u0430 \u043d\u043e\u0432\u043e\u0435.<\/p>\n<pre><code>  React.useEffect(() => {     setState((prev) => prev + 1);     return () => {       console.log(\"useEffect unmount:\");     };   }, []); <\/code><\/pre>\n<h3>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/ru.reactjs.org\/docs\/refs-and-the-dom.html\" rel=\"noopener noreferrer nofollow\"><u>ref<\/u><\/a>  &#8212; \u0432 \u043e\u0444\u0444 \u0434\u043e\u043a\u0435, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ref \u0434\u043b\u044f \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a HTML DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u043e ref \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f ref \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 stateless \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a redux, mobx \u0438 \u0442.\u0434. \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 stateless \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432), \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. <a href=\"https:\/\/codesandbox.io\/s\/redux-toolkit-counter-pojq5t\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0440\u0438\u043c\u0435\u0440 Redux<\/u><\/a><\/p>\n<p>\u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438  &#171;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c debounce \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432&#187;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043d\u0438\u0437\u044f\u0442 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 &#8212; \u0442\u0430\u043a \u043a\u0430\u043a  react refresh \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442, \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0442\u043e \u043a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435. \u0411\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438  \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a react 18 &#8212; \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c strict mode, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 react query \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c 2 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c Strict Mode.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 &#8212; \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 react query \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 API, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043e\u043f\u0446\u0438\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u043c\u0435\u0441\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0437\u0430 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043e\u043f\u0446\u0438\u044f enabled.<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/codesandbox.io\/s\/react-query-base-ts-refactoring-xgz6hu\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 react query<\/u><\/a><\/p>\n<p>\u041a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u0430 usePosts \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<pre><code>const { status, data, error, isFetching \/*refetch*\/ } = usePosts(\/*false*\/); <\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0445\u0443\u043a\u0430 usePosts \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u043f\u0446\u0438\u044e \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0445\u0443\u043a\u0430:<\/p>\n<pre><code>export function usePosts(enabled: boolean = true) {   return useQuery({     queryKey: [\"posts\"],     enabled,     queryFn: async (): Promise&lt;Array&lt;TPost>> => {       const { data } = await axios.get(         \"https:\/\/jsonplaceholder.typicode.com\/posts\"       );       console.log(\"usePosts queryFn trigger\");       return data;     }   }); } <\/code><\/pre>\n<p>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0441\u0435\u0439\u0447\u0430\u0441, \u043f\u043e\u043a\u0430 \u043d\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e API \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 StrictMode \u0438 React Fast Refresh.<\/p>\n<h4>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 StrictMode<\/h4>\n<p>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/ru.reactjs.org\/docs\/strict-mode.html\" rel=\"noopener noreferrer nofollow\"><u>react strict mode<\/u><\/a>,<\/p>\n<blockquote>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u00a0\u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438;\u00a0\u043e\u043d\u0438 \u043d\u0435\u00a0\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432\u00a0\u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u0441\u0431\u043e\u0440\u043a\u0435.<\/p>\n<\/blockquote>\n<p>\u041e\u0431\u0435\u0440\u0442\u043a\u0443 StrictMode \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438.<\/p>\n<pre><code>root.render(   &lt;React.StrictMode>     &lt;App \/>    &lt;\/React.StrictMode> ); <\/code><\/pre>\n<h4>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 React Fast Refresh<\/h4>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c  \u044d\u0442\u043e \u0442\u043e \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u0441\u0435 \u0445\u0443\u043a\u0438 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u043e\u0432 \u043d\u0435\u0442 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0447\u0442\u043e \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u043e\u0449\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u0435\u043d\u044f\u043b\u0438 \u043a\u043e\u0434 \u043f\u043e f5.<\/p>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430  React Refresh \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh <a href=\"https:\/\/codesandbox.io\/s\/class-reusable-state-e9we9u?file=\/src\/Component.tsx:0-1493\" rel=\"noopener noreferrer nofollow\"><u>\u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/u><\/a>, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b &#8212; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u042f \u0437\u0430\u0434\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0435 <a href=\"https:\/\/stackoverflow.com\/questions\/75111127\/how-to-work-reusable-state-in-class-components\" rel=\"noopener noreferrer nofollow\"><u>stackoverflow<\/u><\/a> \u0438 \u0432 \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u0438 <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19#discussioncomment-4674992\" rel=\"noopener noreferrer nofollow\"><u>#19 discussion<\/u><\/a> &#8212; \u044f \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0435\u0434\u0430\u0432\u043d\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f react-scripts \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a ( \u0441\u043c\u043e\u0442\u0440\u0438 <a href=\"https:\/\/create-react-app.dev\/docs\/advanced-configuration\/\" rel=\"noopener noreferrer nofollow\"><u>react-scripts<\/u><\/a> \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0443\u0442):<\/p>\n<pre><code class=\"json\">  \"scripts\": {     \"start\": \"cross-env FAST_REFRESH=false WDS_SOCKET_HOST=unknown react-scripts start\",     \"build\": \"react-scripts build\",     \"test\": \"react-scripts test\",     \"eject\": \"react-scripts eject\"   }, <\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0434\u0432\u0435 \u043e\u043f\u0446\u0438\u0438: FAST_REFRESH=false  &#8212; \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 Fast refresh, \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 HMR, \u0434\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043e\u043f\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b WDS_SOCKET_HOST=unknown. \u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0432 react-scripts \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a webpack.config.json \u0434\u043b\u044f 5 \u0432\u0435\u0440\u0441\u0438\u0438, \u0434\u043b\u044f 4\u043e\u0439 \u044f \u043d\u0430\u0445\u043e\u0434\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u043e \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u0430\u0432\u043d\u043e\u2026 \u043c\u043e\u0436\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u0435\u0441\u043b\u0438 \u043a\u043e\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0435\u0437 react-scripts \u043d\u0443\u0436\u043d\u043e \u043b\u044e\u0431\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c FAST_REFRESH=false \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u044b, \u0430 \u0432 webpack.config.json (<a href=\"https:\/\/webpack.js.org\/guides\/hot-module-replacement\/\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u043c\u043e\u0442\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/u><\/a>) \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c HMR \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"json\">    devServer: {         hot: false,     }, <\/code><\/pre>\n<h2>\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u044b\u043b \u0432\u0437\u044f\u0442 \u0438\u0437 <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/18\" rel=\"noopener noreferrer nofollow\"><u>#18 How to support Reusable State in Effects<\/u><\/a>.  \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u0430\u0442\u0442\u0435\u0440\u043d <a href=\"https:\/\/www.patterns.dev\/posts\/classic-design-patterns\/#observerpatternjavascript\" rel=\"noopener noreferrer nofollow\"><u>Observer<\/u><\/a>, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0438 \u043c\u043e\u0436\u0435\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u043e \u044d\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c.<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-solution-discus-18-require-clean-1-y1fg1t\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 1<\/u><\/a> &#8212; \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c. \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \/ \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0442\u0443\u0442 \u043c\u044b \u043f\u043e \u0441\u0443\u0442\u0438 \u0432\u044b\u043d\u043e\u0441\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u0442\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<pre><code>import React from \"react\"; import { SomeImperativeThing } from \".\/SomeImperativeThing\";  const Component = () => {   const [message, setMessage] = React.useState();   React.useEffect(() => {     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435     const someImperativeThing = new SomeImperativeThing(setMessage);     return () => {       \/\/ \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435       someImperativeThing.destroy();     };   }, []);   return (     &lt;div>       &lt;div>Component mounted&lt;\/div>       &lt;div>Mesage of the day {message}&lt;\/div>     &lt;\/div>   ); };  export default Component; <\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-solution-discus-18-require-clean-2-plsk1v\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 2<\/u><\/a> &#8212; \u0442\u043e\u0436\u0435 \u0447\u0442\u043e \u0438 \u043f\u0440\u0438\u043c\u0435\u0440 1, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u0435\u0449\u044c \u0432 ref \u0447\u0442\u043e\u0431\u044b \u043a \u043d\u0435\u0439 \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0443\u043f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0445\u0443\u043a\u0430 useEffect, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a 10 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u043e\u0442\u043e\u0441\u043b\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-solution-discus-18-require-clean-3-dqj24k\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 3<\/u><\/a> &#8212; \u0442\u043e\u0436\u0435 \u0447\u0442\u043e \u0438 \u043f\u0440\u0438\u043c\u0435\u0440 1, \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<h3>\u042d\u0444\u0444\u0435\u043a\u0442, \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 1 \u0440\u0430\u0437 \u043d\u0430 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-solution-discus-18-run-once-ub276b\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/u><\/a> &#8212; \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 ref \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0430.<\/p>\n<pre><code>const Component = () => {   const didLogRef = React.useRef(false);    React.useEffect(() => {     if (didLogRef.current === false) {       \/\/ \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437,       didLogRef.current = true;       SomeTrackingAPI.logImpression();     }   }, []);    return &lt;>Component Loaded&lt;\/>; }; <\/code><\/pre>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c debounce \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-solution-react-refresh-adapt-debounce-2-iw4dbp?file=\/src\/Component.tsx\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/u><\/a><\/p>\n<p>\u041a\u043e\u0434 \u043d\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code>const Component = () => {   const [state, setState] = React.useState&lt;number | null>();    React.useEffect(() => {     setState(Date.now());     console.log(\"mount enabled\");     return () => {       console.log(\"unmount enabled\");       setState(null);     };   }, []);    React.useEffect(() => {     console.log(\"state changed enabled\", state);   }, [state]);    return (     &lt;div>       &lt;div>The not adapted component is loaded&lt;\/div>       &lt;div>         &lt;button onClick={() => setState(Date.now())}>Change State&lt;\/button>       &lt;\/div>       &lt;div>State: {state}&lt;\/div>     &lt;\/div>   ); };  <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439:<\/p>\n<pre><code>const Component = () => {   const [state, setState] = React.useState&lt;number | null>();   const d = React.useRef&lt;null | TDebounce>(null);   React.useEffect(() => {     if (d.current === null) {       d.current = debounce();     }     const f = d.current;     if (f.effect(\"mount\")) {       setState(Date.now());       console.log(\"mount enabled\");     } else {       console.log(\"sim mount disabled\");     }     return () => {       f.unmount(() => {         console.log(\"unmount enabled Component Adapt\");         setState(null);       });     };   }, []);    React.useEffect(() => {     if (d.current?.effect(\"change\")) {       console.log(\"state changed enabled\", state);     } else {       console.log(\"sim state changed disabled\");     }   }, [state]);    return (     &lt;div>       &lt;div>The adapted component is loaded&lt;\/div>       &lt;div>         &lt;button onClick={() => setState(Date.now())}>Change State&lt;\/button>       &lt;\/div>       &lt;div>State: {state}&lt;\/div>     &lt;\/div>   ); }; <\/code><\/pre>\n<p>\u041a\u043e\u0434 debounce:<\/p>\n<pre><code>enum EDebounceState {   BeforeReMount,   AfterReMount }  interface IDebounce {   (): { effect: (name: string) => boolean; unmount: (cb: Function) => void }; }  export const debounce: IDebounce = () => {   let state: EDebounceState = EDebounceState.BeforeReMount;   const triggerReMount = new Set&lt;string>();   let timeoutUnMountCancel: ReturnType&lt;typeof setTimeout> | null = null;   const effect = (name: string) => {     if (timeoutUnMountCancel) {       console.log(\"sim unmount disabled\");       clearTimeout(timeoutUnMountCancel);       timeoutUnMountCancel = null;     }     if (state === EDebounceState.AfterReMount) {       if (triggerReMount.has(name)) return true;       triggerReMount.add(name);       return false;     }     return true;   };   const unmount = (cb: Function) => {     timeoutUnMountCancel = setTimeout(() => cb());     state = EDebounceState.AfterReMount;     triggerReMount.clear();   };   return {     effect,     unmount   }; }; <\/code><\/pre>\n<p>debounce  \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>effect(name &#8212; \u0438\u043c\u044f \u044d\u0444\u0435\u0435\u043a\u0442\u0430) &#8212; \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043c\u043e\u0436\u0435\u0442 \u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>unmount(cb) &#8212; \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0442.\u0435. \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f. \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043b\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430 debounce \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0411\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041a\u0430\u0436\u0434\u043e\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0441\u044f. \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0438\u043c\u0435\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 effect.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0414\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0430\u043c\u044b\u043c \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh, \u044f \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e f5 \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442, \u0435\u0433\u043e \u0432\u0432\u0435\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.  \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0412\u0430\u0448\u0435 \u043c\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p><a href=\"https:\/\/mrdramm.netlify.app\/posts\/reshenie-problemy-s-mnogokratnym-zapuskom-effektov-v-react-18\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u043c\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435<\/u><\/a> \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c<\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#new-strict-mode-behaviors\" rel=\"noopener noreferrer nofollow\"><u>New Strict Mode Behaviors<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/frontend-stuff.com\/blog\/react-fast-refresh\/\" rel=\"noopener noreferrer nofollow\"><u>React Fast Refresh<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/18\" rel=\"noopener noreferrer nofollow\"><u>#18 How to support Reusable State in Effects<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" rel=\"noopener noreferrer nofollow\"><u>#19 Adding Reusable State to StrictMode<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/articles\/712196\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u041a\u0430\u043a \u0432\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0437\u043e\u0432\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 reusable state?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">37.5% <\/span><span class=\"tm-article-poll__answer-label\">\u043d\u0438\u043a\u0430\u043a<\/span><span class=\"tm-article-poll__answer-votes\">9<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 37.5%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">16.67% <\/span><span class=\"tm-article-poll__answer-label\">\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e strict mode \u0438 react fast refresh<\/span><span class=\"tm-article-poll__answer-votes\">4<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 16.67%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">25% <\/span><span class=\"tm-article-poll__answer-label\">\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e strict mode<\/span><span class=\"tm-article-poll__answer-votes\">6<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 25%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">0% <\/span><span class=\"tm-article-poll__answer-label\">\u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e react fast refresh<\/span><span class=\"tm-article-poll__answer-votes\">0<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 0%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">12.5% <\/span><span class=\"tm-article-poll__answer-label\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432<\/span><span class=\"tm-article-poll__answer-votes\">3<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 12.5%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">12.5% <\/span><span class=\"tm-article-poll__answer-label\">\u0443 \u043c\u0435\u043d\u044f \u0441\u0432\u043e\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/span><span class=\"tm-article-poll__answer-votes\">3<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 12.5%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 24 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.    \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0438\u0441\u044c 5 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/712196\/\"> https:\/\/habr.com\/ru\/articles\/712196\/<\/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<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React 18  \u043a \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0437\u043e\u0432\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c (Reusable State). \u041f\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f  \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432: useEffect, useLayoutEffect, useInsertionEffect \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 componentDidMount, componentWillUnmount. \u0414\u0430\u043b\u0435\u0435 \u044f \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0445\u0443\u043a\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e  React 18 StrictMode \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh. \u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u0432 <a href=\"https:\/\/codesandbox.io\" rel=\"noopener noreferrer nofollow\"><u>codesandbox<\/u><\/a>, React \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c StrictMode.<\/p>\n<p> React 18 \u0432\u044b\u0448\u0435\u043b \u0432 \u043c\u0430\u0440\u0442\u0435 2022 \u0433\u043e\u0434\u0430, \u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0432\u044b\u043c. \u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0443\u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 \u0441\u0442\u0430\u0442\u044c\u044f\u0445:  <a href=\"https:\/\/habr.com\/ru\/post\/577168\/\" rel=\"noopener noreferrer nofollow\"><u>React 18: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<\/u><\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/company\/domclick\/blog\/689152\/\" rel=\"noopener noreferrer nofollow\"><u>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f React 18<\/u><\/a>, \u043d\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430  \u0442\u0435\u043c\u0443 Reusable State \u0438 Strict Mode \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 \u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<h2>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u0442\u044c\u0438<\/h2>\n<p>\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c  \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u044b. \u0412\u0442\u043e\u0440\u043e\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u044d\u0442\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u0430\u043d\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0435.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u044f \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0435 \u0437\u0440\u044f \u0438 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u043c\u0443 \u043e\u0442\u0437\u044b\u0432\u0443, \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0438 Reusable State<\/h2>\n<h3>Reusable State<\/h3>\n<p>\u042d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Reusable State, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0447\u0442\u043e Reusable State \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 <a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html#what-is-concurrent-react\" rel=\"noopener noreferrer nofollow\"><u>Concurrent React<\/u><\/a> (\u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0430\u0431\u0437\u0430\u0446 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435).<\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e \u0442\u0430\u043a: \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useState \u0438\u043b\u0438 useRef \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f, \u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f Reusable State: \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c React \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<p><a href=\"https:\/\/ru.reactjs.org\/docs\/strict-mode.html#ensuring-reusable-state\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Strict Mode<\/u><\/a><\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c, \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u044b\u043c\u0438 \u043a \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<h3>\u041d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 React 18 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 React 17.<\/h3>\n<ul>\n<li>\n<p>\u041c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435(React17\/React18) &#8212; \u0437\u0430\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f(React18) &#8212; \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (React18)- \u0437\u0430\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0435), \u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0438 \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e 2 \u0440\u0430\u0437\u0430, \u0442.\u0435. \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442.\u0435. \u0434\u0430\u0436\u0435 \u043d\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/reactjs.org\/docs\/refs-and-the-dom.html\" rel=\"noopener noreferrer nofollow\">ref<\/a> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u041d\u0430 reactwg github discussion \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043e 2 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f  \u0438 \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e React \u043f\u0440\u0438\u043d\u044f\u043b\u043e \u044d\u0442\u0443 \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0441 \u0434\u043e\u043b\u0435\u0439 \u043d\u0435\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/18\" rel=\"noopener noreferrer nofollow\"><u>#18 How to support Reusable State in Effects<\/u><\/a> &#8212; \u043a\u0430\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a Reusable State.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" rel=\"noopener noreferrer nofollow\"><u>#19 Adding Reusable State to StrictMode<\/u><\/a> &#8212; \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f Strict Mode<\/h3>\n<p>\u0422\u0443\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0430 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0430\u043f\u043e\u0432 \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:<\/p>\n<pre><code>root.render(   &lt;StrictMode>     &lt;App \/>   &lt;\/StrictMode> ); <\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/demo-1-mount-unmount-mount-sync-b6m14y\" rel=\"noopener noreferrer nofollow\"><u>\u0414\u0435\u043c\u043e \u043a\u043e\u0434<\/u><\/a> \u0438 \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code>const Component = () => {   const simulation = React.useRef(false);   console.log(\"render\");   React.useEffect(() => {     if (simulation.current) {       console.log(\"mount simulation\");     } else {       console.log(\"mount\");       simulation.current = true;     }     Promise.resolve().then(() => (simulation.current = false));     return () => {       if (simulation.current) {         console.log(\"unmount simulation\");       } else {         console.log(\"unmount \");       }     };   }, []);   return &lt;>Component Mounted&lt;\/>; }; <\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438  \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<p><code>render<\/code><br \/><code>render<\/code><br \/><code>mount<\/code><br \/><code>unmount simulation<\/code><br \/><code>mount simulation<\/code><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e NextJS:<\/p>\n<p><code>mount<\/code><\/p>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n<p><code>unmount<\/code><\/p>\n<p>Promise \u0432 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c simulation.current \u0432 false \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 &#171;mount&#187; \u0432\u043c\u0435\u0441\u0442\u043e &#171;unmount simulation&#187;. \u041f\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 Reusable State<\/h3>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 React \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Reusable State. \u041f\u043e\u043a\u0430 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043e \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. <a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/19\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a #19 Adding Reusable State to StrictMode<\/u><\/a><\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u044d\u0442\u043e Fast Refresh, \u043f\u0440\u0438\u0448\u043b\u0430 \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 <a href=\"https:\/\/webpack.js.org\/concepts\/hot-module-replacement\/\" rel=\"noopener noreferrer nofollow\"><u>HMR<\/u><\/a> \u0435\u0449\u0435 \u0432 React 16.9 <a href=\"https:\/\/github.com\/facebook\/create-react-app\/pull\/8582\" rel=\"noopener noreferrer nofollow\"><u>2020 \u0433\u043e\u0434\u0443<\/u><\/a> \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f.  \u0421\u0435\u0433\u043e\u0434\u043d\u044f Fast Refresh \u0443\u0436\u0435 \u043d\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438  \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 React \u0438 React Native. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438 \u0444\u0430\u0439\u043b \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 reusable state, \u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0439\u0434\u0435\u0442 \u0438\u0437 \u0441\u0442\u0440\u043e\u044f \u0438\u0437-\u0437\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0424\u0443\u043d\u043a\u0446\u0438\u044f Fast Refresh \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435: <a href=\"https:\/\/frontend-stuff.com\/blog\/react-fast-refresh\/\" rel=\"noopener noreferrer nofollow\"><u>React Fast Refresh<\/u><\/a><\/p>\n<p>\u041f\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>\u0423 \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 \u044d\u0442\u043e \u0445\u0443\u043a\u0438 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c, \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0442.\u0435. \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a useEffect, useReducer, useCallback<\/p>\n<\/li>\n<li>\n<p>\u0423 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 componentDidMount, componentWillUnmount<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 Fast Refresh:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nextjs.org\/docs\/basic-features\/fast-refresh\" rel=\"noopener noreferrer nofollow\"><u>NextJS<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/local-development\/fast-refresh\/\" rel=\"noopener noreferrer nofollow\"><u>Gatsby<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/reactnative.dev\/docs\/fast-refresh\" rel=\"noopener noreferrer nofollow\"><u>React Native<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Offscreen API &#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0441 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a content-visibility. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React Native. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<h2>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443: \u041f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c.  \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 (side effect) &#8212; \u044d\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c: \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 API, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u0442.\u0434. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u043f\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443 \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f 1 \u0440\u0430\u0437, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e Strict Mode \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React Fast Refresh. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b React Fast Refresh \u0438 Reusable State \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0435\u0449\u0435 \u0434\u043e 18 \u0432\u0435\u0440\u0441\u0438\u0438 React, \u0430 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Strict Mode \u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0435\u043b\u0435\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 18  \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043e, \u0436\u0434\u0435\u043c \u043d\u043e\u0432\u043e\u0435 API.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \/ \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>StrictMode \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e:  mount > simulation unmount > mount<\/p>\n<\/li>\n<li>\n<p>React Resfresh \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430: unmount > mount<\/p>\n<\/li>\n<\/ul>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c <a href=\"https:\/\/codesandbox.io\/s\/problem-effect-reusable-state-and-fast-reload-7zoge8\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/u><\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u0432 \u043d\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c Strict Mode \u0438 React Fast Refresh \u043f\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0434\u0443\u043b\u044f. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u043e\u0441\u044c, \u0434\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043c\u0435\u0448\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0448\u044c \u0432 \u0447\u0435\u043c \u0434\u0435\u043b\u043e \u0438 \u043d\u0435 \u043b\u0435\u043d\u044c \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u043e\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u0440\u043e\u0433\u043e, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u0435\u0433\u043e \u043d\u0430 \u043d\u043e\u0432\u043e\u0435.<\/p>\n<pre><code>  React.useEffect(() => {     setState((prev) => prev + 1);     return () => {       console.log(\"useEffect unmount:\");     };   }, []); <\/code><\/pre>\n<h3>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/ru.reactjs.org\/docs\/refs-and-the-dom.html\" rel=\"noopener noreferrer nofollow\"><u>ref<\/u><\/a>  &#8212; \u0432 \u043e\u0444\u0444 \u0434\u043e\u043a\u0435, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ref \u0434\u043b\u044f \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a HTML DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u043e ref \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f ref \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 stateless \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a redux, mobx \u0438 \u0442.\u0434. \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 stateless \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432), \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. <a href=\"https:\/\/codesandbox.io\/s\/redux-toolkit-counter-pojq5t\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0440\u0438\u043c\u0435\u0440 Redux<\/u><\/a><\/p>\n<p>\u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438  &#171;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c debounce \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432&#187;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043d\u0438\u0437\u044f\u0442 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 &#8212; \u0442\u0430\u043a \u043a\u0430\u043a  react refresh \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442, \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0442\u043e \u043a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435. \u0411\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438  \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a react 18 &#8212; \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c strict mode, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 react query \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c 2 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c Strict Mode.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 &#8212; \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 react query \u043c\u043e\u0436\u043d\u043e \u0441 <\/p>\n<\/li>\n<\/ul>\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-395185","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/395185","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=395185"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/395185\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=395185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=395185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=395185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}