{"id":310372,"date":"2020-09-23T15:00:37","date_gmt":"2020-09-23T15:00:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=310372"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=310372","title":{"rendered":"ReactJS: \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e \u0445\u0443\u043a\u0430\u043c"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/520370\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sj\/uf\/xu\/sjufxuqiadew2_zg3veuhlac7em.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0445\u0443\u043a\u0430\u043c React: useState, useEffect, useLayoutEffect, useContext, useReducer, useCallback, useMemo \u0438 UseRef.<\/p>\n<p>  \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f: <a href=\"https:\/\/blog.logrocket.com\/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70\/\" rel=\"nofollow\">React Hooks cheat sheet: Unlock solutions to common problems<\/a>.<\/p>\n<p>  \u0426\u0435\u043b\u044c \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0430 \u2014 \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0445\u0443\u043a\u0430. \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 <a href=\"https:\/\/github.com\/harryheman\/JS-CSS-Exps\/tree\/master\/react-hooks-cheatsheet\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<ol>\n<li>\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438: npm i<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c: npm start<\/li>\n<\/ol>\n<p>  \u0425\u0443\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u00abhooks\u00bb. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u2014 index.js. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0445\u0443\u043a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>useState<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usestate\" rel=\"nofollow\">useState<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h5>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/h5>\n<p>  \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c useState \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: useState(initialValue).<\/p>\n<pre><code class=\"javascript\">const DeclareState = () =&gt; {   const [count] = useState(1);   return &lt;div&gt;\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 - {count}.&lt;\/div&gt;; }; <\/code><\/pre>\n<p>  <\/p>\n<h5>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/h5>\n<p>  \u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0443\u044e useState: const [state, updater] = useState(initialValue).<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const UpdateState = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age + 1);    return (     &lt;&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/ExKGeOE?height=300&amp;slug-hash=ExKGeOE&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h5>\n<p>  \u0412 \u043e\u0434\u043d\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const MultStates = () =&gt; {   const [age, setAge] = useState(19);   const [num, setNum] = useState(1);    const handleAge = () =&gt; setAge(age + 1);   const handleNum = () =&gt; setNum(num + 1);    return (     &lt;&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u0423 \u043c\u0435\u043d\u044f {num} \u0431\u0440\u0430\u0442\u044c\u0435\u0432 \u0438 \u0441\u0435\u0441\u0442\u0435\u0440.&lt;\/p&gt;       &lt;button onClick={handleAge}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;       &lt;button onClick={handleNum}&gt;\u0411\u043e\u043b\u044c\u0448\u0435 \u0431\u0440\u0430\u0442\u044c\u0435\u0432 \u0438 \u0441\u0435\u0441\u0442\u0435\u0440!&lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/abNPRNQ?height=300&amp;slug-hash=abNPRNQ&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/h5>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0441\u0442\u0440\u043e\u043a \u0438 \u0447\u0438\u0441\u0435\u043b, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e useStateUpdater \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 \u043d\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c.<\/p>\n<pre><code class=\"javascript\">\/\/ setState (\u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432) - useState (\u0437\u0430\u043c\u0435\u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430) \/\/ \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 - {name: &quot;Igor&quot;}  setState({ age: 30 }); \/\/ \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \/\/ {name: &quot;Igor&quot;, age: 30} - \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0438\u0441\u044c  useStateUpdater({ age: 30 }); \/\/ \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \/\/ {age: 30} - \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u043d\u0435\u043d <\/code><\/pre>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const StateObject = () =&gt; {   const [state, setState] = useState({ age: 19, num: 1 });   const handleClick = (val) =&gt;     setState({       ...state,       [val]: state[val] + 1,     });   const { age, num } = state;    return (     &lt;&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u0423 \u043c\u0435\u043d\u044f {num} \u0431\u0440\u0430\u0442\u044c\u0435\u0432 \u0438 \u0441\u0435\u0441\u0442\u0435\u0440.&lt;\/p&gt;       &lt;button onClick={() =&gt; handleClick('age')}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;       &lt;button onClick={() =&gt; handleClick('num')}&gt;\u0411\u043e\u043b\u044c\u0448\u0435 \u0431\u0440\u0430\u0442\u044c\u0435\u0432 \u0438 \u0441\u0435\u0441\u0442\u0435\u0440!&lt;\/button&gt;     &lt;\/&gt;   ); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/MWyZPbV?height=300&amp;slug-hash=MWyZPbV&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/h5>\n<p>  \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439.<\/p>\n<pre><code class=\"javascript\">const StateFun = () =&gt; {   const [token] = useState(() =&gt; {     const token = localStorage.getItem(&quot;token&quot;);     return token || &quot;default-token&quot;;   });    return &lt;div&gt;\u0422\u043e\u043a\u0435\u043d - {token}&lt;\/div&gt;; }; <\/code><\/pre>\n<p>  <\/p>\n<h5>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e setState<\/h5>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0430\u044f useState, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e setState.<\/p>\n<pre><code class=\"javascript\">const [value, updateValue] = useState(0); \/\/ \u043e\u0431\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c\u0438 updateValue(1); updateValue((prevVal) =&gt; prevVal + 1); <\/code><\/pre>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const CounterState = () =&gt; {   const [count, setCount] = useState(0);    return (     &lt;&gt;       &lt;p&gt;\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0440\u0430\u0432\u043d\u043e {count}.&lt;\/p&gt;       &lt;button onClick={() =&gt; setCount(0)}&gt;\u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c&lt;\/button&gt;       &lt;button onClick={() =&gt; setCount((prevVal) =&gt; prevVal + 1)}&gt;         \u041f\u043b\u044e\u0441 (+)       &lt;\/button&gt;       &lt;button onClick={() =&gt; setCount((prevVal) =&gt; prevVal - 1)}&gt;         \u041c\u0438\u043d\u0443\u0441 (-)       &lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/yLOGRgv?height=300&amp;slug-hash=yLOGRgv&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3>useEffect<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#useeffect\" rel=\"nofollow\">useEffect<\/a> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443\u044e \u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 (\u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435) \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<h5>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const BasicEffect = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age + 1);    useEffect(() =&gt; {     document.title = `\u0422\u0435\u0431\u0435 ${age} \u043b\u0435\u0442!`;   });    return (     &lt;&gt;       &lt;p&gt;\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.&lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a!&lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/bGpOmWW?height=300&amp;slug-hash=bGpOmWW&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 (\u043e\u0442\u043c\u0435\u043d\u0430) \u044d\u0444\u0444\u0435\u043a\u0442\u0430<\/h5>\n<p>  \u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c useEffect. \u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 addEventListener.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const CleanupEffect = () =&gt; {   useEffect(() =&gt; {     const clicked = () =&gt; console.log(&quot;\u041a\u043b\u0438\u043a!&quot;);     window.addEventListener(&quot;click&quot;, clicked);      return () =&gt; {       window.removeEventListener(&quot;click&quot;, clicked);     };   }, []);    return (     &lt;&gt;       &lt;p&gt;\u041f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.&lt;\/p&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/oNxJawK?height=300&amp;slug-hash=oNxJawK&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/h5>\n<p>  \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e useEffect.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const MultEffects = () =&gt; {   \/\/ \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u043e\u043c\u0435\u0440 \u0440\u0430\u0437   useEffect(() =&gt; {     const clicked = () =&gt; console.log(&quot;\u041a\u043b\u0438\u043a!&quot;);     window.addEventListener(&quot;click&quot;, clicked);      return () =&gt; {       window.removeEventListener(&quot;click&quot;, clicked);     };   }, []);    \/\/ \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u043e\u043c\u0435\u0440 \u0434\u0432\u0430   useEffect(() =&gt; {     console.log(&quot;\u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442.&quot;);   });    return (     &lt;&gt;       &lt;p&gt;\u0417\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.&lt;\/p&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/wvGRYrd?height=300&amp;slug-hash=wvGRYrd&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u044b\u0437\u043e\u0432 useEffect \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0435\u043c\u0443 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<h5>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const EffectDependency = () =&gt; {   const [randomInt, setRandomInt] = useState(0);   const [effectLogs, setEffectLogs] = useState([]);   const [count, setCount] = useState(1)    useEffect(() =&gt; {     setEffectLogs((prevEffectLogs) =&gt; [       ...prevEffectLogs,       `\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u043e\u043c\u0435\u0440 ${count}.`,     ]);     setCount(count + 1)   }, [randomInt]);    return (     &lt;&gt;       &lt;h3&gt;{randomInt}&lt;\/h3&gt;       &lt;button onClick={() =&gt; setRandomInt(~~(Math.random() * 10))}&gt;         \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e!       &lt;\/button&gt;       &lt;ul&gt;         {effectLogs.map((effect, i) =&gt; (           &lt;li key={i}&gt;{&quot;  &quot;.repeat(i) + effect}&lt;\/li&gt;         ))}       &lt;\/ul&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/GRZPYQj?height=300&amp;slug-hash=GRZPYQj&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c useEffect \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c randomInt \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 randomInt.<\/p>\n<h5>\u041f\u0440\u043e\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0430 (\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432)<\/h5>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 useEffect \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const SkipEffect = () =&gt; {   const [randomInt, setRandomInt] = useState(0);   const [effectLogs, setEffectLogs] = useState([]);   const [count, setCount] = useState(1);    useEffect(() =&gt; {     setEffectLogs((prevEffectLogs) =&gt; [       ...prevEffectLogs,       `\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u043e\u043c\u0435\u0440 ${count}.`,     ]);     setCount(count + 1);   }, []);    return (     &lt;&gt;       &lt;h3&gt;{randomInt}&lt;\/h3&gt;       &lt;button onClick={() =&gt; setRandomInt(~~(Math.random() * 10))}&gt;         \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e!       &lt;\/button&gt;       &lt;ul&gt;         {effectLogs.map((effect, i) =&gt; (           &lt;li key={i}&gt;{&quot;  &quot;.repeat(i) + effect}&lt;\/li&gt;         ))}       &lt;\/ul&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/XWdoxqO?height=300&amp;slug-hash=XWdoxqO&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 useEffect \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h5>\u041f\u0440\u043e\u043f\u0443\u0441\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0430 (\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439)<\/h5>\n<p>  \u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code class=\"javascript\">useEffect(() =&gt; {   console.log(     &quot;\u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.&quot;   ); }); <\/code><\/pre>\n<p>  <\/p>\n<h3>useContext<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecontext\" rel=\"nofollow\">useContext<\/a> \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u043d \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 MyContext.Consumer \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useContext \u0438 Context.Consumer.<\/p>\n<pre><code class=\"javascript\">\/\/ \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Context const ThemeContext = React.createContext(&quot;dark&quot;)  \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 function Button() {     return (         &lt;ThemeContext.Consumer&gt;             {theme =&gt; &lt;button className={thene}&gt;\u0412\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430!&lt;\/button&gt;}         &lt;\/ThemeContext.Consumer&gt; }  \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 useContext import { useContext } from &quot;react&quot;  function ButtonHook() {     const theme = useContext(ThemeContext)     return &lt;button className={theme}&gt;\u0412\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430!&lt;\/button&gt; } <\/code><\/pre>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const ChangeTheme = () =&gt; {   const [mode, setMode] = useState(&quot;light&quot;);    const handleClick = () =&gt; {     setMode(mode === &quot;light&quot; ? &quot;dark&quot; : &quot;light&quot;);   };    const ThemeContext = React.createContext(mode);    const theme = useContext(ThemeContext);    return (     &lt;div       style={{         background: theme === &quot;light&quot; ? &quot;#eee&quot; : &quot;#222&quot;,         color: theme === &quot;light&quot; ? &quot;#222&quot; : &quot;#eee&quot;,         display: &quot;grid&quot;,         placeItems: &quot;center&quot;,         minWidth: &quot;320px&quot;,         minHeight: &quot;320px&quot;,         borderRadius: &quot;4px&quot;,       }}     &gt;       &lt;p&gt;\u0412\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0442\u0435\u043c\u0430: {theme}.&lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u041f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f&lt;\/button&gt;     &lt;\/div&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/vYGvVQK?height=300&amp;slug-hash=vYGvVQK&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3>useLayoutEffect<\/h3>\n<p>  \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#uselayouteffect\" rel=\"nofollow\">useLayoutEffect<\/a> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e useEffect, \u0437\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">  useLayoutEffect(() =&gt; {     \/\/ \u043a\u043e\u0434   }, [\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438]); <\/code><\/pre>\n<p>  <\/p>\n<h5>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f useEffect, \u043d\u043e \u0441 useLayoutEffect.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">  const [randomInt, setRandomInt] = useState(0);   const [effectLogs, setEffectLogs] = useState([]);   const [count, setCount] = useState(1);    useLayoutEffect(() =&gt; {     setEffectLogs((prevEffectLogs) =&gt; [       ...prevEffectLogs,       `\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u043e\u043c\u0435\u0440 ${count}.`,     ]);     setCount(count + 1);   }, [randomInt]);    return (     &lt;&gt;       &lt;h3&gt;{randomInt}&lt;\/h3&gt;       &lt;button onClick={() =&gt; setRandomInt(~~(Math.random() * 10))}&gt;         \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e!       &lt;\/button&gt;       &lt;ul&gt;         {effectLogs.map((effect, i) =&gt; (           &lt;li key={i}&gt;{&quot;  &quot;.repeat(i) + effect}&lt;\/li&gt;         ))}       &lt;\/ul&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/OJNrBdj?height=300&amp;slug-hash=OJNrBdj&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>useLayoutEffect \u0438 useEffect<\/h5>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f \u0432 useEffect, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442.\u0435. \u043f\u043e\u0441\u043b\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, useEffect \u043d\u0435 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u044b\u0431\u043e\u0440. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c useLayoutEffect. \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f useLayoutEffect, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<h3>useReducer<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usereducer\" rel=\"nofollow\">useReducer<\/a> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 useState, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.<\/p>\n<h5>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u043c\u0435\u0441\u0442\u043e useState \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f useReducer. \u0412\u044b\u0437\u043e\u0432 useReducer \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e dispatch.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const initialState = { width: 30 };  const reducer = (state, action) =&gt; {   switch (action) {     case &quot;plus&quot;:       return { width: Math.min(state.width + 30, 600) };     case &quot;minus&quot;:       return { width: Math.max(state.width - 30, 30) };     default:       throw new Error(&quot;\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?&quot;);   } };  const BasicReducer = () =&gt; {   const [state, dispath] = useReducer(reducer, initialState);   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;    return (     &lt;&gt;       &lt;div         style={{           margin: &quot;0 auto&quot;,           background: color,           height: &quot;100px&quot;,           width: state.width,         }}       &gt;&lt;\/div&gt;       &lt;button onClick={() =&gt; dispath(&quot;plus&quot;)}&gt;         \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;       &lt;button onClick={() =&gt; dispath(&quot;minus&quot;)}&gt;         \u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/NWNeOVY?height=300&amp;slug-hash=NWNeOVY&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u041e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f (\u00ab\u043b\u0435\u043d\u0438\u0432\u0430\u044f\u00bb) \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h5>\n<p>  useReducer \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0440\u0435\u0442\u0438\u0439 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0443\u044e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 initialState \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const initializeState = () =&gt; ({   width: 90, });  \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a initializeState \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 const initialState = { width: 0 };  const reducer = (state, action) =&gt; {   switch (action) {     case &quot;plus&quot;:       return { width: Math.min(state.width + 30, 600) };     case &quot;minus&quot;:       return { width: Math.max(state.width - 30, 30) };     default:       throw new Error(&quot;\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?&quot;);   } };  const LazyState = () =&gt; {   const [state, dispath] = useReducer(reducer, initialState, initializeState);   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;    return (     &lt;&gt;       &lt;div         style={{           margin: &quot;0 auto&quot;,           background: color,           height: &quot;100px&quot;,           width: state.width,         }}       &gt;&lt;\/div&gt;       &lt;button onClick={() =&gt; dispath(&quot;plus&quot;)}&gt;         \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;       &lt;button onClick={() =&gt; dispath(&quot;minus&quot;)}&gt;         \u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/abNPReo?height=300&amp;slug-hash=abNPReo&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u0418\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f this.setState<\/h5>\n<p>  useReducer \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0440\u0435\u0434\u0443\u043a\u0442\u043e\u0440, \u043a\u0430\u043a Redux. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u043f\u0435\u0440\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0434\u0443\u043a\u0442\u043e\u0440\u0443, \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 type. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u043d\u0430\u0448\u0435 \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const initialState = { width: 30 };  const reducer = (state, newState) =&gt; ({   ...state,   width: newState.width, });  const NewState = () =&gt; {   const [state, setState] = useReducer(reducer, initialState);   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;    return (     &lt;&gt;       &lt;div         style={{           margin: &quot;0 auto&quot;,           background: color,           height: &quot;100px&quot;,           width: state.width,         }}       &gt;&lt;\/div&gt;       &lt;button onClick={() =&gt; setState({ width: 300 })}&gt;         \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;       &lt;button onClick={() =&gt; setState({ width: 30 })}&gt;         \u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.       &lt;\/button&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/XWdoyJv?height=300&amp;slug-hash=XWdoyJv&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3>useCallback<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\" rel=\"nofollow\">useCallback<\/a> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 (\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439) \u043a\u043e\u043b\u0431\u044d\u043a.<\/p>\n<h5>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const CallbackTemplate = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age &lt; 100 ? age + 1 : age);   const someValue = &quot;some value&quot;;   const doSomething = () =&gt; someValue;    return (     &lt;&gt;       &lt;Age age={age} handleClick={handleClick} \/&gt;       &lt;Guide doSomething={doSomething} \/&gt;     &lt;\/&gt;   ); };  const Age = ({ age, handleClick }) =&gt; {   return (     &lt;div&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/div&gt;   ); };  const Guide = React.memo((props) =&gt; {   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;   return (     &lt;div style={{ background: color, padding: &quot;.4rem&quot; }}&gt;       &lt;p style={{ color: color, filter: &quot;invert()&quot; }}&gt;         \u0421\u043b\u0435\u0434\u0443\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e.       &lt;\/p&gt;     &lt;\/div&gt;   ); }); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/vYGvQNx?height=300&amp;slug-hash=vYGvQNx&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Age \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Guide \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u043e\u043f\u0441\u0443 doSomething \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043b\u0431\u044d\u043a. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 Guide \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f React.memo \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043e\u043d \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u041a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c?<\/p>\n<h5>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const BasicCallback = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age &lt; 100 ? age + 1 : age);   const someValue = &quot;some value&quot;;   const doSomething = useCallback(() =&gt; someValue, [someValue]);    return (     &lt;&gt;       &lt;Age age={age} handleClick={handleClick} \/&gt;       &lt;Guide doSomething={doSomething} \/&gt;     &lt;\/&gt;   ); };  const Age = ({ age, handleClick }) =&gt; {   return (     &lt;div&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/div&gt;   ); };  const Guide = React.memo((props) =&gt; {   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;   return (     &lt;div style={{ background: color, padding: &quot;.4rem&quot; }}&gt;       &lt;p style={{ color: color, filter: &quot;invert()&quot; }}&gt;         \u0421\u043b\u0435\u0434\u0443\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e.       &lt;\/p&gt;     &lt;\/div&gt;   ); }); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/OJNraMz?height=300&amp;slug-hash=OJNraMz&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<h5>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 useCallback<\/h5>\n<p>  useCallback \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const InlineCallback = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age &lt; 100 ? age + 1 : age);   const someValue = &quot;some value&quot;;    return (     &lt;&gt;       &lt;Age age={age} handleClick={handleClick} \/&gt;       &lt;Guide doSomething={useCallback(() =&gt; someValue, [someValue])} \/&gt;     &lt;\/&gt;   ); };  const Age = ({ age, handleClick }) =&gt; {   return (     &lt;div&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/div&gt;   ); };  const Guide = React.memo((props) =&gt; {   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;   return (     &lt;div style={{ background: color, padding: &quot;.4rem&quot; }}&gt;       &lt;p style={{ color: color, filter: &quot;invert()&quot; }}&gt;         \u0421\u043b\u0435\u0434\u0443\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e.       &lt;\/p&gt;     &lt;\/div&gt;   ); }); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/LYNMXZZ?height=300&amp;slug-hash=LYNMXZZ&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3>useMemo<\/h3>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usememo\" rel=\"nofollow\">useMemo<\/a> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0435 (\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<h5>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const MemoTemplate = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age &lt; 100 ? age + 1 : age);   const someValue = { value: &quot;some value&quot; };   const doSomething = () =&gt; someValue;    return (     &lt;&gt;       &lt;Age age={age} handleClick={handleClick} \/&gt;       &lt;Guide doSomething={doSomething} \/&gt;     &lt;\/&gt;   ); };  const Age = ({ age, handleClick }) =&gt; {   return (     &lt;div&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/div&gt;   ); };  const Guide = React.memo((props) =&gt; {   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;   return (     &lt;div style={{ background: color, padding: &quot;.4rem&quot; }}&gt;       &lt;p style={{ color: color, filter: &quot;invert()&quot; }}&gt;         \u0421\u043b\u0435\u0434\u0443\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e.       &lt;\/p&gt;     &lt;\/div&gt;   ); }); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/MWyZzjR?height=300&amp;slug-hash=MWyZzjR&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u043c\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0443 useCallback, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e someValue \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Guide \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 React.memo.<\/p>\n<p>  \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0412\u0435\u0434\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c, \u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 someValue \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435. \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u0438?<\/p>\n<h5>\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h5>\n<p>  \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 doSomething, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useMemo. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const BasicMemo = () =&gt; {   const [age, setAge] = useState(19);   const handleClick = () =&gt; setAge(age &lt; 100 ? age + 1 : age);   const someValue = () =&gt; ({ value: &quot;some value&quot; });   const doSomething = useMemo(() =&gt; someValue, []);    return (     &lt;&gt;       &lt;Age age={age} handleClick={handleClick} \/&gt;       &lt;Guide doSomething={doSomething} \/&gt;     &lt;\/&gt;   ); };  const Age = ({ age, handleClick }) =&gt; {   return (     &lt;div&gt;       &lt;p&gt;\u041c\u043d\u0435 {age} \u043b\u0435\u0442.&lt;\/p&gt;       &lt;p&gt;\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;\/p&gt;       &lt;button onClick={handleClick}&gt;\u0421\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0448\u0435!&lt;\/button&gt;     &lt;\/div&gt;   ); };  const Guide = React.memo((props) =&gt; {   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;   return (     &lt;div style={{ background: color, padding: &quot;.4rem&quot; }}&gt;       &lt;p style={{ color: color, filter: &quot;invert()&quot; }}&gt;         \u0421\u043b\u0435\u0434\u0443\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e.       &lt;\/p&gt;     &lt;\/div&gt;   ); }); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/RwaEqpZ?height=300&amp;slug-hash=RwaEqpZ&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>useRef<\/h5>\n<p>  <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#useref\" rel=\"nofollow\">useRef<\/a> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 ref. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abcurrent\u00bb. \u0414\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: useRef(initialValue). \u041e\u0431\u044a\u0435\u043a\u0442 ref \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h5>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a DOM<\/h5>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const DomAccess = () =&gt; {   const textareaEl = useRef(null);   const handleClick = () =&gt; {     textareaEl.current.value =       &quot;\u0422\u044b - \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0437\u0443\u0447\u0430\u044e\u0449\u0438\u0439 \u0445\u0443\u043a\u0438. \u0414\u0430, \u043a\u044d\u043f \u0441\u043d\u043e\u0432\u0430 \u0432 \u0434\u0435\u043b\u0435!&quot;;     textareaEl.current.focus();   };   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;    return (     &lt;&gt;       &lt;button onClick={handleClick}&gt;         \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.       &lt;\/button&gt;       &lt;label htmlFor=&quot;msg&quot;&gt;         \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.       &lt;\/label&gt;       &lt;textarea ref={textareaEl} id=&quot;msg&quot; \/&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/wvGRQdx?height=300&amp;slug-hash=wvGRQdx&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b (\u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438)<\/h5>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 ref \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const StringVal = () =&gt; {   const textareaEl = useRef(null);   const stringVal = useRef(     &quot;\u0422\u044b - \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0437\u0443\u0447\u0430\u044e\u0449\u0438\u0439 \u0445\u0443\u043a\u0438. \u0414\u0430, \u043a\u044d\u043f \u0441\u043d\u043e\u0432\u0430 \u0432 \u0434\u0435\u043b\u0435!&quot;   );   const handleClick = () =&gt; {     textareaEl.current.value = stringVal.current;     textareaEl.current.focus();   };   const color = `#${((Math.random() * 0xfff) &lt;&lt; 0).toString(16)}`;    return (     &lt;&gt;       &lt;button onClick={handleClick}&gt;         \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.       &lt;\/button&gt;       &lt;label htmlFor=&quot;msg&quot;&gt;       \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.       &lt;\/label&gt;       &lt;textarea ref={textareaEl} id=&quot;msg&quot; \/&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/MWyZzoM?height=300&amp;slug-hash=MWyZzoM&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  useRef \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0441 \u0446\u0435\u043b\u044c\u044e \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.<\/p>\n<p>  \u041a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const IntervalRef = () =&gt; {   const [time, setTime] = useState(0);   const setIntervalRef = useRef();    useEffect(() =&gt; {     const id = setInterval(() =&gt; {       setTime((time) =&gt; (time = new Date().toLocaleTimeString()));     }, 1000);      setIntervalRef.current = id;      return () =&gt; clearInterval(setIntervalRef.current);   }, [time]);    return (     &lt;&gt;       &lt;p&gt;\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f:&lt;\/p&gt;       &lt;time&gt;{time}&lt;\/time&gt;     &lt;\/&gt;   ); }; <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/dyMwQVW?height=300&amp;slug-hash=dyMwQVW&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/520370\/\"> https:\/\/habr.com\/ru\/post\/520370\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/520370\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sj\/uf\/xu\/sjufxuqiadew2_zg3veuhlac7em.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0445\u0443\u043a\u0430\u043c React: useState, useEffect, useLayoutEffect, useContext, useReducer, useCallback, useMemo \u0438 UseRef.<\/p>\n<p>  \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f: <a href=\"https:\/\/blog.logrocket.com\/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70\/\" rel=\"nofollow\">React Hooks cheat sheet: Unlock solutions to common problems<\/a>.<\/p>\n<p>  \u0426\u0435\u043b\u044c \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0430 \u2014 \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0445\u0443\u043a\u0430. \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 <a href=\"https:\/\/github.com\/harryheman\/JS-CSS-Exps\/tree\/master\/react-hooks-cheatsheet\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<ol>\n<li>\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438: npm i<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c: npm start<\/li>\n<\/ol>\n<p>  \u0425\u0443\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u00abhooks\u00bb. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u2014 index.js. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0445\u0443\u043a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-310372","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/310372","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=310372"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/310372\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=310372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=310372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=310372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}