{"id":6617,"date":"2026-07-11T17:00:08","date_gmt":"2026-07-11T13:30:08","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6617"},"modified":"2026-07-11T17:00:08","modified_gmt":"2026-07-11T13:30:08","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-state-%d8%af%d8%b1-%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-%d8%a7%d8%b3%d8%aa","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-state-%d8%af%d8%b1-%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-%d8%a7%d8%b3%d8%aa\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0645\u062f\u06cc\u0631\u06cc\u062a State \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Hook\u0647\u0627"},"content":{"rendered":"

\u0645\u0642\u062f\u0645\u0647<\/h2>\n

\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u062f\u0631 React\u060c State<\/strong> \u06cc\u0627 \u00ab\u0648\u0636\u0639\u06cc\u062a\u00bb \u0627\u0633\u062a. State \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0637\u0648\u0644 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646\u200c\u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f\u060c \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0646\u06cc\u0632 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 React\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a State \u062a\u0646\u0647\u0627 \u062f\u0631 Class Component<\/strong>\u0647\u0627 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0628\u0648\u062f \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 State \u0645\u062c\u0628\u0648\u0631 \u0628\u0648\u062f\u0646\u062f \u0627\u0632 \u0645\u062a\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f this.setState()<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0627\u0645\u0627 \u0627\u0632 \u0646\u0633\u062e\u0647 React 16.8<\/strong> \u0628\u0647 \u0628\u0639\u062f\u060c \u0642\u0627\u0628\u0644\u06cc\u062a\u06cc \u0628\u0647 \u0646\u0627\u0645 Hooks<\/strong> \u0645\u0639\u0631\u0641\u06cc \u0634\u062f \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 State \u0648 \u0633\u0627\u06cc\u0631 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u062f\u0631 Functional Component<\/strong>\u0647\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0627\u0645\u0631\u0648\u0632\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f React \u0627\u0632 Hook\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u061b \u0632\u06cc\u0631\u0627 \u06a9\u062f \u0631\u0627 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u060c \u062e\u0648\u0627\u0646\u0627\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f \u0686\u06af\u0648\u0646\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Hook\u0647\u0627\u060c State \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useState<\/code> \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f.<\/p>\n

\n

\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n

\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0622\u0634\u0646\u0627 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n

    \n
  • JavaScript ES6<\/li>\n
  • \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 React<\/li>\n
  • JSX<\/li>\n
  • \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc (Functional Components)<\/li>\n
  • npm \u0648 Node.js<\/li>\n<\/ul>\n

    \u0627\u06af\u0631 \u0647\u0646\u0648\u0632 React \u0631\u0627 \u0646\u0635\u0628 \u0646\u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u200c\u0634\u0648\u062f \u0627\u0628\u062a\u062f\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 Node.js \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

    \n

    State \u0686\u06cc\u0633\u062a\u061f<\/h1>\n

    State \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f\u060c React \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0645\u062c\u062f\u062f\u0627\u064b Render \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

    \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06cc\u06a9 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n

    \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0635\u0641\u0631 \u0627\u0633\u062a.<\/p>\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n
    \n
    \n
    \n
    \n
    \n
    Count: 0<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n
    \n
    \n
    \n
    \n
    \n
    Count: 1<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0628\u0627 \u0647\u0631 \u06a9\u0644\u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n
    \n
    \n
    \n
    \n
    \n
    Count: 2\r\n\r\nCount: 3\r\n\r\nCount: 4<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0647\u0645\u0627\u0646 State \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a.<\/p>\n
    \n
    Hook \u0686\u06cc\u0633\u062a\u061f<\/h1>\n
    Hook\u0647\u0627 \u062a\u0648\u0627\u0628\u0639 \u0648\u06cc\u0698\u0647\u200c\u0627\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 React \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Class Component \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 React \u0631\u0627 \u062f\u0631 Functional Component\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f.<\/p>\n
    \u0628\u0631\u062e\u06cc \u0627\u0632 Hook\u0647\u0627\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0639\u0628\u0627\u0631\u062a\u200c\u0627\u0646\u062f \u0627\u0632:<\/p>\n
      \n
    • useState<\/li>\n
    • useEffect<\/li>\n
    • useContext<\/li>\n
    • useReducer<\/li>\n
    • useMemo<\/li>\n
    • useCallback<\/li>\n
    • useRef<\/li>\n<\/ul>\n
      \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062a\u0645\u0631\u06a9\u0632 \u0645\u0627 \u0631\u0648\u06cc useState<\/strong> \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n
      \n
      Hook useState<\/code><\/span><\/h1>\n
      useState<\/code> \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0648 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 Hook \u062f\u0631 React \u0627\u0633\u062a.<\/p>\n
      \u0627\u06cc\u0646 Hook \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n
        \n
      • \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc State<\/li>\n
      • \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 State<\/li>\n<\/ul>\n
        \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0644\u06cc \u0622\u0646 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a.<\/p>\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        const<\/span> [state<\/span>, setState<\/span>] =<\/span> useState<\/span>(initialValue<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631:<\/p>\n
          \n
        • state<\/code> \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a.<\/li>\n
        • setState<\/code> \u062a\u0627\u0628\u0639 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u0633\u062a.<\/li>\n
        • initialValue<\/code> \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 State \u0645\u062d\u0633\u0648\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<\/ul>\n
          \n
          \u0627\u0648\u0644\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0627 useState<\/h1>\n
          \u0627\u0628\u062a\u062f\u0627 Hook \u0631\u0627 \u0648\u0627\u0631\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          <\/div>\n<\/div>\n<\/div>\n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          import<\/span> { useState<\/span> } from<\/span> \"react\"<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \n
          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \u0633\u067e\u0633 \u06cc\u06a9 State \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          <\/div>\n<\/div>\n<\/div>\n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          const<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \n
          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n
            \n
          • \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u0628\u0631 0 \u0627\u0633\u062a.<\/li>\n
          • \u0647\u0631 \u0632\u0645\u0627\u0646 setCount<\/code> \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/li>\n<\/ul>\n
            \n
            \u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u062f\u0627\u0631 State<\/h1>\n
            \u0627\u06a9\u0646\u0648\u0646 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 JSX \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645.<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            function<\/span> App<\/span>() {\r\n\r\n  const<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);\r\n\r\n  return<\/span> (\r\n\r\n    <h1><\/span>{count<\/span>}<\/h1><\/span>\r\n\r\n  );\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 Render \u062e\u0631\u0648\u062c\u06cc \u0628\u0631\u0627\u0628\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0628\u0627:<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n
            \n
            \n
            \n
            \n
            \n
            0<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 State<\/h1>\n
            \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <button<\/span>\r\n\r\nonClick<\/span>=<\/span>{() => setCount<\/span>(count<\/span> +<\/span> 1<\/span>)}\r\n\r\n><\/span>\r\n\r\nIncrease\r\n\r\n<\/button><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u0628\u0627 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9:<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n
            \n
            \n
            \n
            \n
            \n
            0\r\n\r\n\u2193\r\n\r\n1\r\n\r\n\u2193\r\n\r\n2\r\n\r\n\u2193\r\n\r\n3<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0635\u0641\u062d\u0647 Refresh \u0634\u0648\u062f\u060c React \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n
            \n
            \u0686\u0631\u0627 \u0646\u0628\u0627\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\u0645\u061f<\/h1>\n
            \u06af\u0627\u0647\u06cc \u0627\u0641\u0631\u0627\u062f \u062a\u0627\u0632\u0647\u200c\u06a9\u0627\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            count<\/span> =<\/span> count<\/span> +<\/span> 1<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u06cc\u0627<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            count<\/span>++<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0627\u0634\u062a\u0628\u0627\u0647 \u0627\u0633\u062a.<\/p>\n
            \u062f\u0644\u06cc\u0644 \u0622\u0646 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 React \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u0645\u062a\u0648\u062c\u0647 \u062a\u063a\u06cc\u06cc\u0631 State \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 Setter \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
            \u0631\u0648\u0634 \u0635\u062d\u06cc\u062d:<\/p>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            setCount<\/span>(count<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 React \u0645\u062a\u0648\u062c\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0634\u062f\u0647 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 Render \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
            \n
            \u0641\u0631\u0622\u06cc\u0646\u062f Render \u062f\u0631 React<\/h1>\n
            \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0627\u0628\u0639 Setter \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n
              \n
            1. \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n
            2. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n
            3. JSX \u0645\u062c\u062f\u062f\u0627\u064b \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n
            4. React \u0641\u0642\u0637 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 DOM \u0631\u0627 \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ol>\n
              \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 React \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0633\u06cc\u0627\u0631 \u0628\u0627\u0644\u0627\u06cc\u06cc \u062f\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0627\u0631\u062f.<\/p>\n
              \n
              \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 State \u0628\u0627 useState<\/h2>\n
              \u062f\u0631 \u0645\u062b\u0627\u0644 \u0642\u0628\u0644\u06cc \u0641\u0642\u0637 \u06cc\u06a9 \u0639\u062f\u062f \u0631\u0627 \u062f\u0627\u062e\u0644 State \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c \u0627\u0645\u0627 useState<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0631 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n
              \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644:<\/p>\n
                \n
              • String<\/li>\n
              • Number<\/li>\n
              • Boolean<\/li>\n
              • Array<\/li>\n
              • Object<\/li>\n
              • \u062d\u062a\u06cc Function<\/li>\n<\/ul>\n
                \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0647\u0631\u06a9\u062f\u0627\u0645 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
                \n
                \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 String<\/h1>\n
                \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                import<\/span> { useState<\/span> } from<\/span> \"react\"<\/span>;\r\n\r\nfunction<\/span> App<\/span>() {\r\n\r\n    const<\/span> [name<\/span>, setName<\/span>] =<\/span> useState<\/span>(\"Ali\"<\/span>);\r\n\r\n    return<\/span> (\r\n        <><\/span>\r\n            <h2><\/span>{name<\/span>}<\/h2><\/span>\r\n\r\n            <button<\/span> onClick<\/span>=<\/span>{() => setName<\/span>(\"Sara\"<\/span>)}><\/span>\r\n                Change Name\r\n            <\/button><\/span>\r\n        <\/><\/span>\r\n    );\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062e\u0631\u0648\u062c\u06cc:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n
                \n
                \n
                \n
                \n
                \n
                Ali<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n
                \n
                \n
                \n
                \n
                \n
                Sara<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Boolean<\/h1>\n
                Boolean \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u0627 \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                const<\/span> [isLoggedIn<\/span>, setIsLoggedIn<\/span>] =<\/span> useState<\/span>(false<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u062f\u0631 JSX:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                {\r\n    isLoggedIn<\/span>\r\n        ?<\/span> <p><\/span>Welcome<\/p><\/span>\r\n        :<\/span> <p><\/span>Please Login<\/p><\/span>\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <button<\/span>\r\nonClick<\/span>=<\/span>{() => setIsLoggedIn<\/span>(true<\/span>)}\r\n><\/span>\r\nLogin\r\n<\/button><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u06cc\u0627 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                setIsLoggedIn<\/span>(!<\/span>isLoggedIn<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Array<\/h1>\n
                \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0627\u06cc\u062c\u200c\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc React\u060c \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0633\u062a.<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                const<\/span> [users<\/span>, setUsers<\/span>] =<\/span> useState<\/span>([\r\n    \"Ali\"<\/span>,\r\n    \"Sara\"<\/span>,\r\n    \"Reza\"<\/span>\r\n]);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <ul><\/span>\r\n\r\n{\r\nusers<\/span>.<\/span>map(user<\/span> => (\r\n\r\n<li<\/span> key<\/span>=<\/span>{user<\/span>}><\/span>{user<\/span>}<\/li><\/span>\r\n\r\n))\r\n}\r\n\r\n<\/ul><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0639\u0636\u0648 \u062c\u062f\u06cc\u062f<\/h1>\n
                \u062f\u0631 React \u0646\u0628\u0627\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0622\u0631\u0627\u06cc\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n
                \u0631\u0648\u0634 \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                users<\/span>.<\/span>push(\"Nima\"<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u06cc\u0627<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                users<\/span>[0<\/span>] =<\/span> \"Amir\"<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0628\u0627\u0639\u062b Render \u0645\u062c\u062f\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
                \u0631\u0648\u0634 \u0635\u062d\u06cc\u062d:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                setUsers<\/span>([\r\n    ...users<\/span>,\r\n    \"Nima\"<\/span>\r\n]);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u062e\u0631\u0648\u062c\u06cc:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n
                \n
                \n
                \n
                \n
                \n
                Ali\r\n\r\nSara\r\n\r\nReza\r\n\r\nNima<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Spread Operator (...<\/code>)<\/strong> \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062c\u062f\u06cc\u062f \u0633\u0627\u062e\u062a\u0647 \u0634\u0648\u062f \u0648 React \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u062f.<\/p>\n
                \n
                \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Object<\/h1>\n
                \u06af\u0627\u0647\u06cc \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0686\u0646\u062f \u0648\u06cc\u0698\u06af\u06cc \u0645\u0631\u062a\u0628\u0637 \u0631\u0627 \u062f\u0627\u062e\u0644 \u06cc\u06a9 State \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                const<\/span> [user<\/span>, setUser<\/span>] =<\/span> useState<\/span>({\r\n\r\n    name: \"Ali\"<\/span>,\r\n\r\n    age: 25<\/span>,\r\n\r\n    city: \"Tehran\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <h2><\/span>{user<\/span>.<\/span>name}<\/h2><\/span>\r\n\r\n<<\/span>p<\/span>><\/span>{user.age}<<\/span>\/p><\/span>\r\n\r\n<<\/span>p<\/span>><\/span>{user.city}<<\/span>\/p><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc Object<\/h1>\n
                \u0627\u0634\u062a\u0628\u0627\u0647 \u0631\u0627\u06cc\u062c:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                user<\/span>.<\/span>name =<\/span> \"Sara\"<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u06cc\u0627<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                setUser<\/span>({\r\n    name: \"Sara\"<\/span>\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0631\u0648\u0634 \u062f\u0648\u0645 \u0627\u06af\u0631\u0686\u0647 \u0627\u0632 Setter \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u062a\u0645\u0627\u0645 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062d\u0630\u0641 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n
                \u0631\u0648\u0634 \u0635\u062d\u06cc\u062d:<\/p>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                <\/div>\n<\/div>\n<\/div>\n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                setUser<\/span>({\r\n\r\n    ...user<\/span>,\r\n\r\n    name: \"Sara\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \n
                <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                \u0627\u06a9\u0646\u0648\u0646 \u0641\u0642\u0637 \u0645\u0642\u062f\u0627\u0631 name<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u062d\u0641\u0638 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n
                \n
                \u0686\u0646\u062f State \u06cc\u0627 \u06cc\u06a9 State\u061f<\/h1>\n
                \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645:<\/p>\n
                  \n
                • \u0646\u0627\u0645<\/li>\n
                • \u0627\u06cc\u0645\u06cc\u0644<\/li>\n
                • \u0633\u0646<\/li>\n<\/ul>\n
                  \u062f\u0648 \u0631\u0648\u0634 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n
                  \u0631\u0648\u0634 \u0627\u0648\u0644:<\/p>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  const<\/span> [name<\/span>, setName<\/span>] =<\/span> useState<\/span>(\"\"<\/span>);\r\n\r\nconst<\/span> [email<\/span>, setEmail<\/span>] =<\/span> useState<\/span>(\"\"<\/span>);\r\n\r\nconst<\/span> [age<\/span>, setAge<\/span>] =<\/span> useState<\/span>(0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u0631\u0648\u0634 \u062f\u0648\u0645:<\/p>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  const<\/span> [user<\/span>, setUser<\/span>] =<\/span> useState<\/span>({\r\n\r\n    name: \"\"<\/span>,\r\n\r\n    email: \"\"<\/span>,\r\n\r\n    age: 0<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u0647\u0631 \u062f\u0648 \u0631\u0648\u0634 \u0635\u062d\u06cc\u062d \u0647\u0633\u062a\u0646\u062f.<\/p>\n
                  \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0647 \u0647\u0645 \u0645\u0631\u062a\u0628\u0637 \u0647\u0633\u062a\u0646\u062f (\u0645\u062b\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631)\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 Object \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062e\u0648\u0627\u0646\u0627\u062a\u0631 \u0627\u0633\u062a. \u0627\u0645\u0627 \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u0633\u062a\u0642\u0644 \u0628\u0627\u0634\u0646\u062f\u060c \u062a\u0639\u0631\u06cc\u0641 State\u0647\u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u062f \u0631\u0627 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
                  \n
                  \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 State \u0641\u0642\u0637 \u06cc\u06a9\u200c\u0628\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f<\/h1>\n
                  \u06cc\u06a9\u06cc \u0627\u0632 \u0646\u06a9\u0627\u062a\u06cc \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062a\u0627\u0632\u0647\u200c\u06a9\u0627\u0631 \u0628\u0627 \u0622\u0646 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 useState<\/code> \u0641\u0642\u0637 \u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 Render \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  const<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u0627\u06af\u0631 \u0628\u0639\u062f\u0627\u064b \u0645\u0642\u062f\u0627\u0631 0<\/code> \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c React \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f\u061b \u0632\u06cc\u0631\u0627 \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc State \u0631\u0627 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f.<\/p>\n
                  \u0627\u06af\u0631 \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f State \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a Props \u06cc\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0634\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 Hook\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f useEffect<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n
                  \n
                  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc State<\/h2>\n
                  \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0648\u0627\u0642\u0639 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f State \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0622\u0646 \u0648\u0627\u0628\u0633\u062a\u0647 \u0627\u0633\u062a.<\/p>\n
                  \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u0634\u0645\u0627\u0631\u0646\u062f\u0647:<\/p>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  setCount<\/span>(count<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631\u0633\u062a \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0627\u06af\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u067e\u0634\u062a \u0633\u0631 \u0647\u0645 \u0645\u0642\u062f\u0627\u0631 State \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u062a\u06cc\u062c\u0647 \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u06a9\u0646\u06cc\u062f.<\/p>\n
                  React \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0627\u06cc\u06cc\u060c \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc State \u0631\u0627 Batch<\/strong> \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06cc\u0639\u0646\u06cc \u0686\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
                  \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u062f\u0631 \u0686\u0646\u06cc\u0646 \u0634\u0631\u0627\u06cc\u0637\u06cc \u0627\u0632 Callback Function<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
                  \n
                  \u0631\u0648\u0634 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u06cc<\/h1>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  setCount<\/span>(previousCount<\/span> => previousCount<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u06cc\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u06a9\u0648\u062a\u0627\u0647\u200c\u062a\u0631:<\/p>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  setCount<\/span>(prev<\/span> => prev<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \n
                  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627:<\/p>\n
                    \n
                  • prev<\/code> \u0622\u062e\u0631\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0642\u0639\u06cc State \u0627\u0633\u062a.<\/li>\n
                  • React \u0647\u0645\u06cc\u0634\u0647 \u0645\u0642\u062f\u0627\u0631 \u0635\u062d\u06cc\u062d \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<\/ul>\n
                    \n
                    \u0645\u062b\u0627\u0644<\/h1>\n
                    \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9\u060c \u0645\u0642\u062f\u0627\u0631 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0633\u0647 \u0648\u0627\u062d\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n
                    \u0631\u0648\u0634 \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    setCount<\/span>(count<\/span> +<\/span> 1<\/span>);\r\n\r\nsetCount<\/span>(count<\/span> +<\/span> 1<\/span>);\r\n\r\nsetCount<\/span>(count<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \u062e\u0631\u0648\u062c\u06cc:<\/p>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    <\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    1<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \u0646\u0647 3!<\/p>\n
                    \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u0633\u0647 \u062f\u0633\u062a\u0648\u0631 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 count<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n
                    \n
                    \u0631\u0648\u0634 \u0635\u062d\u06cc\u062d:<\/p>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    setCount<\/span>(prev<\/span> => prev<\/span> +<\/span> 1<\/span>);\r\n\r\nsetCount<\/span>(prev<\/span> => prev<\/span> +<\/span> 1<\/span>);\r\n\r\nsetCount<\/span>(prev<\/span> => prev<\/span> +<\/span> 1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \u0627\u06a9\u0646\u0648\u0646 \u062e\u0631\u0648\u062c\u06cc:<\/p>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    <\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    3<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n
                    \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0627\u0633\u062a \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
                    \n
                    \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 State \u062f\u0631 \u0641\u0631\u0645\u200c\u0647\u0627<\/h1>\n
                    \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0627\u06cc\u062c\u200c\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc useState<\/code> \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0645\u200c\u0647\u0627\u0633\u062a.<\/p>\n
                    \u0645\u062b\u0627\u0644:<\/p>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    import<\/span> { useState<\/span> } from<\/span> \"react\"<\/span>;\r\n\r\nfunction<\/span> App<\/span>() {\r\n\r\n    const<\/span> [name<\/span>, setName<\/span>] =<\/span> useState<\/span>(\"\"<\/span>);\r\n\r\n    return<\/span> (\r\n\r\n        <><\/span>\r\n\r\n            <input<\/span>\r\n\r\n                type<\/span>=<\/span>\"text\"<\/span>\r\n\r\n                value<\/span>=<\/span>{name<\/span>}\r\n\r\n                onChange<\/span>=<\/span>{(e<\/span>) => setName<\/span>(e<\/span>.<\/span>target.<\/span>value)}\r\n\r\n            \/><\/span>\r\n\r\n            <h2><\/span>{name<\/span>}<\/h2><\/span>\r\n\r\n        <\/><\/span>\r\n\r\n    );\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n
                      \n
                    • \u0645\u0642\u062f\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u062f\u0627\u062e\u0644 State \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n
                    • \u0628\u0627 \u0647\u0631 \u062a\u0627\u06cc\u067e \u06a9\u0627\u0631\u0628\u0631\u060c \u0645\u0642\u062f\u0627\u0631 State \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n
                    • \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<\/ul>\n
                      \n
                      \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0646\u062f \u0641\u06cc\u0644\u062f \u0641\u0631\u0645<\/h1>\n
                      \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0641\u0631\u0645 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      const<\/span> [form<\/span>, setForm<\/span>] =<\/span> useState<\/span>({\r\n\r\n    firstName: \"\"<\/span>,\r\n\r\n    lastName: \"\"<\/span>,\r\n\r\n    email: \"\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      onChange<\/span>=<\/span>{(e<\/span>) =>\r\n\r\nsetForm<\/span>({\r\n\r\n...form<\/span>,\r\n\r\nfirstName: e<\/span>.<\/span>target.<\/span>value\r\n\r\n})\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \u0628\u0631\u0627\u06cc \u0633\u0627\u06cc\u0631 \u0641\u06cc\u0644\u062f\u0647\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0631\u0648\u0634 \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
                      \n
                      \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u067e\u0648\u06cc\u0627<\/h1>\n
                      \u0631\u0648\u0634 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u200c\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0641\u06cc\u0644\u062f \u0627\u0633\u062a.<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <input<\/span>\r\n\r\nname<\/span>=<\/span>\"email\"<\/span>\r\n\r\nonChange<\/span>=<\/span>{handleChange<\/span>}\r\n\r\n\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \u062a\u0627\u0628\u0639:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      function<\/span> handleChange<\/span>(event<\/span>){\r\n\r\nsetForm<\/span>({\r\n\r\n...form<\/span>,\r\n\r\n[event<\/span>.<\/span>target.<\/span>name]: event<\/span>.<\/span>target.<\/span>value\r\n\r\n});\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \u0627\u06a9\u0646\u0648\u0646 \u0647\u0645\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0641\u0631\u0645 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n
                      \n
                      \u0642\u0648\u0627\u0646\u06cc\u0646 Hook\u0647\u0627<\/h1>\n
                      React \u0628\u0631\u0627\u06cc Hook\u0647\u0627 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0645\u0634\u062e\u0635\u06cc \u062f\u0627\u0631\u062f.<\/p>\n
                      1- \u0641\u0642\u0637 \u062f\u0631 \u0628\u0627\u0644\u0627\u062a\u0631\u06cc\u0646 \u0633\u0637\u062d \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/h2>\n
                      \u062f\u0631\u0633\u062a:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      const<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      if<\/span>(isLoggedIn<\/span>){\r\n\r\nconst<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n
                      <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      Hook \u0646\u0628\u0627\u06cc\u062f \u062f\u0627\u062e\u0644:<\/p>\n
                        \n
                      • if<\/li>\n
                      • else<\/li>\n
                      • switch<\/li>\n
                      • for<\/li>\n
                      • while<\/li>\n
                      • try\/catch<\/li>\n<\/ul>\n
                        \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u062f.<\/p>\n
                        \n
                        2- \u0641\u0642\u0637 \u062f\u0627\u062e\u0644 Functional Component \u06cc\u0627 Hook \u0633\u0641\u0627\u0631\u0634\u06cc<\/h2>\n
                        \u062f\u0631\u0633\u062a:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        function<\/span> App<\/span>(){\r\n\r\nconst<\/span> [count<\/span>,setCount<\/span>]=<\/span>useState<\/span>(0<\/span>);\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        function<\/span> calculate<\/span>(){\r\n\r\nconst<\/span> [count<\/span>,setCount<\/span>]=<\/span>useState<\/span>(0<\/span>);\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627\u06cc\u062c<\/h1>\n
                        \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 State<\/h3>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        user<\/span>.<\/span>name=<\/span>\"Ali\"<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 push<\/h3>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        users<\/span>.<\/span>push(\"Sara\"<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 splice<\/h3>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        users<\/span>.<\/span>splice(0<\/span>,1<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 Object<\/h3>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        person<\/span>.<\/span>age=<\/span>35<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 Spread Operator<\/h3>\n
                        \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        setUser<\/span>({\r\n\r\nname:\"Ali\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \u0635\u062d\u06cc\u062d:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        setUser<\/span>({\r\n\r\n...user<\/span>,\r\n\r\nname:\"Ali\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 \u0686\u0646\u062f State \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/h1>\n
                        \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0633\u062a\u0642\u0644 \u0647\u0633\u062a\u0646\u062f:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        const<\/span> [theme<\/span>, setTheme<\/span>] =<\/span> useState<\/span>(\"light\"<\/span>);\r\n\r\nconst<\/span> [language<\/span>, setLanguage<\/span>] =<\/span> useState<\/span>(\"fa\"<\/span>);\r\n\r\nconst<\/span> [count<\/span>, setCount<\/span>] =<\/span> useState<\/span>(0<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \u0627\u06cc\u0646 \u0631\u0648\u0634 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u062f.<\/p>\n
                        \u0627\u0645\u0627 \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 \u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u0647\u0633\u062a\u0646\u062f:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        const<\/span> [user<\/span>, setUser<\/span>] =<\/span> useState<\/span>({\r\n\r\nname:\"Ali\"<\/span>,\r\n\r\nemail:\"\"<\/span>,\r\n\r\nphone:\"\"<\/span>\r\n\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \n
                        <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 Object \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631\u06cc \u0627\u0633\u062a.<\/p>\n
                        \n
                        \u0646\u06a9\u0627\u062a \u0645\u0647\u0645 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc<\/h1>\n
                          \n
                        • \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 State \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n
                        • \u0628\u0631\u0627\u06cc \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n
                        • \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0627\u0633\u062a\u060c \u0627\u0632 \u0641\u0631\u0645 \u062a\u0627\u0628\u0639\u06cc setState(prev => ...)<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n
                        • State \u0631\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u06a9\u0648\u0686\u06a9 \u0648 \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.<\/li>\n
                        • \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0628\u06cc\u0646 \u0686\u0646\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062f\u0631 State \u0645\u062d\u0644\u06cc \u0646\u06af\u0647 \u0646\u062f\u0627\u0631\u06cc\u062f\u061b \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 Context API \u06cc\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Redux \u0648 Zustand \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n
                          \n
                          \u067e\u0631\u0648\u0698\u0647 \u0639\u0645\u0644\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a State \u0628\u0627 useState<\/h2>\n
                          \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627 \u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 useState<\/code> \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0648\u0627\u0642\u0639\u06cc \u0627\u0632 \u0627\u06cc\u0646 Hook \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n
                          \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u0641\u0631\u0645 \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0648 \u067e\u0633 \u0627\u0632 \u062b\u0628\u062a\u060c \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n
                          \n
                          \u0627\u06cc\u062c\u0627\u062f State<\/h1>\n
                          \u0627\u0628\u062a\u062f\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0641\u0631\u0645 \u0631\u0627 \u062f\u0627\u062e\u0644 \u06cc\u06a9 Object \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          import<\/span> { useState<\/span> } from<\/span> \"react\"<\/span>;\r\n\r\nfunction<\/span> App<\/span>() {\r\n\r\n    const<\/span> [user<\/span>, setUser<\/span>] =<\/span> useState<\/span>({\r\n\r\n        firstName: \"\"<\/span>,\r\n\r\n        lastName: \"\"<\/span>,\r\n\r\n        email: \"\"<\/span>\r\n\r\n    });\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \u0633\u0627\u062e\u062a \u0641\u0631\u0645<\/h1>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <form><\/span>\r\n\r\n<input<\/span>\r\n\r\nname<\/span>=<\/span>\"firstName\"<\/span>\r\n\r\nplaceholder<\/span>=<\/span>\"First Name\"<\/span>\r\n\r\n\/><\/span>\r\n\r\n<input<\/span>\r\n\r\nname<\/span>=<\/span>\"lastName\"<\/span>\r\n\r\nplaceholder<\/span>=<\/span>\"Last Name\"<\/span>\r\n\r\n\/><\/span>\r\n\r\n<input<\/span>\r\n\r\nname<\/span>=<\/span>\"email\"<\/span>\r\n\r\nplaceholder<\/span>=<\/span>\"Email\"<\/span>\r\n\r\n\/><\/span>\r\n\r\n<\/form><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0641\u0631\u0645<\/h1>\n
                          \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 Input \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0646\u0646\u0648\u06cc\u0633\u06cc\u0645\u060c \u06cc\u06a9 Handler \u0639\u0645\u0648\u0645\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          function<\/span> handleChange<\/span>(event<\/span>){\r\n\r\nconst<\/span> { name, value } =<\/span> event<\/span>.<\/span>target;\r\n\r\nsetUser<\/span>({\r\n\r\n...user<\/span>,\r\n\r\n[name<\/span>]: value<\/span>\r\n\r\n});\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \u0627\u06a9\u0646\u0648\u0646 \u062a\u0645\u0627\u0645 Input\u0647\u0627 \u0627\u0632 \u0647\u0645\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <input<\/span>\r\n\r\nname<\/span>=<\/span>\"firstName\"<\/span>\r\n\r\nvalue<\/span>=<\/span>{user<\/span>.<\/span>firstName}\r\n\r\nonChange<\/span>=<\/span>{handleChange<\/span>}\r\n\r\n\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <input<\/span>\r\n\r\nname<\/span>=<\/span>\"lastName\"<\/span>\r\n\r\nvalue<\/span>=<\/span>{user<\/span>.<\/span>lastName}\r\n\r\nonChange<\/span>=<\/span>{handleChange<\/span>}\r\n\r\n\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <input<\/span>\r\n\r\nname<\/span>=<\/span>\"email\"<\/span>\r\n\r\nvalue<\/span>=<\/span>{user<\/span>.<\/span>email}\r\n\r\nonChange<\/span>=<\/span>{handleChange<\/span>}\r\n\r\n\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a<\/h1>\n
                          \u0627\u06a9\u0646\u0648\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0627 \u0632\u06cc\u0631 \u0641\u0631\u0645 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <div><\/span>\r\n\r\n<h3><\/span>{user<\/span>.<\/span>firstName}<\/h3><\/span>\r\n\r\n<h3><\/span>{user<\/span>.<\/span>lastName}<\/h3><\/span>\r\n\r\n<p><\/span>{user<\/span>.<\/span>email}<\/p><\/span>\r\n\r\n<\/div><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \u0628\u0627 \u0647\u0631 \u0628\u0627\u0631 \u062a\u0627\u06cc\u067e\u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n
                          \n
                          \u0631\u06cc\u0633\u062a \u06a9\u0631\u062f\u0646 \u0641\u0631\u0645<\/h1>\n
                          \u067e\u0633 \u0627\u0632 \u062b\u0628\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0641\u0631\u0645 \u0628\u0627\u06cc\u062f \u067e\u0627\u06a9 \u0634\u0648\u062f.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          function<\/span> resetForm<\/span>(){\r\n\r\nsetUser<\/span>({\r\n\r\nfirstName:\"\"<\/span>,\r\n\r\nlastName:\"\"<\/span>,\r\n\r\nemail:\"\"<\/span>\r\n\r\n});\r\n\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \u062f\u06a9\u0645\u0647:<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <button<\/span> onClick<\/span>=<\/span>{resetForm<\/span>}><\/span>\r\n\r\nReset\r\n\r\n<\/button><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0686\u0646\u062f useState<\/h1>\n
                          \u06af\u0627\u0647\u06cc \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0647\u0631 \u062f\u0627\u062f\u0647 State \u062c\u062f\u0627\u06af\u0627\u0646\u0647\u200c\u0627\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          \n
                          const<\/span> [name<\/span>, setName<\/span>] =<\/span> useState<\/span>(\"\"<\/span>);\r\n\r\nconst<\/span> [email<\/span>, setEmail<\/span>] =<\/span> useState<\/span>(\"\"<\/span>);\r\n\r\nconst<\/span> [loading<\/span>, setLoading<\/span>] =<\/span> useState<\/span>(false<\/span>);\r\n\r\nconst<\/span> [error<\/span>, setError<\/span>] =<\/span> useState<\/span>(null<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \n
                          <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                          \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0647\u0631 State \u0645\u0633\u062a\u0642\u0644 \u0627\u0632 \u0628\u0642\u06cc\u0647 \u0628\u0627\u0634\u062f.<\/p>\n
                          \n
                          \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 useReducer \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/h1>\n
                          \u0627\u06af\u0631 \u062a\u0639\u062f\u0627\u062f State\u0647\u0627 \u0632\u06cc\u0627\u062f \u0634\u0648\u062f \u06cc\u0627 \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0622\u0646\u200c\u0647\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useReducer<\/code> \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n
                          \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644:<\/p>\n