{"id":86223,"date":"2024-11-30T20:23:44","date_gmt":"2024-11-30T16:53:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-use-use-the-new-react-19-hook-4ah5\/"},"modified":"2024-11-30T20:23:44","modified_gmt":"2024-11-30T16:53:44","slug":"how-to-use-use-the-new-react-19-hook-4ah5","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-use-use-the-new-react-19-hook-4ah5\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 … “\u0627\u0633\u062a\u0641\u0627\u062f\u0647”\u060c \u0642\u0644\u0627\u0628 \u062c\u062f\u06cc\u062f React 19"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0631\u0632\u0634 \u06cc\u06a9 Promise \u06cc\u0627 \u06cc\u06a9 Context \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/p>\n

const value = use(resource)<\/p>\n

\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0648\u062a\u0627\u0647 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u062a\u0646 \u06cc\u0627 \u0648\u0639\u062f\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n

import { use } from “react”;<\/p>\n

function MessageComponent ({ messagePromise }) {
\n const message = use(messagePromise);
\n const theme = use(ThemeContext);
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\u060c \u062a\u0645\u0627\u0634\u0627 \u06a9\u0646\u06cc\u062f\u060c \u06cc\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u0646 \u0648 \u0648\u0639\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n

\u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0628\u0627\u06cc\u062f \u0628\u0627 \u0622\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u0648\u062f Suspense \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc error boundaries. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062d\u0644 \u0648 \u0641\u0635\u0644 \u0648\u0639\u062f\u0647 \u0648 \u06af\u0631\u0641\u062a\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 context\u060c \u0628\u0627\u0632\u06af\u0634\u062a \u0627\u0632 Suspense \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 Promise \u062d\u0644 \u0634\u062f\u060c \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 use API.<\/p>\n

\u0627\u06af\u0631 \u0648\u0639\u062f\u0647 \u06af\u0630\u0634\u062a \u0628\u0647 use \u0631\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0627\u0632\u06af\u0634\u062a \u0646\u0632\u062f\u06cc\u06a9\u062a\u0631\u06cc\u0646 \u0645\u0631\u0632 \u062e\u0637\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 “use” \u0628\u0627 React Context<\/p>\n

\u062a\u0646\u0638\u06cc\u0645 Context<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645 Context.<\/p>\n

\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u062a\u0645 \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u0631\u0648\u0634\u0646 \u0648 \u062a\u0627\u0631\u06cc\u06a9 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 ThemeContext.ts:<\/p>\n

\/\/ ThemeContext.ts
\nimport { createContext, Dispatch, SetStateAction } from ‘react’;<\/p>\n

type Theme = ‘light’ | ‘dark’;<\/p>\n

interface IThemeContext {
\n theme: Theme;
\n setTheme: Dispatch<SetStateAction<Theme>>;
\n}<\/p>\n

export const ThemeContext = createContext<IThemeContext>({
\n theme: ‘dark’,
\n setTheme: () => {},
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0648\u0627\u0631\u062f \u0641\u0648\u0642 \u0634\u06cc\u0621 ThemeContext \u0645\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0647\u0631 \u0641\u0627\u06cc\u0644\u06cc \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0645\u0648\u0636\u0648\u0639 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u0645 \u0648 setTheme \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0637\u0631\u062d \u0632\u0645\u06cc\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0645\u0627 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u00ab\u062a\u0627\u0631\u06cc\u06a9\u00bb \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628\u200c\u062a\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f.<\/p>\n

\u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0647\u0645\u0647 \u0632\u0645\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u0645\u0627\u0646\u060c a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 Context.tsx \u062c\u0632\u0621\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0634\u0648\u062f:<\/p>\n

\/\/ Context.tsx
\nimport React, { useState } from ‘react’;
\nimport { ThemeContext } from ‘.\/ThemeContext’;
\nimport { Theme } from ‘..\/types’;<\/p>\n

export default function Context({ children }: { children: React.ReactNode }) {
\n const [theme, setTheme] = useState<Theme>(‘dark’);<\/p>\n

return (
\n <ThemeContext.Provider
\n value={{
\n theme,
\n setTheme: setTheme,
\n }}
\n >
\n {children}
\n ThemeContext.Provider>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u0634\u06cc\u0621 \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0647 \u0645\u0627 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 ThemeContext.Provider\u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062a\u0645 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0631\u0627\u06cc \u0628\u0647 \u0647\u0645 \u0632\u062f\u0646 \u0627\u06cc\u0646 \u0647\u0645\u0647\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u067e\u06cc\u0686\u06cc\u0645 \u062c\u0632\u0621 \u062f\u0631 \u0645\u0627 \u062c\u0632\u0621<\/p>\n

\/\/ index.tsx<\/p>\n

\/\/ … Other imports etc.
\nimport Context from ‘.\/Context.tsx’<\/p>\n

const root = ReactDOM.createRoot(
\n document.getElementById(‘root’) as HTMLElement
\n);
\nroot.render(
\n <React.StrictMode>
\n <Context>
\n <App \/>
\n Context>
\n React.StrictMode>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0648 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0622\u0646 (\u06a9\u0647 \u0627\u0633\u0627\u0633\u0627\u064b \u06a9\u0644 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627\u0633\u062a) \u0628\u0647 \u0645\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u0634\u062a ThemeContext.<\/p>\n

\u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 “\u0627\u0633\u062a\u0641\u0627\u062f\u0647” \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627 Context<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u0648\u0636\u0648\u0639 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u062f! Components\/ContextExample.tsx:<\/p>\n

\/\/ ContextExample.tsx
\nimport { use } from ‘react’;
\nimport { ThemeContext } from ‘..\/context\/ThemeContext’;<\/p>\n

export default function ContextExample() {
\n const { setTheme } = use(ThemeContext);<\/p>\n

const handleThemeToggle = () => {
\n setTheme((prevTheme) => {
\n if (prevTheme === ‘light’) {
\n return ‘dark’;
\n } else {
\n return ‘light’;
\n }
\n });
\n };<\/p>\n

return (
\n <div>
\n <button onClick={() => handleThemeToggle()}>Switch Themebutton>
\n div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0686\u0646\u06af \u0632\u062f\u0646 \u0628\u0647 setTheme \u0631\u0648\u0634 \u0627\u0632 ThemeContext. \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0631\u0627\u0626\u0647 a \u06a9\u0647 onClick \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f handleThemeToggle() \u06a9\u0647 \u0645\u0648\u0636\u0648\u0639 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 “\u0631\u0648\u0634\u0646” \u0627\u0633\u062a\u060c \u062a\u0645 \u0631\u0627 \u0631\u0648\u06cc “\u062a\u0627\u0631\u06cc\u06a9” \u0648 \u0628\u0631\u0639\u06a9\u0633 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644… \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u0646\u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0646\u06a9\u0646\u06cc\u0645\u060c \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0645\u0627 App.tsx:<\/p>\n

\/\/ App.tsx
\n\/\/ Other imports…
\nimport { ThemeContext } from ‘.\/context\/ThemeContext’;
\nimport ContextExample from ‘.\/components\/ContextExample’;<\/p>\n

function App() {
\n const { theme } = use(ThemeContext);<\/p>\n

return (
\n <div className={`App ${theme}`}>
\n <ContextExample \/>
\n div>
\n )
\n}<\/p>\n

export default App;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u0631\u062f\u0627\u062a \u0648 \u0639\u0628\u0648\u0631 \u0647\u0633\u062a\u06cc\u0645 theme \u0627\u0632 ThemeCotnext \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0645\u0627 App.tsx\u062f\u0631 \u062d\u0627\u0644 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc . Now we can go into our App.css \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0686\u0646\u062f \u0633\u0628\u06a9 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0622\u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0645\u0627 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631!:<\/p>\n

\/* App.css *\/
\n.dark {
\n background-color: black;
\n color: white;
\n}<\/p>\n

.light {
\n background-color: white;
\n color: black;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0632\u06cc\u0627\u062f \u0646\u06cc\u0633\u062a… \u0627\u0645\u0627 \u0628\u0647 \u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 use \u0648 React Context \u06a9\u0627\u0645\u0644\u0627\u064b \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a. \u0627\u062f\u0627\u0645\u0647 \u0628\u062f\u0647! \u0622\u0646 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n

\u0622\u06cc\u0627 \u0628\u0647 \u0622\u0646 \u0646\u06af\u0627\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f\u061f! \u0632\u0634\u062a\u060c \u0627\u0645\u0627 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc. \u0627\u06cc\u0646 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 “\u0627\u0633\u062a\u0641\u0627\u062f\u0647” \u0628\u0627 React Context \u067e\u0627\u06cc\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. \u0628\u0647 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u0622\u06cc\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0627 \u06cc\u06a9 \u0648\u0639\u062f\u0647!<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 “\u0627\u0633\u062a\u0641\u0627\u062f\u0647” \u0628\u0627 \u06cc\u06a9 \u0648\u0639\u062f\u0647 Async<\/p>\n

\u0627\u0648\u0644 \u0627\u0632 \u0647\u0645\u0647\u060c \u0645\u0627 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 server \u0627\u0642\u062f\u0627\u0645\u060c \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0648 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0628\u0627 AWS \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n

\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f lib.ts:<\/p>\n

\/\/ lib.ts
\n‘use server’;<\/p>\n

export const fetchMessage = async () => {
\n await new Promise((resolve) => setTimeout(resolve, 2500));
\n return ‘Secret Message Recieved!’;
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a API \u0631\u0627 “\u062c\u0639\u0644” \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0645\u0627\u0633 \u0628\u0627 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u06cc\u0627 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u0627\u06a9\u0634\u06cc \u0628\u0647 \u0628\u0631\u062e\u06cc API \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0627\u0633\u062a. \u0627\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 await\u060c Promise() \u0648 setTimeout \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 Promise \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 2.5 \u062b\u0627\u0646\u06cc\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f.<\/p>\n

\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u0646\u062f \u062c\u0632\u0621 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645\u060c \u06cc\u06a9 \u0644\u0641\u0627\u0641 \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f Suspense \u0633\u067e\u0633 \u062f\u0627\u062e\u0644 \u0622\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f use \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 \u0646\u062a\u06cc\u062c\u0647 \u0645\u0627 fetchMessage() \u0642\u0648\u0644\u06cc \u06a9\u0647 \u0647\u0645\u06cc\u0646 \u0627\u0644\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 lib.ts.<\/p>\n

\u0627\u06cc\u0646 \u062f\u0648 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f Components\/MessageContainer.tsx & Components\/PromiseExample.tsx:<\/p>\n

MessageContaienr.tsx:<\/p>\n

\/\/ MessageContainer.tsx
\nimport { Suspense } from ‘react’;
\nimport PromiseExample from ‘.\/PromiseExample’;<\/p>\n

export default function MessageContainer({
\n messagePromise,
\n}: {
\n messagePromise: Promise<string>;
\n}) {
\n return (
\n <Suspense fallback={<p>Waiting for the message…p>}>
\n <PromiseExample messagePromise={messagePromise} \/>
\n Suspense>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 inside the fallback is what will display while we wait for our Promise to resolve.<\/p>\n

Now for the PromiseExample.tsx file:<\/p>\n

\/\/ PromiseExample
\n‘use client’;<\/p>\n

import { use } from ‘react’;<\/p>\n

export default function PromiseExample({
\n messagePromise,
\n}: {
\n messagePromise: Promise<string>;
\n}) {
\n const messageConent = use(messagePromise);
\n return <p>Here’s the message: {messageConent}p>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062c\u0627\u062f\u0648 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f\u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 use \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0642\u062f\u0627\u0631 \u0648\u0639\u062f\u0647 \u062d\u0644\u200c\u0634\u062f\u0647\u060c \u0631\u0634\u062a\u0647 \u00ab\u067e\u06cc\u0627\u0645 \u0645\u062e\u0641\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0634\u062f\u00bb \u0631\u0627 \u062f\u0631 \u0645\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u06cc\u0645. fetchMessage() \u0642\u0648\u0644 \u0628\u062f\u0647 \u0686\u0642\u062f\u0631 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a\u061f use() \u0648 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u0622\u0633\u0627\u0646 \u06a9\u0646\u06cc\u062f…<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0648\u0635\u0644 \u06a9\u0646\u06cc\u0645 MessageContainer \u0628\u0647 App.tsx \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u0645!App.tsx:<\/p>\n

\/\/ App.tsx<\/p>\n

\/\/ Other imports…
\nimport { fetchMessage } from ‘.\/lib’;
\nimport MessageContainer from ‘.\/components\/MessageContainer’;<\/p>\n

function App() {
\n const { theme } = use(ThemeContext);<\/p>\n

const [messagePromise, setMessagePromise] = useState<Promise<string> | null>(
\n null
\n );<\/p>\n

const handleFetchMessage = () => {
\n setMessagePromise(fetchMessage());
\n };<\/p>\n

return (
\n <div className={`App ${theme}`}>
\n <ContextExample \/>
\n <button onClick={() => handleFetchMessage()}>Send Messagebutton>
\n {messagePromise && <MessageContainer messagePromise={messagePromise} \/>}
\n div>
\n )
\n}<\/p>\n

export default App;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u06cc\u06a9 \u0634\u06cc\u0621 \u062d\u0627\u0644\u062a \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 messagePromise\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f null. \u0627\u06cc\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06af\u0631 \u0647\u0646\u0648\u0632 \u0622\u0646 \u0631\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0646\u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0646\u06cc\u0645.\u0631\u0627 handleFetchMessage() \u062a\u0627\u0628\u0639 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f messagePromise \u0648\u0636\u0639\u06cc\u062a \u062d\u0627\u0648\u06cc \u067e\u06cc\u0627\u0645 Promise \u0627\u0632 \u0637\u0631\u0641 \u0645\u0627 \u0628\u0627\u0634\u062f fetchMessage \u0639\u0645\u0644 \u0633\u0631\u0648\u0631 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc handleFetchMessage. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0634\u0631\u0648\u0637 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062f\u0631 FE \u0645\u0627 \u0628\u0633\u062a\u0647 \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a messagePromise\u060c \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0641\u0642\u0637 \u0645\u0627 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062c\u0632\u0621 \u06cc\u06a9 \u0628\u0627\u0631 fetchMessage() \u0648\u0639\u062f\u0647 \u0622\u063a\u0627\u0632 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u067e\u0633 \u0627\u0632 \u0632\u062f\u0646 \u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647: handleFetchMessage()}>Send Message. \u0645\u0627 \u0628\u0647 \u062e\u0648\u062f\u0645\u0627\u0646 \u0632\u0646\u06af \u0645\u06cc \u0632\u0646\u06cc\u0645 fetchMessage() \u0627\u0642\u062f\u0627\u0645 \u0633\u0631\u0648\u0631\u060c \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u062f\u0631 Suspense \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062a\u062d\u0631\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f use() \u0645\u0646\u062a\u0638\u0631 \u0627\u0633\u062a \u062a\u0627 \u0648\u0639\u062f\u0647 \u062d\u0644 \u0634\u0648\u062f.<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 Promise \u062d\u0644 \u0634\u062f\u060c \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 Promise \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u06a9\u0631\u062f\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 use \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 FE \u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f:<\/p>\n

\u0648\u0627\u06cc…\u062e\u06cc\u0644\u06cc \u0628\u0648\u062f \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0645\u0646\u0637\u0642\u06cc \u0628\u0627\u0634\u0647! \u0628\u062e\u0634 \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0646 \u0628\u0627\u06cc\u062f \u0628\u0647 \u062e\u0627\u0637\u0631 \u0628\u0633\u067e\u0627\u0631\u06cc\u062f use \u0648 Promises \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f use \u062f\u0631 \u06cc\u06a9 Suspense \u0648 \u0628\u0639\u062f \u0627\u0632 \u0622\u0646\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062a\u0645\u0627\u0633 \u06af\u0631\u0641\u062a\u0646 \u0627\u0633\u062a use(promiseIWantTheValueOf) <\/p>\n

\n

\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0631\u0632\u0634 \u06cc\u06a9 Promise \u06cc\u0627 \u06cc\u06a9 Context \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/p>\n

const value = use(resource)<\/code><\/p>\n

\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0648\u062a\u0627\u0647 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u062a\u0646 \u06cc\u0627 \u0648\u0639\u062f\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n

\n
import<\/span> {<\/span> use<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\n\nfunction<\/span> MessageComponent<\/span> ({<\/span> messagePromise<\/span> })<\/span> {<\/span>\n    const<\/span> message<\/span> =<\/span> use<\/span>(<\/span>messagePromise<\/span>);<\/span>\n    const<\/span> theme<\/span> =<\/span> use<\/span>(<\/span>ThemeContext<\/span>);<\/span>\n}<\/span>\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\u060c \u062a\u0645\u0627\u0634\u0627 \u06a9\u0646\u06cc\u062f\u060c \u06cc\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u0646 \u0648 \u0648\u0639\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n
\u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0628\u0627\u06cc\u062f \u0628\u0627 \u0622\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u0648\u062f Suspense<\/code> \u0648 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc error boundaries<\/code>. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062d\u0644 \u0648 \u0641\u0635\u0644 \u0648\u0639\u062f\u0647 \u0648 \u06af\u0631\u0641\u062a\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 context<\/code>\u060c \u0628\u0627\u0632\u06af\u0634\u062a \u0627\u0632 Suspense<\/code> \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 Promise \u062d\u0644 \u0634\u062f\u060c \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 use<\/code> API.<\/p>\n
\u0627\u06af\u0631 \u0648\u0639\u062f\u0647 \u06af\u0630\u0634\u062a \u0628\u0647 use<\/code> \u0631\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0627\u0632\u06af\u0634\u062a \u0646\u0632\u062f\u06cc\u06a9\u062a\u0631\u06cc\u0646 \u0645\u0631\u0632 \u062e\u0637\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
\n
\n
\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n