CODEWITHSUNDEEP
javascriptreactjstypescript
Sean
Sean

Reputation: 1456

React useRef current not updating every time

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]);

Upvotes: 2

Views: 9888

Answers (1)

Felix
Felix

Reputation: 64

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

Upvotes: 4

Related Questions