React Hooks: Почему .current null для useRef Hook?

Question

У меня есть простой пример компонента:

function App() {
  const observed = useRef(null);
  console.log(observed.current);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Я ожидаю, что observed.current будет иметь тип элемента, а current будет не пустым, а элементом div со всеми его свойствами.В моем понимании:

1. Ссылка инициализируется значением null
2. Значение Null перезаписывается ссылкой

Но, как оказалось,.current остается пустым.Это плохо, так как я хочу передать наблюдаемое в функцию, которая ожидает аргумент типа Element.

https://codesandbox.io/embed/purple-forest-0460k

Answer 1

Ref.current является нулевым, потому что ссылка не устанавливается до тех пор, пока функция не вернется и содержимое будет отображено. Хук useEffect срабатывает каждый раз, когда изменяется значение содержимого переданного ему массива. Передав observed в массив и передав обратный вызов, который регистрирует observed на консоль, можно использовать хук useEffect для выполнения вашей задачи.

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

Код Песочница

Answer 2

В то время, когда console.log происходит, ref еще не установлен. Попробуйте положить console.log в useEffect крючок, и он работает так, как вы хотите.

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);