I have a ponent that uses the useRef hook on a div in order to calculate the height whenever a ponent 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]);

I have a ponent that uses the useRef hook on a div in order to calculate the height whenever a ponent 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]);

• javascript
• reactjs
• typescript

1 Answer 1

I think your issue is discussed in here. Mutating a reference does not necessarily trigger a rerender, and does not necessarily trigger the useEffect. You could use a useCallback hook instead of your working solution (see code snippet from this answer in particular).