{"id":446218,"date":"2025-01-27T03:01:04","date_gmt":"2025-01-27T03:01:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=446218"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=446218","title":{"rendered":"Callback \u0440\u0435\u0444\u044b \u0432 React: \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n

\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f React \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u0444\u043e\u0432 (refs), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0437\u0430\u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u044b\u0435 \u0440\u0435\u0444\u044b \u0447\u0435\u0440\u0435\u0437 useRef (\u043e\u0431\u0437\u043e\u0432\u0451\u043c \u0438\u0445 \u0442\u0430\u043a), \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 callback refs. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u0442\u043e\u0447\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 \u043e\u0442\u0432\u044f\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 callback refs, \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n

\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 callback refs \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442<\/h4>\n

Callback refs \u0434\u0430\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u0440\u0435\u0444\u043e\u0432 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u044b\u043c\u0438 \u0440\u0435\u0444\u0430\u043c\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430 \u0434\u0435\u043b\u0435:<\/p>\n

    \n
  1. \n

    \u041c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435:<\/strong> \u041a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 DOM, React \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u0444 \u0441 \u0441\u0430\u043c\u0438\u043c DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n

  2. \n

    \u0420\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435:<\/strong> \u041a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, React \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u0444 \u0441 null. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>\n<\/li>\n<\/ol>\n

    \u041f\u0440\u0438\u043c\u0435\u0440: \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n
    import React, { useCallback, useState } from 'react';  function MountUnmountTracker() {   const [isVisible, setIsVisible] = useState(false);    const handleRef = useCallback((node: HTMLDivElement | null) => {     if (node) {       console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d:', node);     } else {       console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d');     }   }, []);    return (     <div>       <button onClick={() => setIsVisible((prev) => !prev)}>         {isVisible ? '\u0421\u043a\u0440\u044b\u0442\u044c' : '\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c'} \u044d\u043b\u0435\u043c\u0435\u043d\u0442       <\/button>       {isVisible && <div ref={handleRef}>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/div>}     <\/div>   ); }  export default MountUnmountTracker; <\/code><\/pre>\n
    \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0444\u0443\u043d\u043a\u0446\u0438\u044f handleRef \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c (node \u0438\u043b\u0438 null), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 \u043e\u0442\u0432\u044f\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n
    \u0427\u0430\u0441\u0442\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n
    \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b callback ref<\/h4>\n
    \u041e\u0434\u043d\u0430 \u0438\u0437 \u0447\u0430\u0441\u0442\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 callback refs, \u044d\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0435\u0444\u0430 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e React \u0434\u0443\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0444, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 callback ref \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441 null, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u0434\u0447\u0438\u0449\u0430\u044f \u0441\u0442\u0430\u0440\u044b\u0439 \u0440\u0435\u0444, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0430\u043c \u043d\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n
    \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/strong>
     \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Basic, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 div \u0441 callback ref \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0449\u0443\u044e \u0444\u043e\u0440\u0441 \u0430\u043f\u0434\u0435\u0439\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n
    import React, { useState, useReducer } from 'react';  function Basic() {   const [showDiv, setShowDiv] = useState(false);   const [, forceRerender] = useReducer((v) => v + 1, 0);    const toggleDiv = () => setShowDiv((prev) => !prev);    const refCallback = (node: HTMLDivElement | null) => {     console.log('div', node);   };    return (     <div>       <button onClick={toggleDiv}>Toggle Div<\/button>       <button onClick={forceRerender}>Rerender<\/button>       {showDiv && <div ref={refCallback}>\u041f\u0440\u0438\u043c\u0435\u0440 div<\/div>}     <\/div>   ); }  export default Basic; <\/code><\/pre>\n
    \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Rerender, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e refCallback. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0432\u044b\u0437\u043e\u0432\u0443 refCallback(null) \u0438 \u0437\u0430\u0442\u0435\u043c refCallback(node), \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0440\u0435\u0444\u043e\u043c \u043f\u043e \u0441\u0443\u0442\u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 div \u0438 null \u043f\u043e\u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430, \u0447\u0435\u0433\u043e \u043c\u044b \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b.<\/p>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f callback ref \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useCallback<\/strong>
     \u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 useCallback \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0435\u0451 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.<\/p>\n
    import React, { useState, useCallback, useReducer } from 'react';  function Basic() {   const [showDiv, setShowDiv] = useState(false);   const [, forceRerender] = useReducer((v) => v + 1, 0);    const toggleDiv = () => setShowDiv((prev) => !prev);    const refCallback = useCallback((node: HTMLDivElement | null) => {     console.log('div', node);   }, []);    return (     <div>       <button onClick={toggleDiv}>Toggle Div<\/button>       <button onClick={forceRerender}>Rerender<\/button>       {showDiv && <div ref={refCallback}>\u041f\u0440\u0438\u043c\u0435\u0440 div<\/div>}     <\/div>   ); }  export default Basic; <\/code><\/pre>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f refCallback \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0435-\u0440\u0435\u043d\u0434\u0435\u0440\u0430\u0445. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
    \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 callback refs, useLayoutEffect \u0438 useEffect<\/h3>\n
    \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c callback refs \u0443 \u043d\u0430\u0441 \u0432 \u043a\u043e\u0434\u0435 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0439\u043c\u0451\u043c, \u043a\u0430\u043a callback refs \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438 useEffect \u0438 useLayoutEffect, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n
    \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430<\/h4>\n
      \n
    1. \n
      callback ref:<\/strong> \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0434\u043e<\/strong> \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n
    2. \n
      useLayoutEffect:<\/strong> \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 DOM, \u043d\u043e \u0434\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438<\/strong>.<\/p>\n<\/li>\n
    3. \n
      useEffect:<\/strong> \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n
      import React, { useEffect, useLayoutEffect, useCallback } from 'react';  function WhenCalled() {   const refCallback = useCallback((node: HTMLDivElement | null) => {     if (node) {       console.log('Callback ref \u0432\u044b\u0437\u0432\u0430\u043d \u0434\u043b\u044f div:', node);     } else {       console.log('Callback ref \u043e\u0442\u0432\u044f\u0437\u0430\u043b div');     }   }, []);    useLayoutEffect(() => {     console.log('useLayoutEffect \u0432\u044b\u0437\u0432\u0430\u043d');   }, []);    useEffect(() => {     console.log('useEffect \u0432\u044b\u0437\u0432\u0430\u043d');   }, []);    return (     <div>       <div ref={refCallback}>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f<\/div>     <\/div>   ); }  export default WhenCalled; <\/code><\/pre>\n
      \u0412\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/strong><\/p>\n
        \n
      1. \n
        «Callback ref \u0432\u044b\u0437\u0432\u0430\u043d \u0434\u043b\u044f div: [div \u044d\u043b\u0435\u043c\u0435\u043d\u0442]»<\/p>\n<\/li>\n
      2. \n
        «useLayoutEffect \u0432\u044b\u0437\u0432\u0430\u043d»<\/p>\n<\/li>\n
      3. \n
        «useEffect \u0432\u044b\u0437\u0432\u0430\u043d»<\/p>\n<\/li>\n<\/ol>\n
        \u042d\u0442\u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e callback refs \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0445\u0443\u043a\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430.<\/p>\n
        \u041a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0448\u0430\u044e\u0442 callback refs \u0432 \u043a\u043e\u0434\u0435<\/h3>\n
        \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0451\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u044b\u043c\u0438 \u0440\u0435\u0444\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0451 \u0447\u0435\u0440\u0435\u0437 callback refs<\/p>\n
        import { useCallback, useEffect, useRef, useState } from 'react';  interface ResizeObserverOptions {   elemRef: React.RefObject<HTMLElement>;   onResize: ResizeObserverCallback; }  function useResizeObserver({ elemRef, onResize }: ResizeObserverOptions) {   useEffect(() => {     const element = elemRef.current;      if (!element) {       return;     }      const resizeObserver = new ResizeObserver(onResize);      resizeObserver.observe(element);      return () => {       resizeObserver.unobserve(element);     };   }, [onResize, elemRef]); }  export function UsageDom() {   const [bool, setBool] = useState(false);   const elemRef = useRef<HTMLDivElement>(null);    const handleResize = useCallback((entries: ResizeObserverEntry[]) => {     console.log('resize', entries);   }, []);    useResizeObserver({ elemRef, onResize: handleResize });    const renderTestText = () => {     if (bool) {       return <p ref={elemRef}>Test text<\/p>;     }      return <div ref={elemRef}>Test div<\/div>;   };    return (     <div style={{ width: '100%', textAlign: 'center' }}>       <button onClick={() => setBool((v) => !v)}>Toggle<\/button>       {renderTestText()}     <\/div>   ); } <\/code><\/pre>\n
        \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0442\u043e \u043c\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0432\u0430, \u043b\u0438\u0431\u043e \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u0447\u0435\u0440\u0435\u0437 ResizeObserver.
         \u041f\u043e \u043d\u0430\u0447\u0430\u043b\u0443 \u043d\u0430\u0448 \u043a\u043e\u0434 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043f\u0440\u0438 \u043c\u0430\u0443\u043d\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f, \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440.<\/p>\n
        \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u043e\u0433\u043b\u0438\u0442\u044c \u043d\u0430\u0448 \u0441\u0442\u0435\u0439\u0442, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043c\u0435\u043d\u044f\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0441\u043b\u0435\u0434\u0438\u043c.
         \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0435\u0439\u0442 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u043b\u0435\u0434\u0438\u043c, \u0443 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c ResizeObserver, \u043e\u043d \u0432\u0441\u0451 \u0435\u0449\u0451 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0443\u0434\u0430\u043b\u0451\u043d \u0438\u0437 DOM. \u0414\u0430\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0442\u043e\u0433\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442, \u0442.\u043a. \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442<\/p>\n
        \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> \u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0434\u0430\u043b\u0435\u0435 \u0440\u0435\u0448\u0438\u043c \u0447\u0435\u0440\u0435\u0437 callback ref, \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c \u0442.\u043a. \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u0441\u0451 \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0444\u043b\u0430\u0433\u043e\u0432, \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0442.\u043f, \u0432 \u043a\u043e\u0434\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0442.\u0434. \u043d\u0430\u0448 \u043a\u043e\u0434 \u043e\u0431\u044f\u0437\u0430\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c, \u0432 \u0447\u0451\u043c \u043d\u0430\u043c \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 callback ref<\/p>\n
        import { useCallback, useRef, useState } from 'react';  function useResizeObserver(onResize: ResizeObserverCallback) {   const roRef = useRef<ResizeObserver | null>(null);    const attachResizeObserver = useCallback(     (element: HTMLElement) => {       const resizeObserver = new ResizeObserver(onResize);       resizeObserver.observe(element);       roRef.current = resizeObserver;     },     [onResize]   );    const detachResizeObserver = useCallback(() => {     roRef.current?.disconnect();   }, []);    const refCb = useCallback(     (element: HTMLElement | null) => {       if (element) {         attachResizeObserver(element);       } else {         detachResizeObserver();       }     },     [attachResizeObserver, detachResizeObserver]   );    return refCb; }  export default function App() {   const [bool, setBool] = useState(false);    const handleResize = useCallback((entries: ResizeObserverEntry[]) => {     console.log('resize', entries);   }, []);    const resizeRef = useResizeObserver(handleResize);    const renderTestText = () => {     if (bool) {       return <p ref={resizeRef}>Test text<\/p>;     }      return <div ref={resizeRef}>Test div<\/div>;   };    return (     <div style={{ width: '100%', textAlign: 'center' }}>       <button onClick={() => setBool((v) => !v)}>Toggle<\/button>       {renderTestText()}     <\/div>   ); } <\/code><\/pre>\n
        \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430\u0448 \u0445\u0443\u043a useResizeObserver \u043d\u0430 callback ref, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043a\u043e\u043b\u043b\u0431\u044d\u043a (\u0437\u0430\u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439!) \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b \u043c\u044b \u043d\u0435 \u0442\u043e\u0433\u043b\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430\u0448 \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0441 \u0440\u0435\u0441\u0430\u0439\u0437\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c, \u0442.\u043a. \u043e\u043d \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043e\u0442\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043d\u0430\u043c \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f callback ref. \u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0438, \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u043d\u0430\u0448 \u0445\u0443\u043a \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f\/\u0441\u043d\u044f\u0442\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043c\u044b \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0451 \u0443 \u043d\u0430\u0441 \u0432 \u0445\u0443\u043a\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0432 \u043d\u0430\u0448 \u0445\u0443\u043a \u0438 \u0432 \u0440\u0435\u0444\u044b \u0441\u0432\u043e\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n
        \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u0435\u0444\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d<\/h4>\n
        \u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u043b\u0443\u0447\u0430\u0439, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 callback ref<\/p>\n
        import { useEffect, useRef } from 'react'; import { forwardRef, useCallback } from 'react';  interface InputProps {   value?: string;   onChange?: React.ChangeEventHandler<HTMLInputElement>; }  const Input = forwardRef(function Input(   props: InputProps,   ref: React.ForwardedRef<HTMLInputElement> ) {   const inputRef = useRef<HTMLInputElement>(null);    useEffect(() => {     if (!inputRef.current) {       return;     }      console.log(inputRef.current.getBoundingClientRect());   }, []);    return <input {...props} ref={ref} \/>; });  export function UsageWithoutCombine() {   const inputRef = useRef<HTMLInputElement | null>(null);    const focus = () => {     inputRef.current?.focus();   };    return (     <div>       <Input ref={inputRef} \/>       <button onClick={focus}>Focus<\/button>     <\/div>   ); } <\/code><\/pre>\n
        \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043d\u043f\u0443\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u0444 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e forwardRef.
         \u041d\u043e \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0441 inputRef \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u043d\u043f\u0443\u0442\u0430? \u041c\u043e\u0436\u0435\u0442, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0434\u0440\u0443\u0433\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u0430\u043a \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 getBoundingClientRect, \u043d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0440\u0435\u0444 \u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043d\u0430 \u0440\u0435\u0444 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448 \u0444\u043e\u043a\u0443\u0441. \u041a\u0430\u043a \u043d\u0430\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0434\u0432\u0430 \u0440\u0435\u0444\u0430?<\/p>\n
        \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043e\u043f\u044f\u0442\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c callback ref<\/p>\n
        import { useEffect, useRef } from 'react'; import { forwardRef, useCallback } from 'react';  type RefItem<T> =   | ((element: T | null) => void)   | React.MutableRefObject<T | null>   | null   | undefined;  function useCombinedRef<T>(...refs: RefItem<T>[]) {   const refCb = useCallback((element: T | null) => {     refs.forEach((ref) => {       if (!ref) {         return;       }        if (typeof ref === 'function') {         ref(element);       } else {         ref.current = element;       }     });   }, refs);    return refCb; }  interface InputProps {   value?: string;   onChange?: React.ChangeEventHandler<HTMLInputElement>; }  const Input = forwardRef(function Input(   props: InputProps,   ref: React.ForwardedRef<HTMLInputElement> ) {   const inputRef = useRef<HTMLInputElement>(null);   const combinedInputRef = useCombinedRef(ref, inputRef);    useEffect(() => {     if (!inputRef.current) {       return;     }      console.log(inputRef.current.getBoundingClientRect());   }, []);    return <input {...props} ref={combinedInputRef} \/>; });  export function UsageWithCombine() {   const inputRef = useRef<HTMLInputElement | null>(null);    const focus = () => {     inputRef.current?.focus();   };    return (     <div>       <Input ref={inputRef} \/>       <button onClick={focus}>Focus<\/button>     <\/div>   ); } <\/code><\/pre>\n
        \u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/strong> \u041c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0445\u0443\u043a useCombinedRef, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0440\u0435\u0444\u044b, \u0442\u0430\u043a \u0438 \u043d\u0430\u0448\u0438 \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0440\u0435\u0444\u044b, \u043d\u0443 \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u0434\u0430\u0451\u043c \u0435\u043c\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c null \u0438 undefined.<\/p>\n
        \u0421\u0430\u043c \u0445\u0443\u043a useCombinedRef \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e useCallback, \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432 depth \u0443 \u043d\u0435\u0433\u043e \u0440\u0435\u0444\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0438 \u043f\u0440\u0438 \u0435\u0451 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u043b\u0438 null, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e null, \u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c return, \u0435\u0441\u043b\u0438 \u0436\u0435 \u0440\u0435\u0444 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c, \u0435\u0441\u043b\u0438 \u0436\u0435 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0435\u0444, \u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e current.<\/p>\n
        \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useCombinedRef \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 1 \u0440\u0435\u0444, \u043d\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0440\u0435\u0444\u044b. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a getBoundingClientRect \u043f\u0440\u0438 \u043c\u0430\u0443\u043d\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Input, \u0442\u0430\u043a \u0438 \u043d\u0430\u0448\u0430 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0430 \u043d\u0430 \u0438\u043d\u043f\u0443\u0442\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443<\/p>\n
        \u0427\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0432 React 19 \u0432 \u0447\u0430\u0441\u0442\u0438 callback refs<\/h3>\n
        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430:<\/strong> React \u0442\u0435\u043f\u0435\u0440\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0447\u0438\u0441\u0442\u043a\u0443 callback refs \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0441 \u0437\u0430\u0434\u0430\u0447\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438. \u0412\u043e\u0442 \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React \u0443 \u0441\u0435\u0431\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/p>\n
        <input   ref={(ref) => {     \/\/ ref created      \/\/ NEW: return a cleanup function to reset     \/\/ the ref when element is removed from DOM.     return () => {       \/\/ ref cleanup     };   }} \/> <\/code><\/pre>\n
        \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>, \u0442\u0430\u043c \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0440\u0435\u0444\u0430 \u0447\u0435\u0440\u0435\u0437 null \u0431\u0443\u0434\u0435\u0442 deprecate \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 1 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0440\u0435\u0444\u043e\u0432<\/p>\n
        \u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 refs \u0438 callback refs<\/h3>\n