I have a component that uses the useRef hook on a div in order to calculate the height whenever a component is removed from that div.

The problem I am having is that the clientHeight is not always updating when I remove an element from the div. It does work if I use useState and a useEffect. Is there any reason why the following method won't work? How can I get this to work without using more state and another useEffect?

Doesnt work:

useEffect(() => {
    dispatch(setAppNotificationHeight(notificationRef.current?.clientHeight));
  }, [notificationRef.current?.clientHeight]);

Works:

  const [height, setHeight] = useState<number | undefined>(undefined);

  useEffect(() => {
    setHeight(notificationRef.current?.clientHeight);
  });

  useEffect(() => {
    dispatch(setAppNotificationHeight(height));
  }, [height]);