{"id":21438,"date":"2023-05-05T13:48:59","date_gmt":"2023-05-05T10:18:59","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/"},"modified":"2023-05-05T13:48:59","modified_gmt":"2023-05-05T10:18:59","slug":"a-beginners-guide-to-useeffect-3ej4","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/","title":{"rendered":"\ud83c\udf89 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0641\u06a9\u062a"},"content":{"rendered":"<div data-article-id=\"1458179\" id=\"article-body\">\n<p><\/p>\n<p>\u0628\u0647 \u062f\u0646\u06cc\u0627\u06cc React Hooks \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f!  \u0627\u0645\u0631\u0648\u0632\u060c \u0645\u0627 \u0628\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0647\u0627 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645: <code>useEffect<\/code>.  \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!  \ud83d\ude80<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u0645\u0628\u062a\u062f\u06cc\u0627\u0646-\u0628\u0631\u0627\u06cc-\u0627\u0633\u062a\u0641\u0627\u062f\u0647-\u0627\u0632-\u0627\u0641\u06a9\u062a.svg.png\" alt=\"react-useeffect-hook-cleanup\" loading=\"lazy\" width=\"531\" height=\"706\" title=\"\"><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/#%F0%9F%93%9A_%DA%86%DB%8C%D8%B3%D8%AA_useEffect\" >\ud83d\udcda \u0686\u06cc\u0633\u062a useEffect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/#%F0%9F%A7%AA_%DA%86%DA%AF%D9%88%D9%86%D9%87_useEffect_%D8%A2%D8%AB%D8%A7%D8%B1\" >\ud83e\uddea \u0686\u06af\u0648\u0646\u0647 useEffect \u0622\u062b\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/#%E2%9A%A1_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%D8%AE%D8%AA%D9%84%D9%81\" >\u26a1 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062e\u062a\u0644\u0641<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/#%F0%9F%93%9D_%D9%86%D9%85%D9%88%D9%86%D9%87_%D9%87%D8%A7%DB%8C%DB%8C_%D8%A7%D8%B2_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_useEffect_%F0%9F%93%9D\" >\ud83d\udcdd \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 useEffect \ud83d\udcdd<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-useeffect-3ej4\/#%D9%85%D8%AB%D8%A7%D9%84_1_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\" >\u0645\u062b\u0627\u0644 1: \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%9A_%DA%86%DB%8C%D8%B3%D8%AA_useEffect\"><\/span>\n<p>  \ud83d\udcda \u0686\u06cc\u0633\u062a <code>useEffect<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>useEffect<\/code>  \u0647\u0633\u062a \u06cc\u06a9 <strong>\u0648\u0627\u06a9\u0646\u0634 \u0647\u0648\u06a9<\/strong> \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u062e\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.  \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062e\u0627\u0631\u062c \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u06cc\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627.  \u0628\u0627 <code>useEffect<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0644\u0627\u0633 \u06cc\u0627 \u062a\u0627\u0628\u0639 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.  \ud83c\udf89<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A7%AA_%DA%86%DA%AF%D9%88%D9%86%D9%87_useEffect_%D8%A2%D8%AB%D8%A7%D8%B1\"><\/span>\n<p>  \ud83e\uddea \u0686\u06af\u0648\u0646\u0647 <code>useEffect<\/code> \u0622\u062b\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>useEffect<\/code>  \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0686\u0627\u0642\u0648\u06cc \u0627\u0631\u062a\u0634 \u0633\u0648\u0626\u06cc\u0633 \ud83c\udde8\ud83c\udded\ud83d\udd2a \u0628\u0631\u0627\u06cc \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0634\u0645\u0627\u0633\u062a.  \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f <code>componentDidMount<\/code>\u060c <code>componentDidUpdate<\/code>\u060c \u0648 <code>componentWillUnmount<\/code> \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0647 \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0627\u062f\u0647.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 \u0622\u0646 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>useEffect<\/code> \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0639\u0627\u0631\u0636\u0647 \u062c\u0627\u0646\u0628\u06cc \u0634\u0645\u0627\u0633\u062a.<\/li>\n<li>React \u0639\u0645\u0644\u06a9\u0631\u062f \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0634\u0645\u0627 \u0631\u0627 \u067e\u0633 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0627\u06af\u0631 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f\u060c React \u0622\u0646 \u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a unmount \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ol>\n<p>\u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0644\u0627\u0633 \u06cc\u0627 \u062a\u0627\u0628\u0639 \u0646\u06cc\u0633\u062a!  \ud83e\udd2f<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9A%A1_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%D8%AE%D8%AA%D9%84%D9%81\"><\/span>\n<p>  \u26a1 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062e\u062a\u0644\u0641<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627\u06cc\u062c \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 <code>useEffect<\/code>:<\/p>\n<ol>\n<li>\n<strong>\u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<\/strong>: \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0647\u0646\u06af\u0627\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0647\u0627.  \ud83d\udce6<\/li>\n<li>\n<strong>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0639\u0646\u0648\u0627\u0646 \u0633\u0646\u062f<\/strong>: \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a \u062c\u0632\u0621 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u061f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0646\u062c\u0627\u062a!  \ud83e\uddb8\u200d\u2642\ufe0f<\/li>\n<li>\n<strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f<\/strong>: \u0622\u06cc\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u067e\u0646\u062c\u0631\u0647 \u06cc\u0627 \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u062f\u0627\u0631\u06cc\u062f\u061f <code>useEffect<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0645\u06a9 \u06a9\u0646\u062f.  \ud83c\udfa7<\/li>\n<li>\n<strong>\u062d\u0627\u0644\u062a \u0645\u0627\u0646\u062f\u06af\u0627\u0631<\/strong>: \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0636\u0639\u06cc\u062a \u062c\u0632\u0621 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0645\u062d\u0644\u06cc \u06cc\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f\u061f <code>useEffect<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0622\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u0627\u062f\u0627\u0631\u0647 \u06a9\u0646\u062f!  \ud83d\udcbe<\/li>\n<li>\n<strong>\u062a\u0627\u06cc\u0645\u0631\u0647\u0627 \u0648 \u0641\u0648\u0627\u0635\u0644<\/strong>: \u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u06cc\u0627 \u0641\u0627\u0635\u0644\u0647 \u0632\u0645\u0627\u0646\u06cc \u062f\u0631 \u062c\u0632\u0621 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f\u060c <code>useEffect<\/code> \u0627\u0628\u0632\u0627\u0631 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0627\u0633\u062a.  \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.  \u23f3<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%9D_%D9%86%D9%85%D9%88%D9%86%D9%87_%D9%87%D8%A7%DB%8C%DB%8C_%D8%A7%D8%B2_%D9%85%D9%88%D8%A7%D8%B1%D8%AF_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_useEffect_%F0%9F%93%9D\"><\/span>\n<p>  \ud83d\udcdd \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 useEffect \ud83d\udcdd<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_1_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 1: \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>FetchData\n\u251c\u2500\u2500 button.tsx\n\u251c\u2500\u2500 location.tsx\n\u251c\u2500\u2500 weather.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\nimport fetchWeatherData from \".\/weather\"; \/\/ Import the function to fetch weather data\n\ninterface WeatherProps {\n    location: string;\n}\n\nconst WeatherButtons: React.FC&lt;WeatherProps&gt; = ({ location }) =&gt; {\n    const [weatherData, setWeatherData] = useState&lt;any&gt;(null); \/\/ Create state to hold weather data and initialize it to null\n    const [requestType, setRequestType] = useState&lt;string&gt;(\"\"); \/\/ Create state to hold the type of request to make and initialize it to an empty string\n\n    useEffect(() =&gt; {\n        if (requestType) { \/\/ If a request type has been selected\n            fetchWeatherData(location, requestType).then((data: any) =&gt; \/\/ Call the function to fetch weather data\n                setWeatherData(data) \/\/ Set the weather data to the response from the API\n            );\n        }\n    }, [requestType, location]); \/\/ Run the effect when either request type or location changes\n\n    return (\n        &lt;div className=\"text-2xl\"&gt;\n            &lt;button\n                className=\"weather-current-weather-button\"\n                onClick={() =&gt; setRequestType(\"current\")} \/\/ When the button is clicked, set the request type to \"current\"\n            &gt;\n                Current Weather\n            &lt;\/button&gt;\n            {weatherData &amp;&amp; ( \/\/ If weather data exists\n                &lt;div className=\"weather-json-bg\"&gt;\n          &lt;pre className=\"weather-button-pre-wrap\"&gt;\n            {JSON.stringify(weatherData, null, 2)} \/\/ Display the weather data as JSON\n          &lt;\/pre&gt;\n                &lt;\/div&gt;\n            )}\n        &lt;\/div&gt;\n    );\n};\n\nexport default WeatherButtons;\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0631\u0627 \u0627\u0632 API \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f <code>useState<\/code> \u0648 <code>useEffect<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 React\u060c \u0648 <code>fetchWeatherData<\/code> \u062a\u0627\u0628\u0639 \u0627\u0632 <code>weather.tsx<\/code>.<\/li>\n<li>\u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f <code>location<\/code> prop \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u062e\u0648\u062f\u060c \u06a9\u0647 \u0634\u0647\u0631\u06cc \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0628\u0627\u06cc\u062f \u0648\u0627\u06a9\u0634\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0648 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>useState<\/code> \u0642\u0644\u0627\u0628: <code>weatherData<\/code>\u060c \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 <code>requestType<\/code>\u060c \u06a9\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0686\u0647 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0634\u0648\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0622\u0628 \u0648 \u0647\u0648\u0627\u06cc \u0641\u0639\u0644\u06cc\u060c \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc 5 \u0631\u0648\u0632\u0647).<\/li>\n<li>\u0627\u0632 <code>useEffect<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0627\u0632 API \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 <code>requestType<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u06cc\u0639\u0646\u06cc \u0648\u0642\u062a\u06cc \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f)\u060c \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f <code>weatherData<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647<\/li>\n<li>\u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f <code>onClick<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u06a9\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f <code>requestType<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0647 &#8220;\u062c\u0631\u06cc\u0627\u0646&#8221; (\u06cc\u0639\u0646\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627\u06cc \u0641\u0639\u0644\u06cc).<\/li>\n<li>\u0627\u06af\u0631 <code>weatherData<\/code> \u062a\u0647\u06cc \u0646\u06cc\u0633\u062a\u060c a \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>pre<\/code> \u0628\u0631\u0686\u0633\u0628\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { createContext, useState } from \"react\";\n\nexport const LocationContext = createContext&lt;any&gt;(null); \/\/ Create a context object to hold location data\n\nexport const LocationProvider: React.FC = ({ children }) =&gt; { \/\/ Create a provider component for the context\n    const [location, setLocation] = useState&lt;string&gt;(\"New York\"); \/\/ Create state to hold the current location and initialize it to \"New York\"\n\n    const changeLocation = (newLocation: string) =&gt; {\n        setLocation(newLocation); \/\/ Function to update the location\n    };\n\n    return (\n        &lt;LocationContext.Provider value={{ location, changeLocation }}&gt;\n            {children}\n        &lt;\/LocationContext.Provider&gt;\n    );\n};\n\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0632\u0645\u06cc\u0646\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06a9\u0627\u0646 \u0641\u0639\u0644\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0634\u0648\u062f\u060c \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f <code>createContext<\/code> \u0648 <code>useState<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 React.<\/li>\n<li>\u0627\u0644\u0641 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>LocationContext<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>createContext<\/code> \u0642\u0644\u0627\u0628\u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0639\u0628\u0648\u0631 \u0627\u0632 <code>location<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0648 <code>changeLocation<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0641\u0631\u0632\u0646\u062f<\/li>\n<li>\u0627\u0644\u0641 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>LocationProvider<\/code> \u062c\u0632\u0621 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>useState<\/code> \u0642\u0644\u0627\u0628\u060c \u06a9\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>location<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0647 &#8220;\u0646\u06cc\u0648\u06cc\u0648\u0631\u06a9&#8221;.<\/li>\n<li>\u0627\u0644\u0641 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>changeLocation<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>location<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0627 \u0645\u06a9\u0627\u0646 \u062c\u062f\u06cc\u062f.<\/li>\n<li>\u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>LocationContext.Provider<\/code> \u062c\u0632\u0621 \u0628\u0627 <code>location<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0648 <code>changeLocation<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0631\u0632\u0634 \u0622\u0646\u060c \u0648 \u0627\u062c\u0632\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0622\u0646 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nconst fetchWeatherData = async (\n  location: string,\n  requestType: string\n): Promise&lt;any&gt; =&gt; {\n  const apiKey = process.env.NEXT_PUBLIC_WEATHER ?? \"\"; \/\/ Get the API key from the environment variables\n  const apiUrl = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${location}&amp;appid=${apiKey}`; \/\/ Construct the API URL using the location and API key\n\n  const response = await fetch(apiUrl); \/\/ Make a request to the API\n  const data = await response.json(); \/\/ Parse the response as JSON\n  return data; \/\/ Return the data\n};\n\nexport default fetchWeatherData;\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0631\u0627 \u0627\u0632 OpenWeatherMap API \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>location<\/code> \u0648 <code>requestType<\/code> \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc.  \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>async<\/code> \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f <code>fetchWeatherData<\/code> \u06a9\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>location<\/code> \u0648 <code>requestType<\/code> \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc.<\/li>\n<li>\u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f API \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0645\u062d\u06cc\u0637\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f <code>NEXT_PUBLIC_WEATHER<\/code>.<\/li>\n<li>URL API \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>location<\/code> \u0648 <code>apiKey<\/code> \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627 <code>fetch<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u0628\u0647 API.<\/li>\n<li>\u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>json<\/code> \u0631\u0648\u0634 \u0634\u06cc \u067e\u0627\u0633\u062e \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u067e\u0627\u0633\u062e \u0628\u0647 \u06cc\u06a9 \u0634\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.<\/li>\n<li>\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a a \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f <code>Promise<\/code>.<\/li>\n<\/ul>\n<p>\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>import WeatherButtons from <span class=\"s2\">\"..\/components\/react\/useEffect\/FetchData\/button\"<\/span><span class=\"p\">;<\/span>\nimport <span class=\"o\">{<\/span> LocationProvider <span class=\"o\">}<\/span> from <span class=\"s2\">\"..\/components\/react\/useEffect\/FetchData\/location\"<\/span><span class=\"p\">;<\/span>\n\n&lt;LocationProvider&gt;\n  &lt;WeatherButtons\n    <span class=\"nv\">location<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"London\"<\/span>\n    <span class=\"nv\">units<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"metric\"<\/span>\n    <span class=\"nv\">theme<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"dark\"<\/span>\n  \/&gt;\n&lt;\/LocationProvider&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>WeatherButtons<\/code> \u0648 <code>LocationProvider<\/code> \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a React \u062e\u0648\u062f\u062a\u0627\u0646 \u0648 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f <code>WeatherButtons<\/code> \u062f\u0627\u062e\u0644 <code>LocationProvider<\/code>.  \u0633\u067e\u0633 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f <code>location<\/code> (\u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc\u060c <code>units<\/code> \u0648 <code>theme<\/code>) \u0644\u0648\u0627\u0632\u0645 \u0628\u0647 <code>WeatherButtons<\/code>.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627 \u0628\u0631\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0648 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 2 &#8211; UserFetchData<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>UserFetch\n\u251c\u2500\u2500 Data.tsx\n\u251c\u2500\u2500 UserFetch.tsx\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useEffect, useState } from \"react\";\n\n\/\/ Define the shape of the data object that will be returned by the hook\ntype Data&lt;T&gt; = {\n  status: \"loading\" | \"success\" | \"error\";\n  data?: T;\n  error?: Error;\n};\n\n\/\/ Custom hook that fetches data from an API endpoint and returns the data object\nexport function useFetch&lt;T&gt;(url: string): Data&lt;T&gt; {\n  \/\/ Create a state variable called 'data' and initialize it with { status: \"loading\" }\n  const [data, setData] = useState&lt;Data&lt;T&gt;&gt;({ status: \"loading\" });\n\n  \/\/ useEffect hook that runs when the URL changes\n  useEffect(() =&gt; {\n    \/\/ Define an asynchronous function called 'fetchData'\n    const fetchData = async () =&gt; {\n      try {\n        \/\/ Fetch data from the API endpoint\n        const response = await fetch(url);\n        const result = await response.json();\n\n        \/\/ Update the 'data' state variable with the fetched data\n        setData({ status: \"success\", data: result });\n      } catch (error) {\n        \/\/ Update the 'data' state variable with the error object\n        setData({ status: \"error\", error: error as Error });\n      }\n    };\n\n    \/\/ Call the 'fetchData' function to fetch data from the API endpoint\n    fetchData();\n  }, [url]); \/\/ Only run the effect when the url changes\n\n  \/\/ Return the 'data' object\n  return data;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0631\u0627 <code>Data<\/code> type \u0634\u06a9\u0644 \u0634\u06cc \u062f\u0627\u062f\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u062a\u0648\u0633\u0637 the \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f <code>useFetch<\/code> \u0642\u0644\u0627\u0628.  \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a: <code>status<\/code>\u060c <code>data<\/code>\u060c \u0648 <code>error<\/code>.<\/li>\n<li>\u0631\u0627 <code>useFetch<\/code> \u062a\u0627\u0628\u0639 \u06cc\u06a9 URL \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062e\u0648\u062f \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f <code>data<\/code> \u0634\u06cc\u0626\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0648\u062f.<\/li>\n<li>\u062f\u0631 \u062f\u0627\u062e\u0644 <code>useFetch<\/code> \u062a\u0627\u0628\u0639\u060c <code>useState<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>data<\/code> \u0648 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a <code>{ status: \"loading\" }<\/code>.<\/li>\n<li>\n<code>useEffect<\/code>  \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 URL \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 <code>[url]<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 \u0622\u0646 \u062a\u0635\u0648\u06cc\u0628 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631\u0648\u0646 <code>useEffect<\/code> \u062a\u0627\u0628\u0639\u060c <code>fetchData<\/code> \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>try<\/code> \u0648 <code>catch<\/code> \u0628\u0644\u0648\u06a9 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API.  \u0627\u06af\u0631 \u0648\u0627\u06a9\u0634\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0627\u0634\u062f\u060c <code>setData<\/code> \u062a\u0627\u0628\u0639 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f <code>{ status: \"success\", data: result }<\/code>.  \u0627\u06af\u0631 \u062e\u0637\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c <code>setData<\/code> \u062a\u0627\u0628\u0639 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f <code>{ status: \"error\", error: error as Error }<\/code>.<\/li>\n<li>\u0633\u0631\u0627\u0646\u062c\u0627\u0645\u060c <code>useFetch<\/code> \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f <code>data<\/code> \u0647\u062f\u0641 &#8211; \u0634\u06cc.\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useState } from \"react\";\nimport { useFetch } from \".\/Data\";\n\nfunction UsersFetch() {\n  \/\/ Create a state variable called 'url' and initialize it with the API endpoint URL\n  const [url, setUrl] = useState(\"https:\/\/jsonplaceholder.typicode.com\/users\");\n\n  \/\/ Call the 'useFetch' hook with the 'url' state variable\n  const data = useFetch&lt;Array&lt;{ id: number; name: string }&gt;&gt;(url);\n\n  \/\/ Render a button that changes the 'url' state variable when clicked\n  return (\n    &lt;div&gt;\n      &lt;button\n        className=\"user-fetch-button\"\n        onClick={() =&gt; setUrl(url + \"?_limit=5\")}\n      &gt;\n        Fetch only 5 users\n      &lt;\/button&gt;\n      {\/* If the 'status' property of the 'data' object is 'loading', render a loading message *\/}\n      {data.status === \"loading\" &amp;&amp; &lt;p&gt;Loading...&lt;\/p&gt;}\n      {\/* If the 'status' property of the 'data' object is 'success', render a list of users *\/}\n      {data.status === \"success\" &amp;&amp; (\n        &lt;ul className=\"user-fetch-data-bg\"&gt;\n          {data.data?.map((user) =&gt; (\n            &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;\n          ))}\n        &lt;\/ul&gt;\n      )}\n      {\/* If the 'status' property of the 'data' object is 'error', render an error message *\/}\n      {data.status === \"error\" &amp;&amp; &lt;p&gt;Error: {data.error?.message}&lt;\/p&gt;}\n    &lt;\/div&gt;\n  );\n}\n\nexport default UsersFetch;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0631\u0627 <code>UsersFetch<\/code> \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u062c\u0632\u0621 React \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 <code>useFetch<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0648 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0622\u0646\u060c \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u062c\u0632\u0621 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useState<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a <code>url<\/code> \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 <code>\"https:\/\/jsonplaceholder.typicode.com\/users\"<\/code>.<\/li>\n<li>\u0631\u0627 <code>data<\/code> \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>useFetch<\/code> \u0642\u0644\u0627\u0628 \u0628\u0627 <code>url<\/code>.<\/li>\n<li>\u062f\u06a9\u0645\u0647 \u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>setUrl<\/code> \u0628\u0627 \u06cc\u06a9 URL \u062c\u062f\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646.<\/li>\n<li>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0633\u062a\u0647 \u0628\u0647 \u0646\u0648\u0639 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>status<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u0627\u0632 <code>data<\/code> \u0647\u062f\u0641 &#8211; \u0634\u06cc.<\/li>\n<li>\u0627\u06af\u0631 <code>status<\/code> \u0627\u0633\u062a <code>\"loading\"<\/code>\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u06cc\u0627\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u0627\u06af\u0631 <code>status<\/code> \u0627\u0633\u062a <code>\"success\"<\/code>\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0646\u0627\u0645 \u0622\u0646\u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u0627\u06af\u0631 <code>status<\/code> \u0627\u0633\u062a <code>\"error\"<\/code>\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627 \u0628\u0627 \u067e\u06cc\u0627\u0645 \u0634\u06cc \u062e\u0637\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ol>\n<p>\u0645\u062b\u0627\u0644 3 &#8211; \u0648\u06cc\u062c\u062a<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>Widget\n\u251c\u2500\u2500 ColorWidget.tsx\n\u251c\u2500\u2500 Widget.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\n\/\/ This function creates a new widget element with the specified background color and adds it to the provided container element.\nexport function createWidget(color: string, container: HTMLElement) {\n    \/\/ Create a new div element to serve as the widget.\n    const widget = document.createElement(\"div\");\n    \/\/ Set the widget's background color.\n    widget.style.background = color;\n    \/\/ Set the widget's width and height.\n    widget.style.width = \"100px\";\n    widget.style.height = \"100px\";\n    \/\/ Set the widget's border radius.\n    widget.style.borderRadius = \"25%\";\n    \/\/ Set the widget's margin.\n    widget.style.margin = \"10px\";\n    \/\/ Set the widget's border style and color.\n    widget.style.border = \"2px solid pink\";\n\n    \/\/ Create a new custom event to be dispatched periodically by the widget.\n    const statusChangeEvent = new CustomEvent(\"statusChange\", {\n        detail: { status: \"active\" },\n    });\n\n    \/\/ Set an interval to dispatch the statusChangeEvent every 1000 milliseconds (1 second).\n    setInterval(() =&gt; {\n        widget.dispatchEvent(statusChangeEvent);\n    }, 1000);\n\n    \/\/ Add the widget to the container element.\n    container.appendChild(widget);\n\n    \/\/ Return an object with functions to add and remove event listeners, as well as to destroy the widget.\n    return {\n        addEventListener: widget.addEventListener.bind(widget),\n        removeEventListener: widget.removeEventListener.bind(widget),\n        destroy: () =&gt; container.removeChild(widget),\n    };\n}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062e\u0637 1: \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>createWidget<\/code> \u06a9\u0647 \u062f\u0648 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>color<\/code> (\u0631\u0634\u062a\u0647) \u0648 <code>container<\/code> (HTMLElement).<\/li>\n<li>\u062e\u0637 2-9: \u06cc\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>div<\/code> \u0639\u0646\u0635\u0631 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 <code>color<\/code>\u060c \u0627\u0646\u062f\u0627\u0632\u0647\u060c \u0634\u06a9\u0644\u060c \u062d\u0627\u0634\u06cc\u0647 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u0622\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u062e\u0637 11-15: \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>statusChangeEvent<\/code> \u0628\u0627 \u06cc\u06a9 <code>detail<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u062d\u0627\u0648\u06cc <code>{ status: \"active\" }<\/code>.<\/li>\n<li>\u062e\u0637 17-20: \u0627\u0639\u0632\u0627\u0645 <code>statusChangeEvent<\/code> \u062f\u0631 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647.<\/li>\n<li>\u062e\u0637 22: \u0636\u0645\u06cc\u0645\u0647 \u06a9\u0646\u06cc\u062f <code>widget<\/code> \u0628\u0647 <code>container<\/code>.<\/li>\n<li>\u062e\u0637 24-29: \u06cc\u06a9 \u0634\u06cc \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f: <code>addEventListener<\/code>\u060c <code>removeEventListener<\/code>\u060c \u0648 <code>destroy<\/code>.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { createWidget } from \".\/Widget\";\n\ninterface ColorWidgetProps {\n    initialColor: string;\n}\n\nconst ColorWidget: React.FC&lt;ColorWidgetProps&gt; = ({ initialColor }) =&gt; {\n    \/\/ useRef hook to create a reference to the container div element\n    const containerRef = useRef&lt;HTMLDivElement&gt;(null);\n\n    \/\/ useState hook to create a state variable for the color of the widget\n    const [color, setColor] = useState(initialColor);\n\n    \/\/ useEffect hook to run side-effects when the component mounts or the color state changes\n    useEffect(() =&gt; {\n        \/\/ Get the current value of the container reference\n        const container = containerRef.current;\n\n        \/\/ If the container exists, create a widget and add event listeners to it\n        if (container) {\n            \/\/ Create the widget with the given color and container\n            const widget = createWidget(color, container);\n\n            \/\/ Define a function to handle the \"statusChange\" event of the widget\n            const handleStatusChange = (event: CustomEvent&lt;{ status: string }&gt;) =&gt; {\n                console.log(\"The status is:\", event.detail.status);\n            };\n\n            \/\/ Add an event listener to the widget to listen for \"statusChange\" events\n            (widget as any).addEventListener(\"statusChange\", handleStatusChange);\n\n            \/\/ Return a cleanup function to remove the widget and event listeners when the component unmounts or the color changes\n            return () =&gt; {\n                widget.destroy();\n                (widget as any).removeEventListener(\"statusChange\", handleStatusChange);\n            };\n        }\n    }, [color]);\n\n    \/\/ Define a function to update the color state variable with a random hex color\n    const changeColor = () =&gt; {\n        setColor(\n            `#${Math.floor(Math.random() * 0x1000000)\n                .toString(16)\n                .padStart(6, \"0\")}`\n        );\n    };\n\n    \/\/ Render the ColorWidget component with a container div, a button to change the color, and the color widget itself\n    return (\n        &lt;div className=\"color-widget\"&gt;\n            &lt;div className=\"widget-container\" ref={containerRef}&gt;&lt;\/div&gt;\n            &lt;button className=\"widget-button\" onClick={changeColor}&gt;\n                Change Color\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default ColorWidget;\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062e\u0637 1-8: \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>ColorWidgetProps<\/code>.<\/li>\n<li>\u062e\u0637 10-18: \u06cc\u06a9 \u062c\u0632\u0621 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>ColorWidget<\/code> \u06a9\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f <code>initialColor<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0648 \u0645\u0642\u062f\u0627\u0631\u06cc JSX \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/li>\n<li>\u062e\u0637 19: \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>useRef<\/code> \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0628\u0647 a <code>div<\/code> \u0639\u0646\u0635\u0631<\/li>\n<li>\u062e\u0637 21-23: \u062d\u0627\u0644\u062a\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>color<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0643\u0631\u062f\u0646 <code>useState<\/code> \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u062f <code>initialColor<\/code>.<\/li>\n<li>\u062e\u0637 25-47: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u06cc\u062c\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>createWidget<\/code>\u060c \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0648 \u0648\u06cc\u062c\u062a \u0648 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f <code>color<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u06cc\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0627\u0631\u062c \u0634\u0648\u062f.<\/li>\n<li>\u062e\u0637 33-39: \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>changeColor<\/code> \u06a9\u0647 \u06cc\u06a9 \u0631\u0646\u06af \u0647\u06af\u0632\u0627 \u062f\u0633\u06cc\u0645\u0627\u0644 \u062a\u0635\u0627\u062f\u0641\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0646\u06af \u062c\u062f\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>color<\/code>.<\/li>\n<li>\u062e\u0637 42-46: \u0645\u0642\u062f\u0627\u0631\u06cc JSX \u0631\u0627 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 \u0627\u0633\u062a \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f <code>div<\/code> \u0628\u0627 \u06cc\u06a9 <code>ref<\/code> \u0628\u0647 \u0645\u0631\u062c\u0639 \u0638\u0631\u0641\u060c \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0628\u0627 \u06cc\u06a9 <code>onClick<\/code> \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0647 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>changeColor<\/code>\u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0633\u0627\u0632\u06cc.<\/li>\n<\/ul>\n<p>\u0645\u062b\u0627\u0644 4 &#8211; \u0627\u062b\u0631 \u0634\u0631\u0637\u06cc<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\n\nexport const ConditionalEffect: React.FC = () =&gt; {\n    \/\/ state variables for count and message\n    const [count, setCount] = useState(0);\n    const [message, setMessage] = useState(\"\");\n\n    \/\/ useEffect hook that runs whenever count changes\n    useEffect(() =&gt; {\n        \/\/ check if count is even or odd\n        if (count % 2 === 0) {\n            \/\/ set message to \"Even\" if count is even\n            setMessage(\"Even\");\n        } else {\n            \/\/ set message to \"Odd\" if count is odd\n            setMessage(\"Odd\");\n        }\n    }, [count]);\n\n    \/\/ render the component with a button that increments count on click\n    \/\/ also display the current message and count value\n    return (\n        &lt;div&gt;\n            &lt;button\n                className=\"conditional-effect-button\"\n                onClick={() =&gt; setCount(count + 1)}\n            &gt;\n                Conditional Effect\n            &lt;\/button&gt;\n            &lt;p className=\"conditional-effect-text\"&gt;{message}&lt;\/p&gt;\n            &lt;p className=\"conditional-effect-text\"&gt;Count: {count}&lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<code>import React, { useState, useEffect } from \"react\";<\/code>: React \u0648 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc useState \u0648 useEffect \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f <code>react<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/li>\n<li>\n<code>const [count, setCount] = useState(0);<\/code>: \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>count<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 useState \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 0 \u0648 \u06cc\u06a9 \u062a\u0627\u0628\u0639 <code>setCount<\/code> \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>count<\/code> \u0645\u062a\u063a\u06cc\u0631.<\/li>\n<li>\n<code>const [message, setMessage] = useState(\"\");<\/code>: \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>message<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 useState \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u062e\u0627\u0644\u06cc \u0648 \u06cc\u06a9 \u062a\u0627\u0628\u0639 <code>setMessage<\/code> \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>message<\/code> \u0645\u062a\u063a\u06cc\u0631.<\/li>\n<li>\n<code>useEffect(() =&gt; {...}, [count]);<\/code>: \u0627\u0641\u06a9\u062a\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f <code>count<\/code> \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a  \u0627\u06af\u0631 <code>count<\/code> \u06cc\u06a9\u0646\u0648\u0627\u062e\u062a \u0627\u0633\u062a\u060c <code>message<\/code> \u0631\u0648\u06cc &#8220;\u0632\u0648\u062c&#8221; \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0631\u0648\u06cc &#8220;\u0641\u0631\u062f&#8221; \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>&lt;button className=\"conditional-effect-button\" onClick={() =&gt; setCount(count + 1)}&gt;Conditional Effect&lt;\/button&gt;<\/code>: \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u06a9\u0644\u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>count<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646<\/li>\n<li>\n<code>&lt;p className=\"conditional-effect-text\"&gt;{message}&lt;\/p&gt;<\/code>: \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>message<\/code>.<\/li>\n<li>\n<code>&lt;p className=\"conditional-effect-text\"&gt;Count: {count}&lt;\/p&gt;<\/code>: \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>count<\/code>.<\/li>\n<\/ul>\n<p>\u0645\u062b\u0627\u0644 5 &#8211; \u0627\u062b\u0631 \u062a\u0627\u06cc\u0645\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useState, useEffect } from \"react\";\n\nexport const Timer: React.FC = () =&gt; {\n    \/\/ Set the initial state of seconds to 0 using useState hook\n    const [seconds, setSeconds] = useState(0);\n\n    useEffect(() =&gt; {\n        \/\/ Set an interval to increment seconds state by 1 every 1000ms using setInterval\n        const interval = setInterval(() =&gt; {\n            setSeconds((seconds) =&gt; seconds + 1);\n        }, 1000);\n\n        \/\/ Clear the interval using clearInterval in the cleanup function\n        return () =&gt; {\n            clearInterval(interval);\n        };\n    }, []); \/\/ Effect only runs once (empty dependency array)\n\n    return (\n        &lt;div&gt;\n            &lt;p className=\"timer-text\"&gt;\n                You have been on this page for {seconds} seconds.\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\n<code>import React, { useState, useEffect } from \"react\";<\/code>: \u0627\u062c\u0632\u0627\u06cc React \u0644\u0627\u0632\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<code>const [seconds, setSeconds] = useState(0);<\/code>: \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u06a9\u0646\u06cc\u062f <code>seconds<\/code> \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0622\u0646 <code>setSeconds<\/code>\u060c \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0647 <code>0<\/code>.<\/li>\n<li>\n<code>useEffect(() =&gt; {...}, []);<\/code>: \u0627\u0632 <code>useEffect<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0627\u062b\u0631 \u062c\u0627\u0646\u0628\u06cc \u067e\u0633 \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0642\u0628\u0644 \u0627\u0632 unmount.  \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0627\u0644\u06cc \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0641\u06a9\u062a \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u067e\u0633 \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>const interval = setInterval(() =&gt; {...}, 1000);<\/code>: \u0641\u0627\u0635\u0644\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>seconds<\/code> \u062f\u0631 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647 1 \u062d\u0627\u0644\u062a \u062f\u0647\u06cc\u062f.<\/li>\n<li>\n<code>setSeconds((seconds) =&gt; seconds + 1);<\/code>: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f <code>seconds<\/code> \u0628\u0627 \u062a\u0627\u0628\u0639 updater \u062d\u0627\u0644\u062a \u062f\u0647\u06cc\u062f \u062a\u0627 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 1 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0628\u062f.<\/li>\n<li>\n<code>return () =&gt; {...};<\/code>: \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0641\u0627\u0635\u0644\u0647 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f.<\/li>\n<li>\n<code>&lt;p className=\"timer-text\"&gt;You have been on this page for {seconds} seconds.&lt;\/p&gt;<\/code>: \u0631\u0646\u062f\u0631 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <code>seconds<\/code> \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a<\/li>\n<\/ul>\n<p>\u0645\u062b\u0627\u0644 6 &#8211; \u0639\u0646\u0648\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n\n```tsx\nimport React, { useEffect, useState } from \"react\";\n\nexport function UpdateTItle() {\n    const [count, setCount] = useState(0); \/\/ create a state variable 'count' and its update function 'setCount' with an initial value of 0\n\n    useEffect(() =&gt; {\n        \/\/ This is a side effect that runs when the component mounts, and whenever 'count' changes\n        \/\/ It updates the document title with the current count\n        document.title = `You clicked ${count} times`;\n    }, [count]); \/\/ Only run the effect when 'count' changes\n\n    return (\n        &lt;div&gt;\n            &lt;p className=\"update-title-text\"&gt;You clicked {count} times&lt;\/p&gt;\n            &lt;button\n                className=\"update-title-button\"\n                onClick={() =&gt; setCount(count + 1)}\n            &gt;\n                Click me\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u06a9\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc React \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>UpdateTitle<\/code>.<\/li>\n<li>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>count<\/code> \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 0 \u0648 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0622\u0646 <code>setCount<\/code>.<\/li>\n<li>\u0631\u0627 <code>useEffect<\/code> \u0627\u0632 \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u062b\u0631 \u062c\u0627\u0646\u0628\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0633\u0648\u0627\u0631 \u0634\u062f\u0646 \u0645\u0624\u0644\u0641\u0647 \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f <code>count<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0641\u06a9\u062a\u060c \u0639\u0646\u0648\u0627\u0646 \u0633\u0646\u062f \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f <code>count<\/code> \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u0631\u0634\u062a\u0647<\/li>\n<li>\u0631\u0627 <code>useEffect<\/code> hook \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u062f\u0648\u0645 \u062e\u0648\u062f \u0645\u06cc \u06af\u06cc\u0631\u062f.  \u0648\u0642\u062a\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u060c \u0627\u0641\u06a9\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0627\u062b\u0631 \u0641\u0642\u0637 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f <code>count<\/code>\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f <code>count<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 div \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f <code>count<\/code>\u0648 \u062f\u06a9\u0645\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f <code>count<\/code> \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646<\/li>\n<\/ul>\n<p>\u062e\u0648\u062f\u0634\u0647!  \u0627\u06a9\u0646\u0648\u0646 \u0634\u0645\u0627 \u062f\u0631\u06a9 \u06a9\u0627\u0645\u0644\u06cc \u0627\u0632 \u0622\u0646 \u062f\u0627\u0631\u06cc\u062f <code>useEffect<\/code> \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc React \u06a9\u0645\u06a9 \u06a9\u0646\u062f.  \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!  \ud83c\udf89<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647 \u062f\u0646\u06cc\u0627\u06cc React Hooks \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u0627\u0645\u0631\u0648\u0632\u060c \u0645\u0627 \u0628\u0647 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0647\u0627 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645: useEffect. \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645! \ud83d\ude80 \ud83d\udcda \u0686\u06cc\u0633\u062a useEffect useEffect \u0647\u0633\u062a \u06cc\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u0647\u0648\u06a9 \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":21439,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-21438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/21438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=21438"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/21438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/21439"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=21438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=21438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=21438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}