Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить forwardRef()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить forwardRef()

forwardRef() дозволяє **передавати ref (посилання)** **через компонент далі - до його дочірнього елемента**.

> Простіше кажучи: зазвичай ref працює лише з **DOM-елементами** (`<input>`, `<div>`, `<video>`), але не з **твоїми компонентами** (`<MyInput />`).
>
> forwardRef «пробрасує» ref **усередину** твого компонента, щоб він таки «дійшов» до потрібного DOM-вузла.

---

## Без forwardRef ref не працює

```javascript
function MyInput() {
  return <input />;
}

function App() {
  const inputRef = useRef(null);

// This won't work: the ref won't reach inside MyInput
  return <MyInput ref={inputRef} />;
}
```

Помилка в консолі:

```javascript
Warning: Function components cannot be given refs.
```

React не знає, **куди прикріпити ref**, тому що MyInput - це звичайна функція, а не DOM-елемент.

---

## З forwardRef

```javascript
import { forwardRef, useRef, useEffect } from "react";

const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function App() {
  const inputRef = useRef(null);

useEffect(() => {
    inputRef.current.focus(); // now it works!
  }, []);

return <MyInput ref={inputRef} placeholder="Focus on me" />;
}
```

Тепер ref із App «пробрасується» прямо до внутрішнього `<input>`.

---

## Як це працює

forwardRef приймає компонент як аргумент і повертає **новий компонент**, який може отримувати `ref` як другий параметр:

```javascript
const MyComponent = forwardRef((props, ref) => {
  // ref is now available here
  return <div ref={ref}>{props.children}</div>;
});
```

---

## Приклад із useImperativeHandle

Іноді ти хочеш **керувати тим, що саме доступно через ref**, а не просто DOM.

```javascript
import { useRef, useImperativeHandle, forwardRef } from "react";

const Timer = forwardRef((props, ref) => {
  const startTime = useRef(Date.now());

useImperativeHandle(ref, () => ({
    reset: () => (startTime.current = Date.now()),
    getElapsed: () => Date.now() - startTime.current,
  }));

return <p>Timer running...</p>;
});

function App() {
  const timerRef = useRef();

return (
    <div>
      <Timer ref={timerRef} />
      <button onClick={() => console.log(timerRef.current.getElapsed())}>
        Show elapsed time
      </button>
      <button onClick={() => timerRef.current.reset()}>Reset</button>
    </div>
  );
}
```

Тут forwardRef + useImperativeHandle дають повний контроль: ти пробрасуєш **не просто DOM**, а **набір методів**, які батьківський компонент може викликати.

---

## Важливо пам'ятати

| Правило | Пояснення |
|---|---|
| ref типово не передається у функціональні компоненти | Лише DOM-елементи приймають ref напряму |
| forwardRef потрібен, щоб пробросити ref усередину | Дозволяє батьківському компоненту керувати дочірнім елементом |
| Другий аргумент функції - це ref | forwardRef((props, ref) => {...}) |
| Працює лише з функціями, не з класами | Для класів ref працює напряму |

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Що робить forwardRef() | Дозволяє передавати ref через компонент усередину до дочірнього елемента |
| Як виглядає | const Comp = forwardRef((props, ref) => <div ref={ref} />) |
| Коли використовувати | Коли потрібно, щоб батьківський компонент мав доступ до DOM-елемента всередині кастомного компонента |
| Можна комбінувати з | useImperativeHandle() - щоб керувати тим, що доступно через ref |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати465 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.