I have a React app where I am hiding/showing an element based on state, and want to do some calculations on that DOM element after the state variable changes.

I've tried using useLayoutEffect, but this still runs before the DOM has updated, so my calculations aren't useful. Is my understanding of useLayoutEffect wrong? Am I using it incorrectly?

Here's what I have

const myComponent = () => {

  const elem = useRef()
  const [isElemVisible, setIElemVisible] = useState(false)

  useLayoutEffect(() => {
    // I want this to run AFTER the element is added/removed from the DOM
    // Instead this is run before the element is actually modified in the DOM (but the ref itself has changed)

    elem.current.getBoundingClientRect() // do something with this object if it exists
  }, [elem.current])


  return (
   <div id="base-element">
    { isElemVisible && (
      <div id="element" ref={elem}></div>
    )}
   </div>
  )
}

I have a React app where I am hiding/showing an element based on state, and want to do some calculations on that DOM element after the state variable changes.

I've tried using useLayoutEffect, but this still runs before the DOM has updated, so my calculations aren't useful. Is my understanding of useLayoutEffect wrong? Am I using it incorrectly?

Here's what I have

const myComponent = () => {

  const elem = useRef()
  const [isElemVisible, setIElemVisible] = useState(false)

  useLayoutEffect(() => {
    // I want this to run AFTER the element is added/removed from the DOM
    // Instead this is run before the element is actually modified in the DOM (but the ref itself has changed)

    elem.current.getBoundingClientRect() // do something with this object if it exists
  }, [elem.current])


  return (
   <div id="base-element">
    { isElemVisible && (
      <div id="element" ref={elem}></div>
    )}
   </div>
  )
}

• javascript
• reactjs
• dom
• react-hooks

• You have the wrong dependency - isElementVisible isn't used in the effect, but elem.current is. The linter will tell you this if you have it turned on. Hooks will run once at the start, but afterwards only when the dependencies change. So depending on the ref rather than the trigger state value will make the effect be triggered by it's cause. – user8745435 Commented May 29, 2020 at 8:19
• Also, const bbox = elem.current && elem.current.getBoundingClientRect() since the value of current will be undefined when the element is removed. – user8745435 Commented May 29, 2020 at 8:23
• Thanks. Technically correct on both counts. I omitted the existence check since it's not really helpful in this example. – Adam Thompson Commented May 29, 2020 at 14:53
• When I add elem.current to the deps, the effect still runs before the DOM change. It seems like this is running like ponentWillUpdate instead of ponentDidUpdate – Adam Thompson Commented May 29, 2020 at 16:03
• 3 useLayoutEffect() runs after DOM updates but before browser paints, so that you can alter something based on (for example) bounding box, which runs the function again before the user sees any changes. Since you are not doing anything particularly useful inside the effect, how do you even know when it runs? – user8745435 Commented May 29, 2020 at 22:21

3 Answers 3

You can try to pass a function as ref and do stuff in that function:

const myComponent = () => {

  // other ponent code

  const elemRef = useCallback((node) => {
    if (node !== null) {
      // do stuff here
    }
  }, [])


  return (
   <div id="base-element">
    { isElemVisible && (
      <div id="element" ref={elemRef}></div>
    )}
   </div>
  )
}

Check out this https://reactjs/docs/hooks-faq.html#how-can-i-measure-a-dom-node

An easy solution to this, is to manually check for state update in a useEffect hook:

const myComponent = () => {

  const elem = useRef()
  const [isElemVisible, setIElemVisible] = useState(false)

  useEffect(() => {
   if (isElemVisible) {
     // Assuming UI has updated:
     elem.current.getBoundingClientRect() // do something with this object
   }

  }, [isElemVisible])


  return (
   <div id="base-element">
    { isElemVisible && (
      <div id="element" ref={elem}></div>
    )}
   </div>
  )
}

You almost did it right.

useRef.current will always point to the same object during a ponent lifeCycle and will be changed only explicitly(like elem.current = something on some render).

but you can inspect when isElemVisible will change, and fire callback after it happens:

const myComponent = () => {

  const elem = useRef()
  const [isElemVisible, setIElemVisible] = useState(false)

  useLayoutEffect(() => {
    if(isElemVisible)
      elem.current.getBoundingClientRect()
  }, [isElemVisible])


  return (
   <div id="base-element">
    { isElemVisible && (
      <div id="element" ref={elem}></div>
    )}
   </div>
  )
}