React hook that runs AFTER the DOM updates

user_2200383 0
Viewed 3879

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>
  )
}
react-hooks reactjs dom javascript
3 Answers

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

const myComponent = () => {

  // other component 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.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

user_51553880

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>
  )
}
user_50695050

You almost did it right.

useRef.current will always point to the same object during a component 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>
  )
}
user_105779760
Related