Using react useRef() --why my ref is null?

Question

I have a simple example

function Node() {
    const [hidden, setHidden] = useState(true);
    const inputRef = useRef(null)
    console.log(inputRef);
    return (
        <div>
            {!hidden && <h2 ref={inputRef}>Hello World</h2>}
            {hidden && <button onClick={() => setHidden(false)}>Show Child</button>}
        </div>
    )
}

Upon clicking the button, I would expect that the h2 DOM element is attached to my ref. However, I found that the ref.current is still null upon logging, but if I expand the object, it contains the DOM node.

How am I supposed to access the DOM element via my ref? At the time I want to reference it, for example inputRef.current.getBoundingClientRect(), it's always shown as null. Your help is much appreciated!

Your log is just to early, at the time it runs the ref hasn't been assigned yet, it'll be there in useEffect, you should put your logic there — Nadia Chibrikova
– Nadia Chibrikova, Commented Mar 15, 2021 at 13:35

Federkun · Accepted Answer · 2021-03-15 13:38:48Z

3

You are trying to use the ref in the render phase, but the ref will be populate once React paint the screen, in the commit phase. So, call it in a useEffect or useLayoutEffect

// run synchronously after all DOM mutations
React.useLayoutEffect(() => {
  // do something with inputRef
}, [])

answered Mar 15, 2021 at 13:38

Federkun

37.2k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

konghu Over a year ago

What if I want to display the coordinates of my ref in my render? Will I need to somehow force another render? For example, I want to have <div>{inputRef.current.getBoundingClientRect().width}</div>

Federkun Over a year ago

yeah, you need to set state in the use effect with the value from inputRef.current.getBoundingClientRect().width

Neo · Accepted Answer · 2021-03-15 13:36:20Z

0

Your ref is not initialize when setHidden set to false if you want to use it you need some interactions like this

        import React, { useRef, useState, useEffect } from 'react';
    
    function App() {
        const [hidden, setHidden] = useState(true);
        const inputRef = useRef(null)
        console.log(inputRef);
        const handleChange=()=>{
        console.log(inputRef);
          
        }

useEffect(()=>{
   console.log(inputRef);
},[hidden])
        return (
            <div>
              <input onChange ={handleChange}></input>
                {!hidden && <h2 ref={inputRef}>Hello World</h2>}
                {hidden && <button onClick={() => setHidden(false)}>Show Child</button>}
            </div>
        )
    }
    
    export default App;

answered Mar 15, 2021 at 13:36

Neo

7441 gold badge6 silver badges23 bronze badges

3 Comments

Neo Over a year ago

you are calling consle.log(inputRef) too early before code reachs {!hidden && <h2 ref={inputRef}>Hello World</h2>}

konghu Over a year ago

What if I want to display the coordinates of my ref in my render? Will I need to somehow force another render? For example, I want to have <div>{inputRef.current.getBoundingClientRect().width}</div>

Neo Over a year ago

Maks your operation inside useEffect(()=>{},[hidden])

Collectives™ on Stack Overflow

Using react useRef() --why my ref is null?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related