2

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]);
Chris G
  • 1,598
  • 1
  • 6
  • 18
Sean
  • 1,368
  • 2
  • 9
  • 21

1 Answers1

2

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).

Felix
  • 39
  • 6