React Hooks: Why is .current null for useRef Hook?

Question

I have a simple example of a component:

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

  return (
    


        
      

Answer 1

At the time the console.log happens, the ref isn't yet set. Try putting your console.log into a useEffect hook and it works as you want it to.

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 (
    

      
Hello CodeSandbox
      
Start editing to see some magic happen!
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);