{"id":2333,"date":"2022-01-26T10:33:55","date_gmt":"2022-01-26T10:33:55","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2333"},"modified":"2022-01-26T10:33:55","modified_gmt":"2022-01-26T10:33:55","slug":"5-react-%d1%85%d1%83%d0%ba%d0%be%d0%b2-%d0%ba%d0%be%d1%82%d0%be%d1%80%d1%8b%d0%b5-%d0%bf%d1%80%d0%b8%d0%b3%d0%be%d0%b4%d1%8f%d1%82%d1%81%d1%8f-%d0%b2-%d0%bb%d1%8e%d0%b1%d0%be%d0%bc-%d0%bf%d1%80%d0%be","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2333","title":{"rendered":"5 React-\u0445\u0443\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435"},"content":{"rendered":"\n

\u0425\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043f\u044f\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 React-\u0445\u0443\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041f\u0440\u0438\u0447\u0451\u043c, \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n\n\n\n\n\n\n\n

\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u0434\u0435.
<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

\u0425\u0443\u043a useModalState<\/h2>\n\n\n\n

\u041c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u043e\u043d\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u044b\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u043e\u043a\u043d\u0430\u043c\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u2014 \u044d\u0442\u043e \u0442\u0440\u0443\u0434\u043e\u0451\u043c\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0448\u0430\u044f \u043a\u043e\u0442\u043e\u0440\u0443\u044e, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0410 \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u043e \u0441\u0438\u043b \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043e\u0444\u043e\u0440\u043c\u0438\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u0425\u0443\u043a useModalState<\/code> \u2014 \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d.

\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041e\u0434\u043d\u0430 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u044d\u0442\u043e Chakra UI. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043e\u0431 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u2014 \u0432\u043e\u0442<\/a> \u043c\u043e\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e \u043d\u0435\u0439.

\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useModalState<\/code> \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u043e\u0441\u0442\u0430, \u0434\u0430\u0436\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u0430. \u041d\u043e \u043e\u043f\u044b\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u0435, \u0447\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c, \u0447\u0435\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d.

\u0412\u043e\u0442 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430:
<\/p>\n\n\n\n

import React from \"react\";\nimport Modal from \".\/Modal\";\n\nexport const useModalState = ({ initialOpen = false } = {}) => {\n  const [isOpen, setIsOpen] = useState(initialOpen);\n\n  const onOpen = () => {\n    setIsOpen(true);\n  };\n\n  const onClose = () => {\n    setIsOpen(false);\n  };\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return { onOpen, onClose, isOpen, onToggle };\n};\n<\/code><\/pre>\n\n\n\n
\u0410 \u0432\u043e\u0442 \u2014 \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:
<\/p>\n\n\n\n
const Client = () => {\n  const { isOpen, onToggle } = useModalState();\n\n  const handleClick = () => {\n    onToggle();\n  };\n\n  return (\n    <div>\n      <button onClick={handleClick} \/>\n      <Modal open={isOpen} \/>\n    <\/div>\n  );\n};\n\nexport default Client;\n<\/code><\/pre>\n\n\n\n
\u0425\u0443\u043a useConfirmationDialog<\/h2>\n\n\n\n
\u0425\u0443\u043a useConfirmationDialog<\/code> \u0442\u043e\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u043a\u043d\u0430\u043c. \u0418 \u0438\u043c \u044f \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0432\u0440\u043e\u0434\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e, \u0443 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u0445\u0443\u043a\u0430. \u0412\u043e\u0442 \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0443\u043a\u0430 useConfirmationDialog<\/code>:
<\/p>\n\n\n\n
import React, { useCallback, useState } from 'react';\nimport ConfirmationDialog from 'components\/global\/ConfirmationDialog';\n\nexport default function useConfirmationDialog({\n    headerText,\n    bodyText,\n    confirmationButtonText,\n    onConfirmClick,\n}) {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const onOpen = () => {\n        setIsOpen(true);\n    };\n\n    const Dialog = useCallback(\n        () => (\n            <ConfirmationDialog\n                headerText={headerText}\n                bodyText={bodyText}\n                isOpen={isOpen}\n                onConfirmClick={onConfirmClick}\n                onCancelClick={() => setIsOpen(false)}\n                confirmationButtonText={confirmationButtonText}\n            \/>\n        ),\n        [isOpen]\n    );\n\n    return {\n        Dialog,\n        onOpen,\n    };\n}\n<\/code><\/pre>\n\n\n\n
\u0412\u043e\u0442 \u2014 \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:
<\/p>\n\n\n\n
import React from \"react\";\nimport { useConfirmationDialog } from '.\/useConfirmationDialog'\n\nfunction Client() {\n  const { Dialog, onOpen } = useConfirmationDialog({\n    headerText: \"Delete this record?\",\n    bodyText:\n      \"Are you sure you want delete this record? This cannot be undone.\",\n    confirmationButtonText: \"Delete\",\n    onConfirmClick: handleDeleteConfirm,\n  });\n\n  function handleDeleteConfirm() {\n    \/\/TODO: \u0443\u0434\u0430\u043b\u0438\u0442\u044c\n  }\n\n  const handleDeleteClick = () => {\n    onOpen();\n  };\n\n  return (\n    <div>\n      <Dialog \/>\n      <button onClick={handleDeleteClick} \/>\n    <\/div>\n  );\n}\n\nexport default Client;\n<\/code><\/pre>\n\n\n\n
\u0422\u0443\u0442 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f useConfirmationDialog<\/code> \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043e\u043a\u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u2014 \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u0435\u043b\u043e \u0442\u0443\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0430\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438 \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f, \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0432 \u043f\u043e\u043b\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435.
<\/p>\n\n\n\n
\u0425\u0443\u043a useAsync<\/h2>\n\n\n\n
\u0413\u0440\u0430\u043c\u043e\u0442\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u2014 \u044d\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0448\u0438\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434. \u0422\u0430\u043a, \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e \u0445\u043e\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0435\u043c\u0443 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442, \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u043d\u0438\u0445. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432 React-\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043e\u043a\u0443\u043f\u0438\u0442\u0441\u044f \u0441\u0442\u043e\u0440\u0438\u0446\u0435\u0439. \u0425\u0443\u043a useAsync<\/code> \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u0412\u043e\u0442 \u0435\u0433\u043e \u043a\u043e\u0434:
<\/p>\n\n\n\n
export const useAsync = ({ asyncFunction }) => {\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(null);\n  const [result, setResult] = useState(null);\n\n  const execute = useCallback(\n    async (...params) => {\n      try {\n        setLoading(true);\n        const response = await asyncFunction(...params);\n        setResult(response);\n      } catch (e) {\n        setError(e);\n      }\n      setLoading(false);\n    },\n    [asyncFunction]\n  );\n\n  return { error, result, loading, execute };\n};\n<\/code><\/pre>\n\n\n\n
\u0410 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:
<\/p>\n\n\n\n
import React from \"react\";\n\nexport default function Client() {\n  const { loading, result, error, execute } = useAsync({\n    asyncFunction: someAsyncTask,\n  });\n\n  async function someAsyncTask() {\n    \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438\n  }\n\n  const handleClick = () => {\n    execute();\n  };\n\n  return (\n    <div>\n      {loading && <p>loading<\/p>}\n      {!loading && result && <p>{result}<\/p>}\n      {!loading && error?.message && <p>{error?.message}<\/p>}\n      <button onClick={handleClick} \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\u0422\u0430\u043a\u043e\u0439 \u0445\u0443\u043a \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u042f \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u041d\u043e \u0432\u0430\u043c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u043a \u0431\u043e\u043b\u0435\u0435 \u0437\u0440\u0435\u043b\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043a \u044d\u0442\u043e\u0439<\/a>.
<\/p>\n\n\n\n
\u0425\u0443\u043a useTrackErrors<\/h2>\n\n\n\n
\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0444\u043e\u0440\u043c \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0448\u0430\u0435\u043c\u0430\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0443\u0447\u043d\u043e\u0439. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u044d\u0442\u043e, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0432 React-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041e\u0434\u043d\u0430 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u044d\u0442\u043e formik<\/a>. \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u044e\u0431\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0435\u0451 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435. \u0427\u0430\u0441\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e. \u0412 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u2014 \u0435\u0441\u043b\u0438 \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043d\u0435 \u0432\u0441\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043d\u0435\u043a\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439.

\u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0447\u0430\u0441\u0442\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u044e \u0432 \u0432\u0438\u0434\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0444\u043e\u0440\u043c \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432 \u043d\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a. \u0412\u043e\u0442 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430 useTrackErrors<\/code>, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438:
<\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport FormControl from \".\/FormControl\";\nimport Input from \".\/Input\";\nimport onSignup from \".\/SignupAPI\";\n\nexport const useTrackErrors = () => {\n  const [errors, setErrors] = useState({});\n\n  const setErrors = (errsArray) => {\n    const newErrors = { ...errors };\n    errsArray.forEach(({ key, value }) => {\n      newErrors[key] = value;\n    });\n\n    setErrors(newErrors);\n  };\n\n  const clearErrors = () => {\n    setErrors({});\n  };\n\n  return { errors, setErrors, clearErrors };\n};\n<\/code><\/pre>\n\n\n\n
\u0412\u043e\u0442 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0445\u0443\u043a\u043e\u043c:
<\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport FormControl from \".\/FormControl\";\nimport Input from \".\/Input\";\nimport onSignup from \".\/SignupAPI\";\n\nexport default function Client() {\n  const { errors, setErrors, clearErrors } = useTrackErrors();\n\n  const [name, setName] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n\n  const handleSignupClick = () => {\n    let invalid = false;\n\n    const errs = [];\n    if (!name) {\n      errs.push({ key: \"name\", value: true });\n      invalid = true;\n    }\n    if (!email) {\n      errs.push({ key: \"email\", value: true });\n      invalid = true;\n    }\n    if (invalid) {\n      setErrors(errs);\n      return;\n    }\n\n    onSignup(name, email);\n    clearErrors();\n  };\n\n  const handleNameChange = (e) => {\n    setName(e.target.value);\n    setErrors([{ key: \"name\", value: false }]);\n  };\n\n  const handleEmailChange = (e) => {\n    setEmail(e.target.value);\n    setErrors([{ key: \"email\", value: false }]);\n  };\n\n  return (\n    <div>\n      <FormControl isInvalid={errors[\"name\"]}>\n        <FormLabel>Full Name<\/FormLabel>\n        <Input\n          onKeyDown={handleKeyDown}\n          onChange={handleNameChange}\n          value={name}\n          placeholder=\"Your name...\"\n        \/>\n      <\/FormControl>\n      <FormControl isInvalid={errors[\"email\"]}>\n        <FormLabel>Email<\/FormLabel>\n        <Input\n          onKeyDown={handleKeyDown}\n          onChange={handleEmailChange}\n          value={email}\n          placeholder=\"Your email...\"\n        \/>\n      <\/FormControl>\n      <button onClick={handleSignupClick}>Sign Up<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\u0425\u0443\u043a useDebounce<\/h2>\n\n\n\n
\u0422\u043e, \u0447\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00abdebouncing\u00bb, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e\u0431 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u2014 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 API \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0443 \u0432 \u0445\u043e\u0434\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a API \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u0432\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445. \u0425\u0443\u043a useDebounce<\/code> \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u0412\u043e\u0442 \u2014 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 AwesomeDebounceLibrary<\/a>:
<\/p>\n\n\n\n
import AwesomeDebouncePromise from \"awesome-debounce-promise\";\n\nconst debounceAction = (actionFunc, delay) =>\n  AwesomeDebouncePromise(actionFunc, delay);\n\nfunction useDebounce(func, delay) {\n  const debouncedFunction = useMemo(() => debounceAction(func, delay), [\n    delay,\n    func,\n  ]);\n\n  return debouncedFunction;\n}\n<\/code><\/pre>\n\n\n\n
\u0412\u043e\u0442 \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430:
<\/p>\n\n\n\n
import React from \"react\";\n\nconst callAPI = async (value) => {\n  \/\/ \u0432\u044b\u0437\u043e\u0432 \u201c\u0434\u043e\u0440\u043e\u0433\u043e\u0433\u043e\u201d API\n};\n\nexport default function Client() {\n  const debouncedAPICall = useDebounce(callAPI, 500);\n\n  const handleInputChange = async (e) => {\n    debouncedAPICall(e.target.value);\n  };\n\n  return (\n    <form>\n      <input type=\"text\" onChange={handleInputChange} \/>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e\u0442 \u0445\u0443\u043a \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c: \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u00ab\u0434\u043e\u0440\u043e\u0433\u0430\u044f\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0431\u044b \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0441\u0431\u0440\u043e\u0441\u0443 \u00ab\u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439\u00bb \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u043e\u0442\u0440\u0451\u0442 \u0432\u0441\u0451 \u0438\u0437 \u0435\u0451 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0432\u0443\u043c\u044f \u043f\u0443\u0442\u044f\u043c\u0438:
<\/p>\n\n\n\n
  1. \u041c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u00ab\u0434\u043e\u0440\u043e\u0433\u0443\u044e\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0442\u0430\u043a, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435).<\/li>
  2. \u041c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430 useCallback<\/a>.<\/li><\/ol>\n\n\n\n
    \u0418\u0442\u043e\u0433\u0438<\/h2>\n\n\n\n
    \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0445\u0443\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 \u043d\u0438\u043c\u0438 \u043e\u0442\u0441\u044e\u0434\u0430<\/a>. \u041d\u043e, \u0445\u043e\u0442\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u0445\u043e\u0447\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0435 \u043f\u044f\u0442\u044c, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u2014 \u044d\u0442\u043e \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u0445\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c React-\u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u0425\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043f\u044f\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 React-\u0445\u0443\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041f\u0440\u0438\u0447\u0451\u043c, \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[65,140],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2333"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2333"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2333\/revisions"}],"predecessor-version":[{"id":2334,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2333\/revisions\/2334"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}