{"id":6495,"date":"2026-06-17T11:00:44","date_gmt":"2026-06-17T07:30:44","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6495"},"modified":"2026-06-17T11:00:44","modified_gmt":"2026-06-17T07:30:44","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%af%db%8c%d8%a8%d8%a7%da%af-%da%a9%d8%b1%d8%af%d9%86-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-react-%d8%a8%d8%a7-react-developer-to","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%af%db%8c%d8%a8%d8%a7%da%af-%da%a9%d8%b1%d8%af%d9%86-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-react-%d8%a8%d8%a7-react-developer-to\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u062f\u06cc\u0628\u0627\u06af \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0628\u0627 React Developer Tools"},"content":{"rendered":"<h2 data-section-id=\"43f4r3\" data-start=\"64\" data-end=\"72\">\u0645\u0642\u062f\u0645\u0647<\/h2>\n<p data-start=\"74\" data-end=\"369\">\u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u062f\u06cc\u0631 \u06cc\u0627 \u0632\u0648\u062f \u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a\u06cc \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u062f \u0686\u0631\u0627 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0631\u0646\u062f\u0631 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0686\u0631\u0627 State \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f \u06cc\u0627 \u0686\u0647 Props\u0647\u0627\u06cc\u06cc \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c <strong data-start=\"280\" data-end=\"305\">React Developer Tools<\/strong> \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p data-start=\"371\" data-end=\"524\">\u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u0647 \u062a\u0648\u0633\u0637 \u062a\u06cc\u0645 React \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647\u060c \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c Props\u060c State \u0648 Hook\u0647\u0627 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u062f\u0627\u062e\u0644 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0631\u0633\u06cc \u0648 \u062f\u06cc\u0628\u0627\u06af \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"526\" data-end=\"650\">\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 React Developer Tools \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u0645 \u0648 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr data-start=\"652\" data-end=\"655\" \/>\n<h2 data-section-id=\"1i1mrbk\" data-start=\"657\" data-end=\"670\">\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n<p data-start=\"672\" data-end=\"722\">\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul data-start=\"724\" data-end=\"818\">\n<li data-section-id=\"jqc6cx\" data-start=\"724\" data-end=\"747\">\u0622\u0634\u0646\u0627\u06cc\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 React<\/li>\n<li data-section-id=\"p0q0kf\" data-start=\"748\" data-end=\"767\">\u0646\u0635\u0628 Node.js \u0648 npm<\/li>\n<li data-section-id=\"17yp6us\" data-start=\"768\" data-end=\"784\">\u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React<\/li>\n<li data-section-id=\"x1fxce\" data-start=\"785\" data-end=\"818\">\u0645\u0631\u0648\u0631\u06af\u0631 Google Chrome \u06cc\u0627 Firefox<\/li>\n<\/ul>\n<hr data-start=\"820\" data-end=\"823\" \/>\n<h2 data-section-id=\"9dnx1x\" data-start=\"825\" data-end=\"855\">React Developer Tools \u0686\u06cc\u0633\u062a\u061f<\/h2>\n<p data-start=\"857\" data-end=\"923\">React Developer Tools \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n<ul data-start=\"925\" data-end=\"1129\">\n<li data-section-id=\"7ge9k3\" data-start=\"925\" data-end=\"974\">\u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u062a\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"pl7gf8\" data-start=\"975\" data-end=\"1011\">\u0645\u0642\u062f\u0627\u0631 Props \u0648 State \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"1df0gkm\" data-start=\"1012\" data-end=\"1036\">Hook\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"dx1rvw\" data-start=\"1037\" data-end=\"1084\">\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0631\u0646\u062f\u0631 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"tsyqyj\" data-start=\"1085\" data-end=\"1129\">\u0639\u0645\u0644\u06a9\u0631\u062f (Performance) \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<hr data-start=\"1131\" data-end=\"1134\" \/>\n<h2 data-section-id=\"l6sn6q\" data-start=\"1136\" data-end=\"1164\">\u0646\u0635\u0628 React Developer Tools<\/h2>\n<h3 data-section-id=\"1of5r8j\" data-start=\"1166\" data-end=\"1188\">\u0628\u0631\u0627\u06cc Google Chrome<\/h3>\n<p data-start=\"1190\" data-end=\"1259\">\u0627\u0632 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u06a9\u0631\u0648\u0645\u060c \u0627\u0641\u0632\u0648\u0646\u0647 React Developer Tools \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3 data-section-id=\"5ryzml\" data-start=\"1261\" data-end=\"1277\">\u0628\u0631\u0627\u06cc Firefox<\/h3>\n<p data-start=\"1279\" data-end=\"1343\">\u0646\u0633\u062e\u0647 Firefox \u0646\u06cc\u0632 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u0632\u06cc\u0644\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a.<\/p>\n<p data-start=\"1345\" data-end=\"1381\">\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0631\u06cc\u200c\u0627\u0633\u062a\u0627\u0631\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<hr data-start=\"1383\" data-end=\"1386\" \/>\n<h2 data-section-id=\"xo9xb0\" data-start=\"1388\" data-end=\"1417\">\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647 React<\/h2>\n<p data-start=\"1419\" data-end=\"1450\">\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>npx create-react-app react-devtools-demo\r\n<span class=\"\u037c10\">cd<\/span> react-devtools-demo\r\n<span class=\"\u037c10\">npm<\/span> <span class=\"\u037c10\">start<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1539\" data-end=\"1582\">\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 <code data-start=\"1548\" data-end=\"1556\">App.js<\/code> \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">import<\/span> { <span class=\"\u037c11\">useState<\/span> } <span class=\"\u037cv\">from<\/span> <span class=\"\u037cz\">\"react\"<\/span>;\r\n\r\n<span class=\"\u037cv\">function<\/span> <span class=\"\u037c11\">Counter<\/span>() {\r\n  <span class=\"\u037cv\">const<\/span> [<span class=\"\u037c11\">count<\/span>, <span class=\"\u037c11\">setCount<\/span>] <span class=\"\u037cv\">=<\/span> <span class=\"\u037c11\">useState<\/span>(<span class=\"\u037cy\">0<\/span>);\r\n\r\n  <span class=\"\u037cv\">return<\/span> (\r\n    <span class=\"\u037c13\">&lt;div&gt;<\/span>\r\n      <span class=\"\u037c13\">&lt;h2&gt;<\/span>Count: {<span class=\"\u037c11\">count<\/span>}<span class=\"\u037c13\">&lt;\/h2&gt;<\/span>\r\n\r\n      <span class=\"\u037c13\">&lt;button<\/span>\r\n        <span class=\"\u037c12\">onClick<\/span><span class=\"\u037cv\">=<\/span>{() =&gt; <span class=\"\u037c11\">setCount<\/span>(<span class=\"\u037c11\">count<\/span> <span class=\"\u037cv\">+<\/span> <span class=\"\u037cy\">1<\/span>)}\r\n      <span class=\"\u037c13\">&gt;<\/span>\r\n        \u0627\u0641\u0632\u0627\u06cc\u0634\r\n      <span class=\"\u037c13\">&lt;\/button&gt;<\/span>\r\n    <span class=\"\u037c13\">&lt;\/div&gt;<\/span>\r\n  );\r\n}\r\n\r\n<span class=\"\u037cv\">export<\/span> <span class=\"\u037cv\">default<\/span> <span class=\"\u037cv\">function<\/span> <span class=\"\u037c11\">App<\/span>() {\r\n  <span class=\"\u037cv\">return<\/span> (\r\n    <span class=\"\u037c13\">&lt;div&gt;<\/span>\r\n      <span class=\"\u037c13\">&lt;h1&gt;<\/span>React Developer Tools Demo<span class=\"\u037c13\">&lt;\/h1&gt;<\/span>\r\n      <span class=\"\u037c13\">&lt;Counter<\/span> <span class=\"\u037c13\">\/&gt;<\/span>\r\n    <span class=\"\u037c13\">&lt;\/div&gt;<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1993\" data-end=\"1996\" \/>\n<h2 data-section-id=\"11ul5n9\" data-start=\"1998\" data-end=\"2031\">\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 React Developer Tools<\/h2>\n<p data-start=\"2033\" data-end=\"2053\">\u0628\u0639\u062f \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647:<\/p>\n<ol data-start=\"2055\" data-end=\"2248\">\n<li data-section-id=\"sa9hgg\" data-start=\"2055\" data-end=\"2085\">\u0635\u0641\u062d\u0647 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"1ywwwn9\" data-start=\"2086\" data-end=\"2142\">\u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627\u0633\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0647 \u0648 <strong data-start=\"2115\" data-end=\"2126\">Inspect<\/strong> \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"6lw9ad\" data-start=\"2143\" data-end=\"2172\">\u0648\u0627\u0631\u062f Developer Tools \u0634\u0648\u06cc\u062f.<\/li>\n<li data-section-id=\"rpcwi\" data-start=\"2173\" data-end=\"2248\">\u062a\u0628\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc <strong data-start=\"2200\" data-end=\"2214\">Components<\/strong> \u0648 <strong data-start=\"2217\" data-end=\"2229\">Profiler<\/strong> \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/li>\n<\/ol>\n<p data-start=\"2250\" data-end=\"2301\">\u0627\u06cc\u0646 \u062a\u0628\u200c\u0647\u0627 \u062a\u0648\u0633\u0637 React Developer Tools \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<hr data-start=\"2303\" data-end=\"2306\" \/>\n<h2 data-section-id=\"cukrf7\" data-start=\"2308\" data-end=\"2333\">\u0628\u0631\u0631\u0633\u06cc \u062f\u0631\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627<\/h2>\n<p data-start=\"2335\" data-end=\"2399\">\u062f\u0631 \u062a\u0628 <strong data-start=\"2341\" data-end=\"2355\">Components<\/strong> \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>App\r\n \u2514\u2500 Counter<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2430\" data-end=\"2488\">\u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0622\u0646 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"2490\" data-end=\"2545\">\u0645\u062b\u0644\u0627\u064b \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 <code data-start=\"2506\" data-end=\"2515\">Counter<\/code> \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n<ul data-start=\"2547\" data-end=\"2570\">\n<li data-section-id=\"174vjxi\" data-start=\"2547\" data-end=\"2554\">Props<\/li>\n<li data-section-id=\"178hrsv\" data-start=\"2555\" data-end=\"2562\">State<\/li>\n<li data-section-id=\"16oi7js\" data-start=\"2563\" data-end=\"2570\">Hooks<\/li>\n<\/ul>\n<hr data-start=\"2572\" data-end=\"2575\" \/>\n<h2 data-section-id=\"15hmf6k\" data-start=\"2577\" data-end=\"2601\">\u0645\u0634\u0627\u0647\u062f\u0647 State \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/h2>\n<p data-start=\"2603\" data-end=\"2658\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0645\u0642\u062f\u0627\u0631 State \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Hooks\r\n \u2514\u2500 State: 0<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2692\" data-end=\"2724\">\u0627\u06af\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u00ab\u0627\u0641\u0632\u0627\u06cc\u0634\u00bb \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Hooks\r\n \u2514\u2500 State: 1<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2758\" data-end=\"2800\">\u0645\u0642\u062f\u0627\u0631 State \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u0646\u062f\u0647 \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<hr data-start=\"2802\" data-end=\"2805\" \/>\n<h2 data-section-id=\"1m64z2w\" data-start=\"2807\" data-end=\"2838\">\u062a\u063a\u06cc\u06cc\u0631 State \u0627\u0632 \u062f\u0627\u062e\u0644 DevTools<\/h2>\n<p data-start=\"2840\" data-end=\"2941\">\u06cc\u06a9\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628 React Developer Tools \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0642\u062f\u0627\u0631 State \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p data-start=\"2943\" data-end=\"2953\">\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>State: 1<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2977\" data-end=\"2983\">\u0631\u0627 \u0628\u0647:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>State: 100<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3009\" data-end=\"3020\">\u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p data-start=\"3022\" data-end=\"3074\">\u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0646\u06cc\u0632 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<hr data-start=\"3076\" data-end=\"3079\" \/>\n<h2 data-section-id=\"cqbhjm\" data-start=\"3081\" data-end=\"3096\">\u0645\u0634\u0627\u0647\u062f\u0647 Props<\/h2>\n<p data-start=\"3098\" data-end=\"3145\">\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">function<\/span> <span class=\"\u037c11\">Counter<\/span>({ initialValue }) {\r\n  <span class=\"\u037cv\">const<\/span> [<span class=\"\u037c11\">count<\/span>, <span class=\"\u037c11\">setCount<\/span>] <span class=\"\u037cv\">=<\/span>\r\n    <span class=\"\u037c11\">useState<\/span>(<span class=\"\u037c11\">initialValue<\/span>);\r\n\r\n  <span class=\"\u037cv\">return<\/span> (\r\n    <span class=\"\u037c13\">&lt;h2&gt;<\/span>{<span class=\"\u037c11\">count<\/span>}<span class=\"\u037c13\">&lt;\/h2&gt;<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3292\" data-end=\"3294\">\u0648:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">&lt;Counter<\/span> <span class=\"\u037c12\">initialValue<\/span><span class=\"\u037cv\">=<\/span>{<span class=\"\u037cy\">5<\/span>} <span class=\"\u037c13\">\/&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3337\" data-end=\"3360\">\u062f\u0631 DevTools \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Props\r\n \u2514\u2500 initialValue: 5<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3401\" data-end=\"3470\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0646\u06af\u0627\u0645 \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0627\u062f\u0647 \u0628\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<hr data-start=\"3472\" data-end=\"3475\" \/>\n<h2 data-section-id=\"19ud4yr\" data-start=\"3477\" data-end=\"3498\">\u062c\u0633\u062a\u062c\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627<\/h2>\n<p data-start=\"3500\" data-end=\"3557\">\u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0635\u062f\u0647\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<p data-start=\"3559\" data-end=\"3653\">\u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u062a\u0628 Components \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u062c\u0633\u062a\u062c\u0648 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0627\u0645 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Search Components...<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3689\" data-end=\"3695\">\u0645\u062b\u0644\u0627\u064b:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Counter<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"3718\" data-end=\"3721\" \/>\n<h2 data-section-id=\"1kghww0\" data-start=\"3723\" data-end=\"3759\">\u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0634\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062a\u062e\u0627\u0628<\/h2>\n<p data-start=\"3761\" data-end=\"3812\">\u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a React Developer Tools \u06af\u0632\u06cc\u0646\u0647\u200c\u0627\u06cc \u0628\u0627 \u0639\u0646\u0648\u0627\u0646:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Highlight updates<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3845\" data-end=\"3855\">\u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p data-start=\"3857\" data-end=\"3939\">\u0628\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0646\u060c \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u062c\u062f\u062f\u0627\u064b \u0631\u0646\u062f\u0631 \u0634\u0648\u062f\u060c \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<p data-start=\"3941\" data-end=\"3997\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<hr data-start=\"3999\" data-end=\"4002\" \/>\n<h2 data-section-id=\"143z1td\" data-start=\"4004\" data-end=\"4019\">\u0628\u0631\u0631\u0633\u06cc Hook\u0647\u0627<\/h2>\n<p data-start=\"4021\" data-end=\"4100\">React Developer Tools \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f Hook\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u062f\u0631 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n<p data-start=\"4102\" data-end=\"4107\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">const<\/span> [<span class=\"\u037c11\">count<\/span>, <span class=\"\u037c11\">setCount<\/span>] <span class=\"\u037cv\">=<\/span>\r\n  <span class=\"\u037c11\">useState<\/span>(<span class=\"\u037cy\">0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4162\" data-end=\"4174\">\u062f\u0631 DevTools:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Hooks\r\n \u2514\u2500 State: 0<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4208\" data-end=\"4233\">\u0648 \u0628\u0631\u0627\u06cc Hook\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">const<\/span> [<span class=\"\u037c11\">user<\/span>, <span class=\"\u037c11\">setUser<\/span>] <span class=\"\u037cv\">=<\/span>\r\n  <span class=\"\u037c11\">useState<\/span>(<span class=\"\u037cy\">null<\/span>);\r\n\r\n<span class=\"\u037cv\">const<\/span> [<span class=\"\u037c11\">loading<\/span>, <span class=\"\u037c11\">setLoading<\/span>] <span class=\"\u037cv\">=<\/span>\r\n  <span class=\"\u037c11\">useState<\/span>(<span class=\"\u037cy\">false<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4339\" data-end=\"4357\">\u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Hooks\r\n \u251c\u2500 State: null\r\n \u2514\u2500 State: false<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"4411\" data-end=\"4414\" \/>\n<h2 data-section-id=\"ke180p\" data-start=\"4416\" data-end=\"4438\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Profiler<\/h2>\n<p data-start=\"4440\" data-end=\"4496\">\u062a\u0628 <strong data-start=\"4443\" data-end=\"4455\">Profiler<\/strong> \u0628\u0631\u0627\u06cc \u062a\u062d\u0644\u06cc\u0644 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p data-start=\"4498\" data-end=\"4526\">\u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<ul data-start=\"4528\" data-end=\"4640\">\n<li data-section-id=\"1a15us1\" data-start=\"4528\" data-end=\"4560\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0646\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"imxnvf\" data-start=\"4561\" data-end=\"4604\">\u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0631\u0646\u062f\u0631 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"ddup59\" data-start=\"4605\" data-end=\"4640\">\u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h3 data-section-id=\"1wtts3t\" data-start=\"4642\" data-end=\"4663\">\u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644\u200c\u06af\u06cc\u0631\u06cc<\/h3>\n<p data-start=\"4665\" data-end=\"4680\">\u062f\u0631 \u062a\u0628 Profiler:<\/p>\n<ol data-start=\"4682\" data-end=\"4769\">\n<li data-section-id=\"16rze14\" data-start=\"4682\" data-end=\"4710\">\u0631\u0648\u06cc <strong data-start=\"4689\" data-end=\"4699\">Record<\/strong> \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"k29mji\" data-start=\"4711\" data-end=\"4742\">\u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/li>\n<li data-section-id=\"1eksasf\" data-start=\"4743\" data-end=\"4769\">\u0631\u0648\u06cc <strong data-start=\"4750\" data-end=\"4758\">Stop<\/strong> \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ol>\n<p data-start=\"4771\" data-end=\"4811\">React \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u062f.<\/p>\n<hr data-start=\"4813\" data-end=\"4816\" \/>\n<h2 data-section-id=\"1xgsw1q\" data-start=\"4818\" data-end=\"4847\">\u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc<\/h2>\n<p data-start=\"4849\" data-end=\"4900\">\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p data-start=\"4902\" data-end=\"4930\">Profiler \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Counter rendered 12 times<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4971\" data-end=\"4999\">\u062f\u0631 \u0686\u0646\u06cc\u0646 \u0634\u0631\u0627\u06cc\u0637\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c11\">React<\/span><span class=\"\u037cv\">.<\/span>memo()<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5026\" data-end=\"5029\">\u06cc\u0627:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c11\">useMemo<\/span>()<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5053\" data-end=\"5054\">\u0648<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c11\">useCallback<\/span>()<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5082\" data-end=\"5095\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<hr data-start=\"5097\" data-end=\"5100\" \/>\n<h2 data-section-id=\"1548jyf\" data-start=\"5102\" data-end=\"5135\">\u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0632 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647<\/h2>\n<p data-start=\"5137\" data-end=\"5198\">\u06cc\u06a9\u06cc \u0627\u0632 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc DevTools \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0639\u0646\u0627\u0635\u0631 \u0635\u0641\u062d\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"5200\" data-end=\"5236\">\u0631\u0648\u06cc \u0622\u06cc\u06a9\u0648\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>Select an element<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5269\" data-end=\"5303\">\u0633\u067e\u0633 \u0631\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"5305\" data-end=\"5377\">React Developer Tools \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<hr data-start=\"5379\" data-end=\"5382\" \/>\n<h2 data-section-id=\"swu4m8\" data-start=\"5384\" data-end=\"5395\">\u0646\u06a9\u0627\u062a \u0645\u0647\u0645<\/h2>\n<ul data-start=\"5397\" data-end=\"5714\">\n<li data-section-id=\"oy8rww\" data-start=\"5397\" data-end=\"5485\">React Developer Tools \u0641\u0642\u0637 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 (Development) \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<li data-section-id=\"1l8do67\" data-start=\"5486\" data-end=\"5540\">\u062f\u0631 \u0646\u0633\u062e\u0647 Production \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0631\u062e\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u062d\u062f\u0648\u062f \u0634\u0648\u0646\u062f.<\/li>\n<li data-section-id=\"pzr1is\" data-start=\"5541\" data-end=\"5631\">\u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Profiler \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0631\u0627 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u062f.<\/li>\n<li data-section-id=\"12ubkne\" data-start=\"5632\" data-end=\"5714\">\u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Hook\u0647\u0627\u060c DevTools \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0644\u062d\u0638\u0647\u200c\u0627\u06cc \u0622\u0646\u200c\u0647\u0627\u0633\u062a.<\/li>\n<\/ul>\n<hr data-start=\"5716\" data-end=\"5719\" \/>\n<h2 data-section-id=\"530oc4\" data-start=\"5721\" data-end=\"5732\">\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/h2>\n<p data-start=\"5734\" data-end=\"5846\">React Developer Tools \u06cc\u06a9\u06cc \u0627\u0632 \u0636\u0631\u0648\u0631\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 React \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f:<\/p>\n<ul data-start=\"5848\" data-end=\"6028\">\n<li data-section-id=\"1qdy9a0\" data-start=\"5848\" data-end=\"5884\">\u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"165kd7e\" data-start=\"5885\" data-end=\"5915\">Props \u0648 State \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"106toys\" data-start=\"5916\" data-end=\"5949\">Hook\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"ddup59\" data-start=\"5950\" data-end=\"5985\">\u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li data-section-id=\"2mwgus\" data-start=\"5986\" data-end=\"6028\">\u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 Profiler \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p data-start=\"6030\" data-end=\"6161\">\u0627\u06af\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062c\u062f\u06cc \u0628\u0627 React \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u062a\u0633\u0644\u0637 \u0628\u0631 React Developer Tools \u0633\u0631\u0639\u062a \u062a\u0648\u0633\u0639\u0647 \u0648 \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p data-start=\"6030\" data-end=\"6161\">\n<p data-start=\"6030\" data-end=\"6161\">\n<p data-start=\"6030\" data-end=\"6161\">\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 <strong><a href=\"https:\/\/parmin.cloud\/\">\u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n<div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u062f\u06cc\u0631 \u06cc\u0627 \u0632\u0648\u062f \u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a\u06cc \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u062f \u0686\u0631\u0627 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0631\u0646\u062f\u0631 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0686\u0631\u0627 State \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f \u06cc\u0627 \u0686\u0647 Props\u0647\u0627\u06cc\u06cc \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c React Developer Tools \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u0647 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[67,190],"tags":[1287,1290,1292,1286,1288,1270,1284,1289,1285,1291],"class_list":["post-6495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag-debugging-react-applications","tag-react-components","tag-react-developer-tools","tag-react-hooks","tag-react-profiler","tag--react","tag---react","tag-1285"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6495"}],"version-history":[{"count":1,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6495\/revisions"}],"predecessor-version":[{"id":6497,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6495\/revisions\/6497"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6496"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}