{"id":70274,"date":"2024-07-21T23:03:16","date_gmt":"2024-07-21T19:33:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/essential-guide-to-react-useeffect-for-developers-fml\/"},"modified":"2024-07-21T23:03:16","modified_gmt":"2024-07-21T19:33:16","slug":"essential-guide-to-react-useeffect-for-developers-fml","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/essential-guide-to-react-useeffect-for-developers-fml\/","title":{"rendered":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc React useEffect \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            React\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u062f\u0631 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0648\u0633\u0637 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0642\u0644\u0628 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0646\u0647\u0641\u062a\u0647 \u0627\u0633\u062a useEffect \u0642\u0644\u0627\u0628.  \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc React \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f useEffect \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0628\u0647 \u0639\u0645\u0642 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f useEffect\u0627\u0631\u0627\u0626\u0647 \u0628\u06cc\u0646\u0634\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0636\u0631\u0648\u0631\u06cc.<\/p>\n<p>\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 Magic of React useEffect<\/p>\n<p>\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f useEffect \u0642\u0644\u0627\u0628 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0686\u0627\u0642\u0648\u06cc \u0627\u0631\u062a\u0634 \u0633\u0648\u0626\u06cc\u0633 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0648 API \u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0647\u0645\u0627\u0647\u0646\u06af \u06a9\u0646\u0646\u062f.  \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u062a\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646\u060c useEffect \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0641\u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0633\u062a\u0646\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>useEffect \u0686\u06cc\u0633\u062a\u061f  \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 React&#39;s Hook<\/p>\n<p>\u062f\u0631 \u0647\u0633\u062a\u0647 \u0622\u0646\u060c useEffect \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc React \u062e\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.  \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0633\u0627\u06cc\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u06cc\u0627 \u062f\u0646\u06cc\u0627\u06cc \u062e\u0627\u0631\u062c \u0631\u0627 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0647\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627\u060c \u06cc\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u062f\u0633\u062a\u06cc DOM.  \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647 \u062f\u0631 React 16.8\u060c useEffect \u0642\u062f\u0631\u062a \u0645\u062a\u062f\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0631\u0627 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0645\u06cc\u200c\u0622\u0648\u0631\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0628\u0627\u0632\u06cc\u06af\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0645\u062f\u0631\u0646 React \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0686\u0631\u0627 \u0627\u0632 Effect Matters \u062f\u0631 Modern React Development \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/p>\n<p>\u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc\u060c \u062a\u0645\u0631\u06a9\u0632 \u0631\u0627 \u0628\u0647 Hooks \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a useEffect \u062f\u0631 \u062e\u0637 \u0645\u0642\u062f\u0645 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u06a9\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f \u0648 \u0631\u0648\u06cc\u06a9\u0631\u062f\u06cc \u067e\u0627\u06a9\u200c\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u200c\u062a\u0631 \u0628\u0647 \u0645\u0646\u0637\u0642 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0628\u0627 useEffect\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0628\u062f\u0648\u0646 \u062f\u0631\u0647\u0645 \u0631\u06cc\u062e\u062a\u0646 \u06a9\u062f \u062e\u0648\u062f \u0628\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0648 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 useEffect<\/p>\n<p>\u062f\u0631\u06a9 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647: \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f useEffect<\/p>\n<p>useEffect  \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0639\u062f \u0627\u0632 \u0647\u0631 \u0631\u0646\u062f\u0631 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062f\u0648 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f: \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0627\u0633\u062a \u0648 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc.  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u067e\u0633 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0628\u0627 \u0622\u0646 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f.  \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0631\u0627\u0626\u0647\u060c \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u062b\u0631 \u0628\u0627\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0639\u0645\u0644\u06cc\u0627\u062a \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0646\u062d\u0648 \u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f<\/p>\n<p>\u0646\u062d\u0648 \u0628\u0631\u0627\u06cc useEffect \u0633\u0631\u0631\u0627\u0633\u062a \u0627\u0633\u062a  \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f useEffect \u0628\u0627 \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0645\u0646\u0637\u0642 \u0627\u0641\u06a9\u062a \u0634\u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.  \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0648\u0645 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062e\u0627\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u062b\u0631 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u062b\u0644\u0627:<\/p>\n<p>useEffect(() =&gt; {<br \/>\n  \/\/ Your side effect logic here<br \/>\n}, [dependencies]);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631\u06a9 \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0632\u0645\u0627\u0646 \u0648 \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u0627\u062b\u0631\u0627\u062a \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u062b\u0627\u0644 1: \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Mount \u0648 Unmount<\/p>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 useEffect \u0648\u0642\u0627\u06cc\u0639 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062c\u0632\u0621 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0646\u0635\u0628 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062c\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0627\u06cc\u0645\u0631 \u06cc\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<p>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0639\u0645\u0644\u06cc: \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u06cc\u0627 \u0628\u0627\u0632\u0647 \u0632\u0645\u0627\u0646\u06cc<\/p>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0634\u0648\u062f.  \u0628\u0627 useEffect\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0627\u06cc\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>useEffect(() =&gt; {<br \/>\n  const timer = setInterval(() =&gt; {<br \/>\n    console.log(&#8216;Timer tick&#8217;);<br \/>\n  }, 1000);<\/p>\n<p>  return () =&gt; clearInterval(timer); \/\/ Cleanup on unmount<br \/>\n}, []);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062a\u0627\u06cc\u0645\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 2: \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 API<\/p>\n<p>\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a<\/p>\n<p>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 API \u0647\u0627 \u06cc\u06a9 \u06a9\u0627\u0631 \u0631\u0627\u06cc\u062c \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0627\u0633\u062a. useEffect \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u06cc\u0646 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0627\u0633\u062a.  \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u0646\u0637\u0642 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 useEffect\u060c \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0648\u0636\u0639\u06cc\u062a \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648\u0627\u0642\u0639\u06cc: \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc API \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647<\/p>\n<p>\u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 API \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<p>const [users, setUsers] = useState([]);<\/p>\n<p>useEffect(() =&gt; {<br \/>\n  fetch(&#8216;https:\/\/api.example.com\/users&#8217;)<br \/>\n    .then(response =&gt; response.json())<br \/>\n    .then(data =&gt; setUsers(data));<br \/>\n}, []);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c useEffect \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0635\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u06cc\u06a9 \u0628\u0627\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 3: \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u0648 \u067e\u0631\u0648\u067e\u0633<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 UseEffect \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u06cc\u0627 Props<\/p>\n<p>useEffect  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u06cc\u0627 props \u067e\u0627\u0633\u062e \u062f\u0647\u062f.  \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0645\u062c\u062f\u062f \u0627\u0641\u06a9\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u06cc\u0627 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644\u200c\u0647\u0627 \u0628\u0627 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0645\u062b\u0627\u0644: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc UI \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0627\u0631\u0628\u0631<\/p>\n<p>\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f UI \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u060c \u0645\u0627\u0646\u0646\u062f \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u062c\u0633\u062a\u062c\u0648\u060c \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>const [searchTerm, setSearchTerm] = useState(&#8221;);<br \/>\nconst [filteredItems, setFilteredItems] = useState(items);<\/p>\n<p>useEffect(() =&gt; {<br \/>\n  setFilteredItems(items.filter(item =&gt; item.includes(searchTerm)));<br \/>\n}, [searchTerm, items]);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646\u062c\u0627\u060c useEffect \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0641\u06cc\u0644\u062a\u0631 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f searchTerm \u06cc\u0627 items \u062a\u063a\u06cc\u06cc\u0631\u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f \u06a9\u0647 UI \u0622\u062e\u0631\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 4: \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc<\/p>\n<p>\u0686\u0631\u0627 \u062a\u0648\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc useEffect \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f<\/p>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u062f\u0631 \u0622\u0646 \u062d\u06cc\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f useEffect \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0648 \u0633\u0627\u06cc\u0631 \u0645\u0634\u06a9\u0644\u0627\u062a.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0627\u0641\u06a9\u062a \u0645\u0646\u0627\u0628\u0639\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u067e\u0627\u06a9 \u0634\u0648\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0627\u06cc\u0645\u0631\u0647\u0627 \u06cc\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0646\u0627\u0628\u0639 \u0647\u0646\u06af\u0627\u0645 \u062c\u062f\u0627 \u0634\u062f\u0646 \u0645\u0624\u0644\u0641\u0647 \u06cc\u0627 \u0627\u062c\u0631\u0627\u06cc \u0645\u062c\u062f\u062f \u0627\u0641\u06a9\u062a \u0622\u0632\u0627\u062f \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0645\u0637\u0627\u0644\u0639\u0647 \u0645\u0648\u0631\u062f\u06cc: \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0628\u0627 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc<\/p>\n<p>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<p>useEffect(() =&gt; {<br \/>\n  const socket = new WebSocket(&#8216;ws:\/\/example.com\/socket&#8217;);<\/p>\n<p>  socket.onmessage = event =&gt; {<br \/>\n    console.log(&#8216;Message received:&#8217;, event.data);<br \/>\n  };<\/p>\n<p>  return () =&gt; socket.close(); \/\/ Cleanup WebSocket connection<br \/>\n}, []);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u06cc \u0628\u0646\u062f\u062f \u0648 \u0627\u0632 \u0646\u0634\u062a \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u062d\u0627\u0641\u0638\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 5: \u062a\u0631\u06a9\u06cc\u0628 useEffect \u0628\u0627 Hooks \u062f\u06cc\u06af\u0631<\/p>\n<p>\u0627\u0641\u0632\u0627\u06cc\u0634 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 useEffect \u0628\u0627 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<\/p>\n<p>useEffect  \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0642\u0644\u0627\u0628 \u0647\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0631\u062f \u062a\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f.  \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 useEffect \u0628\u0627 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0644\u0627\u0642\u0627\u0646\u0647: \u0633\u0627\u062e\u062a \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u067e\u0627\u0633\u062e\u06af\u0648<\/p>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u0639\u06a9\u0633 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<p>function useResponsiveGallery(images) {<br \/>\n  const [columns, setColumns] = useState(3);<\/p>\n<p>  useEffect(() =&gt; {<br \/>\n    const updateColumns = () =&gt; {<br \/>\n      setColumns(window.innerWidth &gt; 600 ? 4 : 2);<br \/>\n    };<\/p>\n<p>    window.addEventListener(&#8216;resize&#8217;, updateColumns);<br \/>\n    updateColumns();<\/p>\n<p>    return () =&gt; window.removeEventListener(&#8216;resize&#8217;, updateColumns);<br \/>\n  }, []);<\/p>\n<p>  return columns;<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u062a\u0639\u062f\u0627\u062f \u0633\u062a\u0648\u0646\u200c\u0647\u0627\u06cc \u06af\u0627\u0644\u0631\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f useEffect \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647.<\/p>\n<p>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0648 \u0646\u06a9\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\n<p>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc useEffect \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647\u060c \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0646\u0627\u0632\u06a9 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0627\u0632 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.  \u0627\u0632 \u0622\u0631\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0639\u0627\u0642\u0644\u0627\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u0639\u062f\u0627\u062f \u062f\u0641\u0639\u0627\u062a \u0627\u062c\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React.memo \u0648 useCallback \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0648 \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f.<\/p>\n<p>\u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627\u06cc\u062c\u06cc \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u062f\u0627\u0645 \u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u0628\u0627 useEffect \u0634\u0627\u0645\u0644 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0627\u062b\u0631\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0646\u06cc\u0627\u0632 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f \u0648 \u0634\u0627\u0645\u0644 \u062a\u0648\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f.  \u0628\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0645\u0644 \u0627\u062b\u0631\u0627\u062a \u062e\u0648\u062f \u0648 \u062f\u0631\u06a9 \u067e\u06cc\u0627\u0645\u062f\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0632\u0646\u062f\u06af\u06cc \u0622\u0646\u0647\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0646\u062a\u06cc\u062c\u0647<\/p>\n<p>\u0645\u0633\u062a\u0631\u06cc\u0646\u06af useEffect \u0633\u0646\u06af \u0628\u0646\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u06a9\u0627\u0631\u0622\u0645\u062f React \u0627\u0633\u062a.  \u0628\u0627 \u062f\u0631\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u060c \u0628\u0647 \u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0648 \u06a9\u0627\u0648\u0634 \u062f\u0631 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0642\u062f\u0631\u062a \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062e\u062a \u0648 \u0627\u0635\u0644\u0627\u062d \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc React \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u062f\u060c useEffect \u0627\u0628\u0632\u0627\u0631\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0631 \u062c\u0639\u0628\u0647 \u0627\u0628\u0632\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0634\u0645\u0627 \u0628\u0627\u0642\u06cc \u062e\u0648\u0627\u0647\u062f \u0645\u0627\u0646\u062f.<\/p>\n<div data-article-id=\"1931040\" id=\"article-body\">\n<p>React\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u062f\u0631 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0648\u0633\u0637 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0642\u0644\u0628 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0646\u0647\u0641\u062a\u0647 \u0627\u0633\u062a <code>useEffect<\/code> \u0642\u0644\u0627\u0628.  \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc React \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0628\u0647 \u0639\u0645\u0642 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f <code>useEffect<\/code>\u0627\u0631\u0627\u0626\u0647 \u0628\u06cc\u0646\u0634\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0636\u0631\u0648\u0631\u06cc.<\/p>\n<p><strong>\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 Magic of React useEffect<\/strong><\/p>\n<p>\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f <code>useEffect<\/code> \u0642\u0644\u0627\u0628 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0686\u0627\u0642\u0648\u06cc \u0627\u0631\u062a\u0634 \u0633\u0648\u0626\u06cc\u0633 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0648 API \u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0647\u0645\u0627\u0647\u0646\u06af \u06a9\u0646\u0646\u062f.  \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u062a\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646\u060c <code>useEffect<\/code> \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0641\u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0633\u062a\u0646\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>useEffect \u0686\u06cc\u0633\u062a\u061f  \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 React&#39;s Hook<\/strong><\/p>\n<p>\u062f\u0631 \u0647\u0633\u062a\u0647 \u0622\u0646\u060c <code>useEffect<\/code> \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc React \u062e\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.  \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0633\u0627\u06cc\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u06cc\u0627 \u062f\u0646\u06cc\u0627\u06cc \u062e\u0627\u0631\u062c \u0631\u0627 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0647\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627\u060c \u06cc\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u062f\u0633\u062a\u06cc DOM.  \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647 \u062f\u0631 React 16.8\u060c <code>useEffect<\/code> \u0642\u062f\u0631\u062a \u0645\u062a\u062f\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0631\u0627 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0645\u06cc\u200c\u0622\u0648\u0631\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0628\u0627\u0632\u06cc\u06af\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0645\u062f\u0631\u0646 React \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p><strong>\u0686\u0631\u0627 \u0627\u0632 Effect Matters \u062f\u0631 Modern React Development \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/strong><\/p>\n<p>\u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc\u060c \u062a\u0645\u0631\u06a9\u0632 \u0631\u0627 \u0628\u0647 Hooks \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a <code>useEffect<\/code> \u062f\u0631 \u062e\u0637 \u0645\u0642\u062f\u0645 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u06a9\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f \u0648 \u0631\u0648\u06cc\u06a9\u0631\u062f\u06cc \u067e\u0627\u06a9\u200c\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u200c\u062a\u0631 \u0628\u0647 \u0645\u0646\u0637\u0642 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0628\u0627 <code>useEffect<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0648 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0628\u062f\u0648\u0646 \u062f\u0631\u0647\u0645 \u0631\u06cc\u062e\u062a\u0646 \u06a9\u062f \u062e\u0648\u062f \u0628\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0648 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 useEffect<\/strong><\/p>\n<p><strong>\u062f\u0631\u06a9 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647: \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f useEffect<\/strong><\/p>\n<p><code>useEffect<\/code>  \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0639\u062f \u0627\u0632 \u0647\u0631 \u0631\u0646\u062f\u0631 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u062f\u0648 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f: \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0627\u0633\u062a \u0648 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc.  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u067e\u0633 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0628\u0627 \u0622\u0646 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f.  \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0631\u0627\u0626\u0647\u060c \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u062b\u0631 \u0628\u0627\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0639\u0645\u0644\u06cc\u0627\u062a \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0646\u062d\u0648 \u0648 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f<\/strong><\/p>\n<p>\u0646\u062d\u0648 \u0628\u0631\u0627\u06cc <code>useEffect<\/code> \u0633\u0631\u0631\u0627\u0633\u062a \u0627\u0633\u062a  \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>useEffect<\/code> \u0628\u0627 \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0645\u0646\u0637\u0642 \u0627\u0641\u06a9\u062a \u0634\u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.  \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0648\u0645 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062e\u0627\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u062b\u0631 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u062b\u0644\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Your side effect logic here<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">dependencies<\/span><span class=\"p\">]);<\/span>\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>\u062f\u0631\u06a9 \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0632\u0645\u0627\u0646 \u0648 \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u0627\u062b\u0631\u0627\u062a \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644 1: \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/strong><\/p>\n<p><strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Mount \u0648 Unmount<\/strong><\/p>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 <code>useEffect<\/code> \u0648\u0642\u0627\u06cc\u0639 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062c\u0632\u0621 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0646\u0635\u0628 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062c\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0627\u06cc\u0645\u0631 \u06cc\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<p><strong>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0639\u0645\u0644\u06cc: \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u06cc\u0627 \u0628\u0627\u0632\u0647 \u0632\u0645\u0627\u0646\u06cc<\/strong><\/p>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u06cc\u0645\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0647\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0634\u0648\u062f.  \u0628\u0627 <code>useEffect<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0627\u06cc\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">timer<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Timer tick<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">timer<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Cleanup on unmount<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\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\u062b\u0627\u0644 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062a\u0627\u06cc\u0645\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644 2: \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 API<\/strong><\/p>\n<p><strong>\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a<\/strong><\/p>\n<p>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 API \u0647\u0627 \u06cc\u06a9 \u06a9\u0627\u0631 \u0631\u0627\u06cc\u062c \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0627\u0633\u062a. <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u06cc\u0646 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0627\u0633\u062a.  \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u0646\u0637\u0642 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 <code>useEffect<\/code>\u060c \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0648\u0636\u0639\u06cc\u062a \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648\u0627\u0642\u0639\u06cc: \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc API \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647<\/strong><\/p>\n<p>\u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 API \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">users<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUsers<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([]);<\/span>\n\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/api.example.com\/users<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setUsers<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\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>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c <code>useEffect<\/code> \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0635\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u06cc\u06a9 \u0628\u0627\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644 3: \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u0648 \u067e\u0631\u0648\u067e\u0633<\/strong><\/p>\n<p><strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 UseEffect \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u06cc\u0627 Props<\/strong><\/p>\n<p><code>useEffect<\/code>  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u06cc\u0627 props \u067e\u0627\u0633\u062e \u062f\u0647\u062f.  \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0645\u062c\u062f\u062f \u0627\u0641\u06a9\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u06cc\u0627 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644\u200c\u0647\u0627 \u0628\u0627 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0645\u062b\u0627\u0644: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc UI \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0627\u0631\u0628\u0631<\/strong><\/p>\n<p>\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f UI \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u060c \u0645\u0627\u0646\u0646\u062f \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u062c\u0633\u062a\u062c\u0648\u060c \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">searchTerm<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSearchTerm<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">filteredItems<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setFilteredItems<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"nx\">items<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">setFilteredItems<\/span><span class=\"p\">(<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"nx\">searchTerm<\/span><span class=\"p\">)));<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">searchTerm<\/span><span class=\"p\">,<\/span> <span class=\"nx\">items<\/span><span class=\"p\">]);<\/span>\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\u062c\u0627\u060c <code>useEffect<\/code> \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0641\u06cc\u0644\u062a\u0631 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>searchTerm<\/code> \u06cc\u0627 <code>items<\/code> \u062a\u063a\u06cc\u06cc\u0631\u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f \u06a9\u0647 UI \u0622\u062e\u0631\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644 4: \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc<\/strong><\/p>\n<p><strong>\u0686\u0631\u0627 \u062a\u0648\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc useEffect \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f<\/strong><\/p>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u062f\u0631 \u0622\u0646 \u062d\u06cc\u0627\u062a\u06cc \u0647\u0633\u062a\u0646\u062f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0648 \u0633\u0627\u06cc\u0631 \u0645\u0634\u06a9\u0644\u0627\u062a.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0627\u0641\u06a9\u062a \u0645\u0646\u0627\u0628\u0639\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u067e\u0627\u06a9 \u0634\u0648\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0627\u06cc\u0645\u0631\u0647\u0627 \u06cc\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0646\u0627\u0628\u0639 \u0647\u0646\u06af\u0627\u0645 \u062c\u062f\u0627 \u0634\u062f\u0646 \u0645\u0624\u0644\u0641\u0647 \u06cc\u0627 \u0627\u062c\u0631\u0627\u06cc \u0645\u062c\u062f\u062f \u0627\u0641\u06a9\u062a \u0622\u0632\u0627\u062f \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p><strong>\u0645\u0637\u0627\u0644\u0639\u0647 \u0645\u0648\u0631\u062f\u06cc: \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0628\u0627 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc<\/strong><\/p>\n<p>\u0633\u0646\u0627\u0631\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">socket<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">WebSocket<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ws:\/\/example.com\/socket<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">onmessage<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Message received:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ Cleanup WebSocket connection<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\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>\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u06cc \u0628\u0646\u062f\u062f \u0648 \u0627\u0632 \u0646\u0634\u062a \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u062d\u0627\u0641\u0638\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644 5: \u062a\u0631\u06a9\u06cc\u0628 useEffect \u0628\u0627 Hooks \u062f\u06cc\u06af\u0631<\/strong><\/p>\n<p><strong>\u0627\u0641\u0632\u0627\u06cc\u0634 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 useEffect \u0628\u0627 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong><\/p>\n<p><code>useEffect<\/code>  \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0642\u0644\u0627\u0628 \u0647\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0631\u062f \u062a\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f.  \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 <code>useEffect<\/code> \u0628\u0627 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0644\u0627\u0642\u0627\u0646\u0647: \u0633\u0627\u062e\u062a \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u067e\u0627\u0633\u062e\u06af\u0648<\/strong><\/p>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u0639\u06a9\u0633 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">useResponsiveGallery<\/span><span class=\"p\">(<\/span><span class=\"nx\">images<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">columns<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setColumns<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">3<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">updateColumns<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setColumns<\/span><span class=\"p\">(<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">600<\/span> <span class=\"p\">?<\/span> <span class=\"mi\">4<\/span> <span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateColumns<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">updateColumns<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateColumns<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">columns<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\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 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u062a\u0639\u062f\u0627\u062f \u0633\u062a\u0648\u0646\u200c\u0647\u0627\u06cc \u06af\u0627\u0644\u0631\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f <code>useEffect<\/code> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647.<\/p>\n<p><strong>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0648 \u0646\u06a9\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f<\/strong><\/p>\n<p><strong>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc useEffect \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647\u060c \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0646\u0627\u0632\u06a9 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0627\u0632 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.  \u0627\u0632 \u0622\u0631\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0639\u0627\u0642\u0644\u0627\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u0639\u062f\u0627\u062f \u062f\u0641\u0639\u0627\u062a \u0627\u062c\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>React.memo<\/code> \u0648 <code>useCallback<\/code> \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0648 \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f.<\/p>\n<p><strong>\u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627\u06cc\u062c\u06cc \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect \u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n<p>\u062f\u0627\u0645 \u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u0628\u0627 <code>useEffect<\/code> \u0634\u0627\u0645\u0644 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u060c \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0627\u062b\u0631\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0646\u06cc\u0627\u0632 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f \u0648 \u0634\u0627\u0645\u0644 \u062a\u0648\u0627\u0628\u0639 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f.  \u0628\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0645\u0644 \u0627\u062b\u0631\u0627\u062a \u062e\u0648\u062f \u0648 \u062f\u0631\u06a9 \u067e\u06cc\u0627\u0645\u062f\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0632\u0646\u062f\u06af\u06cc \u0622\u0646\u0647\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0646\u062a\u06cc\u062c\u0647<\/strong><\/p>\n<p>\u0645\u0633\u062a\u0631\u06cc\u0646\u06af <code>useEffect<\/code> \u0633\u0646\u06af \u0628\u0646\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u06a9\u0627\u0631\u0622\u0645\u062f React \u0627\u0633\u062a.  \u0628\u0627 \u062f\u0631\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u060c \u0628\u0647 \u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0648 \u06a9\u0627\u0648\u0634 \u062f\u0631 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0642\u062f\u0631\u062a \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062e\u062a \u0648 \u0627\u0635\u0644\u0627\u062d \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc React \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u062f\u060c <code>useEffect<\/code> \u0627\u0628\u0632\u0627\u0631\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0631 \u062c\u0639\u0628\u0647 \u0627\u0628\u0632\u0627\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0634\u0645\u0627 \u0628\u0627\u0642\u06cc \u062e\u0648\u0627\u0647\u062f \u0645\u0627\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang React\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u062f\u0631 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0648\u0633\u0637 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0642\u0644\u0628 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0646\u0647\u0641\u062a\u0647 \u0627\u0633\u062a useEffect \u0642\u0644\u0627\u0628. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc React \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":70275,"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-70274","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\/70274","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=70274"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/70274\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/70275"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=70274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=70274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=70274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}