{"id":309817,"date":"2020-09-12T03:00:19","date_gmt":"2020-09-12T03:00:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=309817"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=309817","title":{"rendered":"\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u0445\u0443\u043a\u0430\u0445"},"content":{"rendered":"\n
\u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0432 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043a\u0443\u0440\u0441\u0430 \u00abReact.js Developer\u00bb<\/a>.<\/i><\/b><\/p>\n
\n

<\/p>\n

\u0427\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0445\u0443\u043a\u0438?<\/h3>\n

\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0432 \u0447\u0435\u043c \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043b\u0441\u044f, \u044f \u0445\u043e\u0447\u0443 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u044f\u0432\u0438\u0442\u044c, \u0447\u0442\u043e, \u0432\u043e\u043e\u0431\u0449\u0435-\u0442\u043e, \u044f \u0444\u0430\u043d\u0430\u0442 \u0445\u0443\u043a\u043e\u0432<\/a>.<\/p>\n

\u042f \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u044b\u0448\u0443, \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u0441\u0442 \u00ab\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0445\u0443\u043a\u0438\u00bb<\/a>, \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 React, \u0440\u0435\u043a\u043b\u0430\u043c\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u0440\u044f\u043c\u043e \u0441\u043a\u0430\u0436\u0435\u043c, \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e:<\/p>\n

\u0425\u0443\u043a\u0438 \u2014 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 React 16.8, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React \u0431\u0435\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/i><\/a><\/p>\n

\u041f\u043e\u0441\u044b\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0437\u0434\u0435\u0441\u044c \u0432\u0438\u0436\u0443, \u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: \u00ab\u041a\u043b\u0430\u0441\u0441\u044b \u2014 \u044d\u0442\u043e \u043d\u0435 \u043a\u0440\u0443\u0442\u043e!\u00bb. \u041c\u0430\u043b\u043e\u0432\u0430\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432. \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0445\u0443\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e, \u0447\u0435\u043c \u043f\u0440\u0435\u0436\u043d\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b: \u043c\u0438\u043a\u0441\u0438\u043d\u044b<\/a>, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/a> \u0438 \u0440\u0435\u043d\u0434\u0435\u0440-\u043f\u0440\u043e\u043f\u0441\u044b<\/a>.<\/p>\n

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

\u0410 \u0447\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438?<\/h3>\n

\u0415\u0441\u0442\u044c \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043d\u0435\u043f\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u0430\u044f \u043a\u0440\u0430\u0441\u043e\u0442\u0430 \u0432 stateless-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (\u0442. \u0435. \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0431\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u0447\u0438\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0435\u0437 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n

export const Heading: React.FC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {   const Tag = `h${level}` as Taggable;    return (     <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>       {children}     <\/Tag>   ); };<\/code><\/pre>\n
  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0431\u0435\u0437 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c. \u0412 React \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (stateful-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b). \u0418\u0445 \u0435\u0449\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438. \u041e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 \u043f\u0440\u043e\u043f\u0441\u044b \u0447\u0438\u0441\u0442\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c \u2014 stateless-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n
  \u0425\u043e\u0440\u043e\u0448\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u041c\u043d\u043e\u0433\u0438\u0435 \u043d\u0435\u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 componentDidMount<\/code> \u0438 componentDidUpdate<\/code>.<\/p>\n
async componentDidMount() {   const response = await get(`\/users`);   this.setState({ users: response.data }); };  async componentDidUpdate(prevProps) {   if (prevProps.resource !== this.props.resource) {     const response = await get(`\/users`);     this.setState({ users: response.data });   } };<\/code><\/pre>\n
  \u0420\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439.
  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u043e\u0431\u043e\u0447\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u0430.
  const UsersContainer: React.FC = () => {
   const [ users, setUsers ] = useState([]);
   const [ showDetails, setShowDetails ] = useState(false);<\/p>\n
  const fetchUsers = async () => {
   const response = await get(‘\/users’);
   setUsers(response.data);
   };<\/p>\n
  useEffect( () => {
   fetchUsers(users)
   }, [ users ]
   );<\/p>\n
  \/\/ etc.<\/p>\n
  \u0425\u0443\u043a useEffect<\/code> \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0436\u0438\u0437\u043d\u044c, \u043d\u043e \u043e\u043d \u043b\u0438\u0448\u0430\u0435\u0442 \u0442\u043e\u0439 \u0447\u0438\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 stateless-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u2014 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u043d\u044c\u0448\u0435. \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u0435\u043d\u044f \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043b\u043e.<\/p>\n
\u041e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430 JavaScript, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c<\/h3>\n
  \u041c\u043d\u0435 49 \u043b\u0435\u0442, \u0438 \u044f \u0444\u0430\u043d\u0430\u0442 React. \u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 ember<\/a> \u0441 \u044d\u0442\u0438\u043c \u0431\u0435\u0437\u0443\u043c\u0438\u0435\u043c \u0432 \u0432\u0438\u0434\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0443 \u043f\u0438\u0442\u0430\u0442\u044c \u0442\u0435\u043f\u043b\u044b\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u043a \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0442\u043e\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
  \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0445\u0443\u043a\u043e\u043c useEffect<\/code> \u0438 \u0435\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u0432\u0441\u0435\u043c \u043b\u0430\u043d\u0434\u0448\u0430\u0444\u0442\u0435 JavaScript \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u041e\u043d \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u042f \u0432\u0438\u0436\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u043a\u0440\u043e\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0445\u0443\u043a \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0438 \u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c. \u0418 \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u043d\u0435 \u043f\u043e\u0431\u0443\u0434\u044f\u0442 \u043c\u0435\u043d\u044f \u0441\u0430\u043c\u043e\u0437\u0430\u0431\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u0434\u0438\u0442\u044c \u043d\u043e\u0447\u044c \u043d\u0430\u043f\u0440\u043e\u043b\u0435\u0442. \u042f \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440 \u0438 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e React, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0438 \u044f \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043b<\/a> \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u044d\u0442\u0438\u043c\u0438 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f\u043c\u0438. \u0421\u0442\u043e\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d eslint, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u043c\u0435\u043d\u044f \u043d\u0430 \u043f\u0443\u0442\u044c \u0438\u0441\u0442\u0438\u043d\u043d\u044b\u0439, \u043a\u0430\u043a \u044d\u0442\u0430 \u043d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u043d\u044f \u043d\u0430\u043f\u0440\u044f\u0433\u0430\u0442\u044c.<\/p>\n
\u041c\u0430\u0441\u0441\u0438\u0432\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u2014 \u044d\u0442\u043e \u0430\u0434<\/h3>\n
  \u0425\u0443\u043a useEffect<\/a> \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/b> \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0430\u043c. \u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, React \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c Object.is<\/a>. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u043d\u043e\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c.<\/p>\n
  \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u0435\u0441\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c, \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. Object.is<\/a> \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0448\u044c. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435 \u0443\u0434\u0430\u0441\u0442\u0441\u044f.<\/p>\n
  \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u2014 \u044d\u0442\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c \u043f\u0440\u0435\u0442\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f.<\/p>\n
const useFetch = (config: ApiOptions) => {   const  [data, setData] = useState(null);    useEffect(() => {     const { url, skip, take } = config;     const resource = `${url}?$skip=${skip}&take=${take}`;     axios({ url: resource }).then(response => setData(response.data));   }, [config]); \/\/ <-- will fetch on each render    return data; };  const App: React.FC = () => {   const data = useFetch({ url: "\/users", take: 10, skip: 0 });   return <div>{data.map(d => <div>{d})}<\/div>; };<\/code><\/pre>\n
  \u0412 \u0441\u0442\u0440\u043e\u043a\u0435 14<\/b> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e useFetch<\/code> \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043d\u0430\u0434\u043e \u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0430 \u043d\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n
  \u042f \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u043f\u043e\u0447\u0435\u043c\u0443 React \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a \u043d\u0443\u0436\u043d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e, \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0438 \u0443\u0436\u0435 \u043d\u0430\u0448\u0435\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432<\/a>. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439.<\/p>\n
  \u0415\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d eslint<\/a> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a<\/a>, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432. \u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043c\u0435\u043d\u044f \u043d\u0430\u043f\u0440\u044f\u0433\u0430\u044e\u0442 \u0432\u0441\u0435 \u044d\u0442\u0438 \u043d\u043e\u0432\u044b\u0435 \u0444\u0438\u0447\u0438, \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043b\u0430\u0433\u0438\u043d.
  \u0421\u0430\u043c\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043a\u0430\u043a use-deep-object-compare<\/a> \u0438 use-memo-one<\/a>, \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 (\u0438\u043b\u0438 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043d\u0435\u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0445\u0430) \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c.<\/p>\n
React \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0445\u0443\u043a\u043e\u0432<\/h3>\n
  \u0421\u0430\u043c\u044b\u043c\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0445\u0443\u043a\u0430\u043c\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 useFetch<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c\u0443 API. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437 \u043d\u0438\u0445 \u043d\u0435 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c\u0443 API \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \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.<\/p>\n
  \u041d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u044b \u0441 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0449\u0435\u043b\u043a\u043d\u0435\u0442 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435? \u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f useFetch<\/code>:<\/p>\n
const useFetch = (config: ApiOptions): [User[], boolean] => {   const [data, setData] = useState<User[]>([]);   const [loading, setLoading] = useState(true);    useEffect(() => {     const { skip, take } = config;      api({ skip, take }).then(response => {       setData(response);       setLoading(false);     });   }, [config]);    return [data, loading]; };  const App: React.FC = () => {   const [currentPage, setCurrentPage] = useState<ApiOptions>({     take: 10,     skip: 0   });    const [users, loading] = useFetch(currentPage);    if (loading) {     return <div>loading....<\/div>;   }    return (     <>       {users.map((u: User) => (         <div>{u.name}<\/div>       ))}       <ul>         {[...Array(4).keys()].map((n: number) => (           <li>             <button onClick={() => console.log('\u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?')}>{n + 1}<\/button>           <\/li>         ))}       <\/ul>     <\/>   ); };<\/code><\/pre>\n
  \u0412 \u0441\u0442\u0440\u043e\u043a\u0435 23 \u0445\u0443\u043a useFetch<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435. \u0412 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 35\u201338 \u043c\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438. \u041d\u043e \u043a\u0430\u043a \u043c\u044b \u0431\u044b \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u0445\u0443\u043a useFetch<\/code> \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a?<\/p>\n
  \u0412 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0445\u0443\u043a\u043e\u0432 \u0447\u0435\u0442\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e:<\/p>\n
  \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0446\u0438\u043a\u043b\u043e\u0432, \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.\u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 React-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/i><\/p>\n
  \u0425\u0443\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430 \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0447\u0438\u043d, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430.<\/p>\n
  \u0412\u043e\u0442 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f:<\/p>\n
<button onClick={() => useFetch({ skip: n + 1 * 10, take: 10 })}>   {n + 1} <\/button><\/code><\/pre>\n
  \u0412\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 useFetch<\/code> \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0445\u0443\u043a\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435.<\/p>\n
\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 \u0445\u0443\u043a\u0430<\/h3>\n
  \u042f \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u0434\u0432\u0443\u043c\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041e\u043d\u0438 \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434, \u0438 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043e\u0431\u0430. \u041f\u043b\u0430\u0433\u0438\u043d react-async-hook<\/a> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u0437 \u0445\u0443\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e execute<\/code>:<\/p>\n
import { useAsyncCallback } from 'react-async-hook';  const AppButton = ({ onClick, children }) => {   const asyncOnClick = useAsyncCallback(onClick);   return (     <button onClick={asyncOnClick.execute} disabled={asyncOnClick.loading}>       {asyncOnClick.loading ? '...' : children}     <\/button>   ); };  const CreateTodoButton = () => (   <AppButton     onClick={async () => {       await createTodoAPI('new todo text');     }}   >     Create Todo   <\/AppButton> );<\/code><\/pre>\n
  \u0412\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 useAsyncCallback<\/code> \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u00ab\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u00bb, \u00ab\u043e\u0448\u0438\u0431\u043a\u0430\u00bb \u0438 \u00ab\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e execute<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n
  React-hooks-async<\/a> \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0441 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u0412 \u043d\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f useAsyncTask<\/code>.<\/p>\n
  \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 useAsyncTask<\/code>:<\/p>\n
const createTask = (func, forceUpdateRef) => {   const task = {     start: async (...args) => {       task.loading = true;       task.result = null;       forceUpdateRef.current(func);       try {         task.result = await func(...args);       } catch (e) {         task.error = e;       }       task.loading = false;       forceUpdateRef.current(func);     },     loading: false,     result: null,     error: undefined   };   return task; };  export const useAsyncTask = (func) => {   const forceUpdate = useForceUpdate();   const forceUpdateRef = useRef(forceUpdate);   const task = useMemo(() => createTask(func, forceUpdateRef), [func]);    useEffect(() => {     forceUpdateRef.current = f => {       if (f === func) {         forceUpdate({});       }     };     const cleanup = () => {       forceUpdateRef.current = () => null;     };     return cleanup;   }, [func, forceUpdate]);    return useMemo(     () => ({       start: task.start,       loading: task.loading,       error: task.error,       result: task.result     }),     [task.start, task.loading, task.error, task.result]   ); };<\/code><\/pre>\n
  \u0424\u0443\u043d\u043a\u0446\u0438\u044f createTask \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u00ab\u0437\u0430\u0434\u0430\u043d\u0438\u0435\u00bb \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0432\u0438\u0434\u0435.<\/p>\n
interface Task {   start: (...args: any[]) => Promise<void>;   loading: boolean;   result: null;   error: undefined; }<\/code><\/pre>\n
  \u0423 \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/code>, \u043e\u0448\u0438\u0431\u043a\u0430<\/code> \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c. \u041d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0449\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e start<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u0417\u0430\u0434\u0430\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createTask<\/code>, \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 forceUpdate<\/code> \u0438 forceUpdateRef<\/code> \u0432 useAsyncTask<\/code>.<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f start<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u0430 \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.<\/p>\n
  \u041d\u043e \u043c\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0445\u0443\u043a \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \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. \u0425\u043e\u0440\u043e\u0448\u043e, \u0447\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d react-hooks-async<\/a> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e useAsyncRun<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n
export const useAsyncRun = (   asyncTask: ReturnType<typeof useAsyncTask>,   ...args: any[] ) => {   const { start } = asyncTask;   useEffect(() => {     start(...args);     \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps   }, [asyncTask.start, ...args]);   useEffect(() => {     const cleanup = () => {       \/\/ \u0442\u0443\u0442 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0431\u0440\u043e\u0441     };     return cleanup;   }); };<\/code><\/pre>\n
  \u0424\u0443\u043d\u043a\u0446\u0438\u044f start<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 args<\/code>.
  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0434 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
const App: React.FC = () => {   const asyncTask = useFetch(initialPage);   useAsyncRun(asyncTask);    const { start, loading, result: users } = asyncTask;    if (loading) {     return <div>loading....<\/div>;   }    return (     <>       {(users || []).map((u: User) => (         <div>{u.name}<\/div>       ))}        <ul>         {[...Array(4).keys()].map((n: number) => (           <li key={n}>             <button onClick={() => start({ skip: 10 * n, take: 10 })}>               {n + 1}             <\/button>           <\/li>         ))}       <\/ul>     <\/>   ); };<\/code><\/pre>\n
  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0445\u0443\u043a\u043e\u0432, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a useFetch<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \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. \u0424\u0443\u043d\u043a\u0446\u0438\u044f useAsyncRun<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 API \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435, \u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e start<\/code> \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 onClick<\/code> \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438.<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0445\u0443\u043a useFetch<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e, \u043d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0434\u0442\u0438 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435, \u043d\u0430\u0434\u043e \u043f\u0440\u0438\u0437\u043d\u0430\u0442\u044c\u0441\u044f, \u043c\u0435\u043d\u044f \u0441\u043b\u0435\u0433\u043a\u0430 \u043f\u0443\u0433\u0430\u0435\u0442.<\/p>\n
\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0445\u0443\u043a\u043e\u0432 \u0432 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445<\/h3>\n
  \u0412 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445 \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0430\u043a, \u043a\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0418 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c LogRocket<\/a>. <\/p>\n
  <\/p>\n
  LogRocket<\/a> \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0432\u0438\u0434\u0435\u043e\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041f\u043b\u0430\u0433\u0438\u043d LogRocket \u0434\u043b\u044f React \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0435\u0430\u043d\u0441\u044b, \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0449\u0435\u043b\u043a\u043d\u0443\u043b \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442.<\/p>\n
  LogRocket \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 Redux. \u042d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b\/\u043e\u0442\u0432\u0435\u0442\u044b \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0438 \u0442\u0435\u043b\u0430\u043c\u0438. \u041e\u043d\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 HTML \u0438 CSS \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043f\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n
  LogRocket \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043e\u0442\u043b\u0430\u0434\u043a\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/a>.<\/p>\n
\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n
  \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 useFetch<\/code> \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043d \u0445\u0443\u043a\u0430\u043c\u0438.<\/p>\n
  \u0414\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u044f \u043e\u0436\u0438\u0434\u0430\u043b, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043c\u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u0432\u0430\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430\u0448\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0445\u0443\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \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, \u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u0438\u0441\u043a\u0430\u0442\u044c \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0443\u0442\u0438. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 useFetch<\/code> \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0445\u0443\u043a\u043e\u0432 \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0439. \u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u0435 \u0441\u044e\u0440\u043f\u0440\u0438\u0437\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432 \u043c\u043e\u0435\u0439 \u0434\u0443\u0448\u0435 \u043c\u043d\u043e\u0433\u043e \u0448\u0440\u0430\u043c\u043e\u0432.<\/p>\n
  \u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f (\u0432\u0440\u043e\u0434\u0435 \u0442\u0435\u0445, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 useEffect<\/code> \u0438 useCallback<\/code>) \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u042d\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0432\u043e \u0432\u0445\u043e\u0434\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u2014 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n
  \u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438, \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u0440\u0435\u0448\u0438\u0442\u044c \u043b\u0438\u043d\u0442\u0435\u0440 \u0445\u0443\u043a\u043e\u0432. \u041d\u0430 Stack Overflow \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u043e\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432<\/a> \u043e\u0431 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0432 \u0445\u0443\u043a\u0435 useEffect<\/code> \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445. \u042f \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 useCallback<\/code> \u0438 \u043a\u0440\u0443\u0442\u0438\u043b \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0442\u0430\u043a, \u0438 \u044d\u0434\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438\u043b\u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u0418\u043d\u0430\u0447\u0435 \u043d\u0435\u043b\u044c\u0437\u044f, \u043d\u043e \u044d\u0442\u043e \u0441\u043b\u0435\u0433\u043a\u0430 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u0435\u0442. \u042d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0435\u0433\u043e \u0442\u044b \u0441\u0442\u043e\u0438\u0448\u044c.<\/p>\n
  \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0445\u0443\u043a\u0438 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f. \u041d\u043e \u043e\u043d\u0438 \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438. \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043b\u0430\u043d\u0434\u0448\u0430\u0444\u0442\u0435 JavaScript \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e. \u0412\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u043e\u0432 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \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 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0443 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0442\u0435\u0440\u0430 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0434\u043e\u0432\u0435\u0440\u0438\u044f, \u0434\u0430 \u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043a\u0438\u043d\u0443\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n
  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0434\u043e\u043f\u043e\u043d\u044f\u043b \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n
  <\/a>  <\/p>\n
\n
\u0427\u0438\u0442\u0430\u0442\u044c \u0435\u0449\u0451:<\/h4>\n
  <\/p>\n