{"id":95222,"date":"2025-01-30T07:47:30","date_gmt":"2025-01-30T04:17:30","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/level-up-your-react-skills-10-advanced-techniques-for-senior-devs-1103\/"},"modified":"2025-01-30T07:47:30","modified_gmt":"2025-01-30T04:17:30","slug":"level-up-your-react-skills-10-advanced-techniques-for-senior-devs-1103","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/level-up-your-react-skills-10-advanced-techniques-for-senior-devs-1103\/","title":{"rendered":"\u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc React \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0644\u0627 \u0628\u0628\u0631\u06cc\u062f: 10 \u062a\u06a9\u0646\u06cc\u06a9 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u0641\u0631\u0627\u062f \u0627\u0631\u0634\u062f"},"content":{"rendered":"<div id=\"article-show-container\">\n<header class=\"crayons-article__header\" id=\"main-title\">\n<div class=\"crayons-article__header__meta\">\n<div class=\"flex s:items-start flex-col s:flex-row\">\n<div class=\"flex flex-1 mb-5 items-start\">\n<div class=\"relative\">\n                    \n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<div class=\"crayons-article__main \">\n<div class=\"crayons-article__body text-styles spec__body\" data-article-id=\"2249321\" id=\"article-body\">\n<p>\u0647\u0631\u0686\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u0627\u0644\u06af\u0648\u0647\u0627\u06cc &#8220;\u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628&#8221; \u0647\u0646\u06af\u0627\u0645 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u062d\u0633\u0627\u0633 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u06a9\u0646\u0646\u062f. \u0634\u0627\u06cc\u062f \u0634\u0645\u0627 \u06cc\u06a9 MVP \u0645\u0648\u0641\u0642 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u060c \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u062d\u0627\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0638\u0631\u06cc\u0641 \u0647\u0633\u062a\u06cc\u062f. \u06cc\u0627 \u0634\u0627\u06cc\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u0634\u0645\u0627 \u062f\u0631\u0647\u0645 \u0648 \u0628\u0631\u0647\u0645 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0648 \u0645\u0646\u0637\u0642 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0628\u0647 \u0686\u06cc\u0632\u06cc \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u062a\u0634\u062e\u06cc\u0635 \u0642\u0627\u0631\u0686 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><strong>1. \u0627\u0632 useCallback \u0628\u0627 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u062e\u062f\u0645\u0627\u062a \u0645\u062f\u0627\u0648\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\u0645\u0627 \u0627\u063a\u0644\u0628 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 UseCallback \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u0622\u0648\u0631\u06cc \u062a\u0648\u0627\u0628\u0639 Arrow Inline \u062f\u0631 \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0645\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u0631\u062c\u0639 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u0633\u062a \u0648 \u0647\u0646\u06af\u0627\u0645 \u062a\u0635\u0648\u06cc\u0628 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u060c \u0645\u062c\u062f\u062f\u0627\u064b \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u062a\u062d\u0631\u06cc\u06a9 \u0646\u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0645\u0627 \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0637\u062d \u060c \u0645\u06cc \u06cc\u0627\u0628\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062d\u0641\u0638 \u0645\u0646\u0627\u0628\u0639 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0628\u0647 \u062e\u062f\u0645\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631-\u0645\u0627\u0646\u0646\u062f \u0634\u0628\u06a9\u0647 \u0647\u0627\u06cc \u0648\u0628 \u060c \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u0645\u0646\u0627\u0628\u0639 \u0645\u062f\u0627\u0648\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f-\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u0647\u0631 \u0631\u0646\u062f\u0631 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0647 \u0637\u0648\u0631 \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 Useref \u0648 UseCallback \u0628\u0646\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a: \u0634\u0645\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u062e\u062f\u0645\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u062f\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627\u0644\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u0627\u062a\u0635\u0627\u0644 \u0645\u062c\u062f\u062f \u0646\u0627\u062e\u0648\u0627\u0633\u062a\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function createExpensiveService() {\n  \/\/ Pretend this sets up a WebSocket or a shared worker\n  return { send: (msg) =&gt; console.log('Sending:', msg) };\n}\n\nfunction usePersistentService() {\n  const serviceRef = React.useRef(createExpensiveService());\n  \/\/ Memoize the send function so it never changes\n  const stableSend = React.useCallback((msg) =&gt; {\n    serviceRef.current.send(msg);\n  }, []);\n  return stableSend;\n}\nfunction MyComponent() {\n  const send = usePersistentService();\n  return <button onclick=\"{()\"> send('HELLO')}&gt;Send Message<\/button>;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>2. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 Ref \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u06af\u06cc \u0628\u0647 \u062c\u0627\u06cc \u062f\u0648\u0644\u062a<\/strong><br \/>\u0628\u0639\u0636\u06cc \u0627\u0648\u0642\u0627\u062a \u0645\u0627 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0645\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062d\u0627\u0644\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645. \u0627\u0645\u0627 \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u060c \u0634\u0645\u0627 \u0641\u0642\u0637 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0628\u0627\u0639\u062b \u0627\u06cc\u062c\u0627\u062f \u0645\u062c\u062f\u062f \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ref \u062f\u0631 \u0648\u0627\u0642\u0639 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0631\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0628\u062f\u0648\u0646 \u062a\u0623\u062b\u06cc\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631 UI \u060c \u062f\u0631 \u062f\u0627\u062e\u0644 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f. \u06cc\u06a9 Ref \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627\u0633\u062a\u0627\u0698 \u06cc\u0627 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0641\u0627\u0646\u062a\u0632\u06cc \u0646\u06cc\u0633\u062a &#8211; \u0641\u0642\u0637 \u06cc\u06a9 \u062c\u0639\u0628\u0647 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function MyCounter() {\n  const counterRef = React.useRef(0);\n  const increment = () =&gt; {\n    counterRef.current++;\n    console.log('Ref count is now:', counterRef.current);\n  };\n  return <button onclick=\"{increment}\">Increment (Check Console)<\/button>;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>3. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0639\u0644\u06cc\u0642 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u062d\u0627\u0641\u0638\u0647 \u0646\u0647\u0627\u0646 \u0645\u0646\u0627\u0628\u0639<\/strong><br \/>\u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc REACT \u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u0627\u0645\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u060c \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648 \u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0627\u0632 \u0686\u06a9 \u0647\u0627\u06cc \u062f\u0633\u062a\u06cc \u0627\u0633\u062a. \u062a\u0639\u0644\u06cc\u0642 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u062f\u0627\u062f\u0647 \u0648\u06cc\u0698\u0647 \u060c \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0622\u0645\u0627\u062f\u0647 \u0646\u0628\u0627\u0634\u0646\u062f \u060c \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647 \u062d\u0627\u0644\u062a \u062a\u0639\u0644\u06cc\u0642 \u062f\u0631 \u0645\u06cc \u0622\u06cc\u062f \u0648 \u062a\u0627 \u0632\u0645\u0627\u0646 \u0631\u0633\u06cc\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u06af\u0634\u062a\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0646\u0637\u0642 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u062a\u0645\u06cc\u0632 \u062a\u0631 \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0631\u0648\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 (\u0645\u0641\u0647\u0648\u0645\u06cc):<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function createResource(fetchFn) {\n  let status=\"pending\";\n  let result;\n  const promise = fetchFn().then(\n    data =&gt; { status=\"success\"; result = data; },\n    err =&gt; { status=\"error\"; result = err; }\n  );\n  return {\n    read() {\n      if (status === 'pending') throw promise;\n      if (status === 'error') throw result;\n      return result;\n    }\n  };\n}\n\nconst userResource = createResource(() =&gt; fetch('\/api\/user').then(r =&gt; r.json()));\n\nfunction UserProfile() {\n  const user = userResource.read();\n  return <p>Hello, {user.name}!<\/p>;\n}\n\nfunction App() {\n  return (\n    <react.suspense fallback=\"{&lt;div\">Loading user data...<\/react.suspense><\/code><\/pre>\n<\/div>\n<p>}><br \/>\n      <userprofile\/><\/p>\n<p>  ) \u061b }<\/p>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>4. \u062a\u0639\u0644\u06cc\u0642 \u0628\u0627 \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0648\u06cc\u0627 \u0648 \u0646\u06a9\u0627\u062a \u0627\u0632 \u067e\u06cc\u0634 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc<\/strong><br \/>\u062a\u0642\u0633\u06cc\u0645 \u06a9\u062f \u0628\u0627 React.Lazy () \u0645\u062a\u062f\u0627\u0648\u0644 \u0627\u0633\u062a \u060c \u0627\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0622\u0646 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u06cc\u0634 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0622\u0646 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0632\u0645\u0627\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0631\u0648\u06cc \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062e\u0627\u0635 \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u06a9\u0627\u0647\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f. \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0627\u062c\u0632\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0641\u0648\u0631\u0627\u064b \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const HeavyChart = React.lazy(() =&gt; import('.\/HeavyChart'));\n\nfunction usePreloadHeavyChart() {\n  React.useEffect(() =&gt; {\n    import('.\/HeavyChart'); \/\/ start preloading on mount\n  }, []);\n}\n\nfunction Dashboard() {\n  usePreloadHeavyChart();\n  return (\n    <react.suspense fallback=\"{&lt;div\">Loading Chart...<\/react.suspense><\/code><\/pre>\n<\/div>\n<p>}><br \/>\n      <heavychart\/><\/p>\n<p>  ) \u061b }<\/p>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>5. \u0645\u0631\u0632\u0647\u0627\u06cc \u062e\u0637\u0627 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f<\/strong><br \/>\u062f\u0631 \u0628\u0639\u0636\u06cc \u0627\u0632 \u0645\u0648\u0627\u0642\u0639 \u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0686\u06cc\u0632\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0634\u06a9\u0633\u062a \u0628\u062e\u0648\u0631\u062f-\u0634\u0627\u06cc\u062f \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u0628\u06a9\u0647 \u06cc\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062a\u0646\u0628\u0644 \u0628\u0627\u0634\u062f. \u0645\u0631\u0632\u0647\u0627\u06cc \u062e\u0637\u0627\u06cc \u0633\u0646\u062a\u06cc \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc Fallback \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0627 \u062a\u0642\u0648\u06cc\u062a \u0622\u0646\u0647\u0627 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0628\u06cc\u062f \u060c \u067e\u0633 \u0627\u0632 \u06cc\u06a9 \u062a\u0623\u062e\u06cc\u0631 \u06a9\u0648\u062a\u0627\u0647 \u060c \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u067e\u06cc\u0634\u0631\u0641\u062a \u0639\u0627\u0644\u06cc \u062f\u0631 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0634\u062f \u0648 \u06cc\u06a9 \u062c\u0644\u0648\u0647 \u0645\u0648\u0642\u062a\u06cc \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0628\u062f\u0648\u0646 \u062f\u0631\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>class AutoRetryErrorBoundary extends React.Component {\n  state = { hasError: false, attempt: 0 };\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n  componentDidUpdate() {\n    if (this.state.hasError) {\n      setTimeout(() =&gt; {\n        this.setState(s =&gt; ({ hasError: false, attempt: s.attempt + 1 }));\n      }, 2000);\n    }\n  }\n  render() {\n    if (this.state.hasError) return <p>Retrying...<\/p>;\n    return this.props.children(this.state.attempt);\n  }\n}\n\nfunction UnstableComponent({ attempt }) {\n  if (attempt &lt; 2) throw new Error('Simulated Crash!');\n  return <p>Loaded on attempt {attempt}<\/p>;\n}\n\n\/\/ Usage\n<autoretryerrorboundary>\n  {(attempt) =&gt; <unstablecomponent attempt=\"{attempt}\"\/>}\n<\/autoretryerrorboundary>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>6. \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u0645\u062c\u0627\u0632\u06cc \u0633\u0627\u0632\u06cc \u0628\u0627 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0648\u0631\u062f \u067e\u0648\u06cc\u0627<\/strong>\u062d\u0631\u0641<br \/>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u0639\u0638\u06cc\u0645\u06cc \u062f\u0627\u0631\u06cc\u062f \u060c \u0627\u0631\u0627\u0626\u0647 \u0647\u0631 \u0645\u0648\u0631\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0628\u0631\u062f. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u062c\u0627\u0632\u06cc \u0633\u0627\u0632\u06cc (\u0645\u0627\u0646\u0646\u062f React-Window) \u0641\u0642\u0637 \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a \u060c \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f. \u0627\u0645\u0627 \u0627\u06af\u0631 \u0645\u0648\u0627\u0631\u062f \u062f\u0627\u0631\u0627\u06cc \u0627\u0631\u062a\u0641\u0627\u0639\u0627\u062a \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u0628\u0627\u0634\u0646\u062f \u060c \u0686\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0646\u0637\u0642 \u0645\u062c\u0627\u0632\u06cc \u0633\u0627\u0632\u06cc \u062e\u0648\u062f \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0647\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0627\u0641\u0638\u0647 \u0648 \u0647\u0645 \u0632\u0645\u0627\u0646 \u0627\u0631\u0627\u0626\u0647 \u060c \u0648 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u067e\u06cc\u0686 \u0648 \u062e\u0645 \u0627\u0628\u0631\u06cc\u0634\u0645\u06cc \u0631\u0627 \u0635\u0627\u0641 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { VariableSizeList as List } from 'react-window';\n\nfunction useDynamicMeasurement(items) {\n  const sizeMap = React.useRef({});\n  const refCallback = index =&gt; el =&gt; {\n    if (el) {\n      const height = el.getBoundingClientRect().height;\n      sizeMap.current[index] = height;\n    }\n  };\n  const getSize = index =&gt; sizeMap.current[index] || 50;\n  return { refCallback, getSize };\n}\n\nfunction DynamicHeightList({ items }) {\n  const { refCallback, getSize } = useDynamicMeasurement(items);\n  return (\n    <list height=\"{400}\" itemcount=\"{items.length}\" itemsize=\"{getSize}\" width=\"{300}\">\n      {({ index, style }) =&gt; (\n        <p>\n          {items[index]}\n        <\/p>\n      )}\n    <\/list>\n  );\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>7. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u062f\u0633\u062a\u06af\u0627\u0647 \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u062c\u0631\u06cc\u0627\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 UI<\/strong><br \/>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u062d\u0633\u0627\u0633 \u0627\u0633\u067e\u0627\u06af\u062a\u06cc \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0638\u0647\u0627\u0631\u0627\u062a \u0645\u06cc \u06a9\u0646\u062f \u060c \u06cc\u06a9 \u062f\u0633\u062a\u06af\u0627\u0647 \u062f\u0648\u0644\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u0645\u06a9 \u06a9\u0646\u062f. \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f XState \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 \u0642\u0644\u0627\u0628 React \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0648\u0644\u06cc \u0631\u0627 \u062c\u0645\u0639 \u06a9\u0646\u06cc\u062f \u060c \u062d\u0627\u0644\u062a \u0647\u0627 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u062f\u0627\u0631 \u0648\u0627\u062d\u062f \u0648 \u062a\u0645\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062f\u0644 \u0630\u0647\u0646\u06cc \u0627\u0633\u062a: \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 &#8220;\u0646\u0642\u0634\u0647&#8221; \u0627\u0632 \u0686\u06af\u0648\u0646\u06af\u06cc \u062c\u0631\u06cc\u0627\u0646 UI \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f \u0648 \u062f\u0631\u06a9 \u0648 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useMachine } from '@xstate\/react';\nimport { createMachine } from 'xstate';\n\nconst formMachine = createMachine({\n  initial: 'editing',\n  states: {\n    editing: { on: { SUBMIT: 'validating' } },\n    validating: {\n      invoke: {\n        src: 'validateForm',\n        onDone: 'success',\n        onError: 'error'\n      }\n    },\n    success: {},\n    error: {}\n  }\n});\n\nfunction Form() {\n  const [state, send] = useMachine(formMachine, {\n    services: { validateForm: async () =&gt; {\/* validation logic *\/} }\n  });\n  return (\n    <button onclick=\"{()\"> send('SUBMIT')}&gt;\n      {state.value === 'editing' ? 'Submit' : state.value.toString()}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>8. \u0647\u0645\u0632\u0645\u0627\u0646\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0634\u062f\u0647 \u0628\u0627 usetransition \u0648 \u0635\u0641 \u06a9\u0627\u0631<\/strong><br \/>React 18 Usetransition \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u062e\u0627\u0635 \u062f\u0648\u0644\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 &#8220;\u063a\u06cc\u0631 \u0641\u0648\u0631\u06cc&#8221; \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u062d\u062a \u0628\u0627\u0631 \u0633\u0646\u06af\u06cc\u0646 \u0628\u0627\u0634\u062f. \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u062f \u06cc\u0627 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u06af\u0631\u0627\u0646 \u0642\u06cc\u0645\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0628\u0627 \u062a\u0639\u0648\u06cc\u0642 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0641\u0648\u0631\u06cc \u060c UI \u0631\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u06cc\u062f \u0648 \u0627\u0632 \u0642\u0641\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function ComplexUI() {\n  const [isPending, startTransition] = React.useTransition();\n  const [data, setData] = React.useState([]);\n\n  function loadMore() {\n    startTransition(() =&gt; {\n      setData(old =&gt; [...old, ...generateMoreData()]);\n    });\n  }\n  return (\n    &lt;&gt;\n      <button onclick=\"{loadMore}\">Load More<\/button>\n      {isPending &amp;&amp; <span>Loading more data...<\/span>}\n      <list data=\"{data}\"\/>\n    &gt;\n  );\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>9. UseimperativeHandle \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f API \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0634\u062f\u0647<\/strong><br \/>\u0628\u0639\u0636\u06cc \u0627\u0648\u0642\u0627\u062a \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0645\u0633\u062a\u0642\u06cc\u0645 \u06a9\u0648\u062f\u06a9 \u0628\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f &#8211; \u0645\u0627\u0646\u0646\u062f \u062a\u0645\u0627\u0633 \u0628\u0627 ChildRef.Current.Focus () \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc. UseimperativeHandle \u0642\u0644\u0627\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ref \u062f\u0631 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u06a9\u0648\u062f\u06a9 \u0645\u06cc \u0628\u06cc\u0646\u062f \u060c \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f API \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0645\u0631\u062a\u0628 \u0648 \u06a9\u0646\u062a\u0631\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u062d\u0633\u0627\u0633 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06cc\u06a9 \u0631\u0648\u0634 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0644\u0627\u0633 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0627\u0645\u0627 \u0628\u0647 \u0631\u0648\u0634\u06cc \u062f\u0648\u0633\u062a\u0627\u0646\u0647 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<p><strong>10. \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 \u0645\u062a\u0631\u0642\u06cc \u0628\u0627 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong><br \/>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR) \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0633\u0631\u06cc\u0639 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u0633\u0627\u0646\u062f \u060c \u0627\u0645\u0627 \u0622\u0628\u0631\u0633\u0627\u0646\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0632\u0631\u06af \u0628\u0647 \u06cc\u06a9\u0628\u0627\u0631\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u06a9\u0646\u062f \u06a9\u0646\u062f. \u0628\u0627 \u062a\u0623\u062e\u06cc\u0631 \u062f\u0631 \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 \u0628\u0631\u0627\u06cc \u0642\u0633\u0645\u062a\u0647\u0627\u06cc \u063a\u06cc\u0631 \u0645\u0647\u0645 \u0635\u0641\u062d\u0647 \u062e\u0648\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062e\u0648\u0634\u062d\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0647 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u0627\u062c\u0632\u0627\u06cc \u062e\u0627\u0635\u06cc \u0631\u0627 \u067e\u0633 \u0627\u0632 \u062a\u0623\u062e\u06cc\u0631 \u0647\u06cc\u062f\u0631\u0627\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f SSR \u0631\u0627 \u062d\u062a\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062a\u0631 \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>function useProgressiveHydration(delay = 1000) {\n  const [hydrated, setHydrated] = React.useState(false);\n  React.useEffect(() =&gt; {\n    const t = setTimeout(() =&gt; setHydrated(true), delay);\n    return () =&gt; clearTimeout\n  }, [delay]);\n  return hydrated;\n}\n\nfunction HeavyComponent() {\n  const hydrated = useProgressiveHydration();\n  return hydrated ? <expensivetree\/> : <placeholder\/>;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<br \/>\u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0645\u0647 \u0628\u0647 \u06cc\u06a9\u0628\u0627\u0631\u0647 \u0646\u06cc\u0633\u062a \u0648 \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u062f\u0631 \u0647\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0646\u06cc\u0633\u062a. \u0622\u0646\u0647\u0627 \u0627\u0628\u0632\u0627\u0631\u06cc \u0647\u0633\u062a\u0646\u062f &#8211; \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 &#8211; \u06a9\u0647 \u0628\u0627 \u0631\u0634\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0648 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u0645\u06cc \u0634\u0648\u0646\u062f. \u0648\u0642\u062a\u06cc \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0647\u0631\u0686\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u0627\u0644\u06af\u0648\u0647\u0627\u06cc &#8220;\u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628&#8221; \u0647\u0646\u06af\u0627\u0645 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u062d\u0633\u0627\u0633 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u06a9\u0646\u0646\u062f. \u0634\u0627\u06cc\u062f \u0634\u0645\u0627 \u06cc\u06a9 MVP \u0645\u0648\u0641\u0642 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u060c \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u062d\u0627\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0638\u0631\u06cc\u0641 \u0647\u0633\u062a\u06cc\u062f. \u06cc\u0627 \u0634\u0627\u06cc\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u0634\u0645\u0627 \u062f\u0631\u0647\u0645 \u0648 \u0628\u0631\u0647\u0645 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0648 \u0645\u0646\u0637\u0642 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":95223,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-95222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=95222"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95222\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/95223"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=95222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=95222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=95222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}