Is it safe to use ref.current as useEffect's dependency when ref points to a DOM element?

Question

I'm aware that ref is a mutable container so it should not be listed in useEffect's dependencies, however ref.current could be a changing value.

When a ref is used to store a DOM element like <div ref={ref}>, and when I develop a custom hook that relies on that element, to suppose ref.current can change over time if a component returns conditionally like:

const Foo = ({inline}) => {
  const ref = useRef(null);
  return inline ? <span ref={ref} /> : <div ref={ref} />;
};

Is it safe that my custom effect receiving a ref object and use ref.current as a dependency?

const useFoo = ref => {
  useEffect(
    () => {
      const element = ref.current;
      // Maybe observe the resize of element
    },
    [ref.current]
  );
};

I've read this comment saying ref should be used in useEffect, but I can't figure out any case where ref.current is changed but an effect will not trigger.

As that issue suggested, I should use a callback ref, but a ref as argument is very friendly to integrate multiple hooks:

const ref = useRef(null);
useFoo(ref);
useBar(ref);

While callback refs are harder to use since users are enforced to compose them:

const fooRef = useFoo();
const barRef = useBar();
const ref = element => {
  fooRef(element);
  barRef(element);
};

<div ref={ref} />

This is why I'm asking whether it is safe to use ref.current in useEffect.

Iloilo

Answer 1

It isn't safe because mutating the reference won't trigger a render, therefore, won't trigger the useEffect.

React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)

An anti-pattern example:

const Foo = () => {
  const [, render] = useReducer(p => !p, false);
  const ref = useRef(0);

  const onClickRender = () => {
    ref.current += 1;
    render();
  };

  const onClickNoRender = () => {
    ref.current += 1;
  };

  useEffect(() => {
    console.log('ref changed');
  }, [ref.current]);

  return (
    <>
      <button onClick={onClickRender}>Render</button>
      <button onClick={onClickNoRender}>No Render</button>
    </>
  );
};

---

A real life use case related to this pattern is when we want to have a persistent reference, even when the element unmounts.

Check the next example where we can't persist with element sizing when it unmounts. We will try to use useRef with useEffect combo as above, but it won't work.

// BAD EXAMPLE, SEE SOLUTION BELOW
const Component = () => {
  const ref = useRef();

  const [isMounted, toggle] = useReducer((p) => !p, true);
  const [elementRect, setElementRect] = useState();

  useEffect(() => {
    console.log(ref.current);
    setElementRect(ref.current?.getBoundingClientRect());
  }, [ref.current]);

  return (
    <>
      {isMounted && <div ref={ref}>Example</div>}
      <button onClick={toggle}>Toggle</button>
      <pre>{JSON.stringify(elementRect, null, 2)}</pre>
    </>
  );
};

---

Surprisingly, to fix it we need to handle the node directly while memoizing the function with useCallback:

// GOOD EXAMPLE
const Component = () => {
  const [isMounted, toggle] = useReducer((p) => !p, true);
  const [elementRect, setElementRect] = useState();

  const handleRect = useCallback((node) => {
    setElementRect(node?.getBoundingClientRect());
  }, []);

  return (
    <>
      {isMounted && <div ref={handleRect}>Example</div>}
      <button onClick={toggle}>Toggle</button>
      <pre>{JSON.stringify(elementRect, null, 2)}</pre>
    </>
  );
};

• See another example in React Docs: How can I measure a DOM node?
• Further reading and more examples see uses of useEffect

Incidence

In case a ref is passed to a DOM element, I think every DOM change is caused by a render, and an effect should trigger after a render is committed beginning with comparing ref.current, is it possible to still miss some ref updates when it is only used to reference a DOM? – Iloilo

Do you have an example of such case? (it wont trigger render) – Incidence

I can't have an example where DOM change won't trigger a render so I'm wondering why it is unsafe to use DOM ref.current in useEffect – Iloilo

@Iloilo If you relaying on DOM change why you using a dep array? Put the logic in useEffect without a dep array. ref.current as dependency is useless as mentioned in the answer – Incidence

Because ref can be changed form div to span, or from null to div across multiple renders, but empty deps array can run effect only once on the first mounted DOM element. – Iloilo

Is this still the case if the ref is a prop? Because it seems to work fine for us as long as the ref.current comes from a parent component rather than useRef(). – Opinionative

@Opinionative thats like a normal pattern of forwarding ref, its ok. – Incidence

@DennisVash, any thoughts on how to handle the situation here: #75622092? – Sabba

the code examples need to be typed, it's extremely difficult to implement any of this without them – Dogberry

Answer 2

2021 answer:

This article explains the issue with using refs along with useEffect: Ref objects inside useEffect Hooks:

The useRef hook can be a trap for your custom hook, if you combine it with a useEffect that skips rendering. Your first instinct will be to add ref.current to the second argument of useEffect, so it will update once the ref changes. But the ref isn’t updated till after your component has rendered — meaning, any useEffect that skips rendering, won’t see any changes to the ref before the next render pass.

Also as mentioned in this article, the official react docs have now been updated with the recommended approach (which is to use a callback instead of a ref + effect). See How can I measure a DOM node?:

function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

Shanika

Damn, React feels like writing Java in the old days. So much verbosity for simple things. – Henley

yes it scares me thinking of the fact that functional component is already a huge cut from class component – Luann

Come back JQuery all is forgiven! – Guildroy

And then you still need ResizeObserver. From the official docs: In this example, the callback ref will be called only when the component mounts and unmounts, since the rendered <h1> component stays present throughout any rerenders. If you want to be notified any time a component resizes, you may want to use ResizeObserver or a third-party Hook built on it. – Nikianikita

what are the types? – Dogberry

I change my mind about React, this is all getting ridiculous. For one, they could have significantly lowered the learning curve by passing the "render context" as a parameter into a component (render) function, instead of calling "hooks" and making them look like magic. – Beguile

Answer 3

I faced the same problem and I created a custom hook with Typescript and an official approach with ref callback. Hope that it will be helpful.

export const useRefHeightMeasure = <T extends HTMLElement>() => {
  const [height, setHeight] = useState(0)

  const refCallback = useCallback((node: T) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height)
    }
  }, [])

  return { height, refCallback }
}

Avidity

Answer 4

I faced a similar problem wherein my ESLint complained about ref.current usage inside a useCallback. I added a custom hook to my project to circumvent this eslint warning. It toggles a variable to force re-computation of the useCallback whenever ref object changes.

import { RefObject, useCallback, useRef, useState } from "react";

/**
 * This hook can be used when using ref inside useCallbacks
 * 
 * Usage
 * ```ts
 * const [toggle, refCallback, myRef] = useRefWithCallback<HTMLSpanElement>();
 * const onClick = useCallback(() => {
    if (myRef.current) {
      myRef.current.scrollIntoView({ behavior: "smooth" });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [toggle]);
  return (<span ref={refCallback} />);
  ```
 * @returns 
 */
function useRefWithCallback<T extends HTMLSpanElement | HTMLDivElement | HTMLParagraphElement>(): [
  boolean,
  (node: any) => void,
  RefObject<T>
] {
  const ref = useRef<T | null>(null);
  const [toggle, setToggle] = useState(false);
  const refCallback = useCallback(node => {
    ref.current = node;
    setToggle(val => !val);
  }, []);

  return [toggle, refCallback, ref];
}

export default useRefWithCallback;

Lasley

Answer 5

I had this issue while trying to use ResizeObserver. Ended up using callback reference observeRef that I pass back from the custom hook which does the observing.

import { useState, useCallback, useRef } from 'react';

export interface ElementDimensions {
  contentWidth: number;
  contentHeight: number;
  clientWidth: number;
  clientHeight: number;
  scrollWidth: number;
  scrollHeight: number;
  isOverflowingX: boolean;
  isOverflowingY: boolean;
  isOverflowing: boolean;
}

export interface UseResizeObserverResponse {
  observeRef: (target: HTMLElement) => void;
  dimensions: ElementDimensions;
}

/**
 * @returns ref to pass to the target element, ElementDimensions
 */
export const useResizeObserver = (): UseResizeObserverResponse => {
  const [dimensions, setDimensions] = useState<ElementDimensions>({} as ElementDimensions);
  const observer = useRef<ResizeObserver | null>(null); // we only need one observer instance
  const element = useRef<HTMLElement | null>(null);

  const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
    if (!Array.isArray(entries)) {
      return;
    }

    const entry = entries[0];
    const newDimensions: ElementDimensions = {
      contentWidth: entry.contentRect.width,
      contentHeight: entry.contentRect.height,
      clientWidth: entry.target.clientWidth,
      clientHeight: entry.target.clientHeight,
      scrollWidth: entry.target.scrollWidth,
      scrollHeight: entry.target.scrollHeight,
      isOverflowingX: entry.target.clientWidth < entry.target.scrollWidth,
      isOverflowingY: entry.target.clientHeight < entry.target.scrollHeight,
      // compute once on access then replace the getter with result
      get isOverflowing() {
        delete this.isOverflowing;
        return (this.isOverflowing = this.isOverflowingX || this.isOverflowingY);
      },
    };

    setDimensions(newDimensions);
  }, []);

  // initialize resize observer
  const observeRef = useCallback(
    (target: HTMLElement) => {
      // the callback ref fires often without a target, so only process when we have a target
      if (!target) {
        return;
      }

      // instantiate a new observer if needed
      if (!observer.current) {
        observer.current = new ResizeObserver((entries) => handleResize(entries));
      }

      // monitor the new element with cleanup of the old element
      if (element.current !== target) {
        element.current && observer.current?.disconnect(); // call disconnect if monitoring old element
        observer.current.observe(target);
        element.current = target;
      }
    },
    [handleResize]
  );

  return { observeRef, dimensions };
};

Use it

  const { observeRef, dimensions } = useResizeObserver();
  console.log('Observed dimensions: ', dimensions);
  return <div ref={observeRef} >Observe me</div>;

Tests

import { act, renderHook } from '@testing-library/react';
import { useResizeObserver } from './useResizeObserver';

describe('useResizeObserver', () => {
  let listener: ResizeObserverCallback;
  let mockObserverInstance: ResizeObserver;

  beforeEach(() => {
    mockObserverInstance = {
      observe: jest.fn(),
      unobserve: jest.fn(),
      disconnect: jest.fn(),
    };

    window.ResizeObserver = class MockResizeObserver {
      public constructor(ls: ResizeObserverCallback) {
        listener = ls;
      }
      public observe(elem: HTMLElement) {
        mockObserverInstance.observe(elem);
      }
      public disconnect() {
        mockObserverInstance.disconnect();
      }
    } as typeof ResizeObserver;
  });

  afterEach(() => {
    listener = undefined as unknown as ResizeObserverCallback;
    mockObserverInstance = undefined as unknown as ResizeObserver;
    window.ResizeObserver = undefined as unknown as typeof ResizeObserver;
  });

  it('should return a callback ref', () => {
    const { result } = renderHook(() => useResizeObserver());
    expect(result.current).toEqual({ observeRef: expect.any(Function), dimensions: {} });
    expect(mockObserverInstance.observe).not.toHaveBeenCalled();
  });

  it('should synchronously set up ResizeObserver listener', () => {
    const { result } = renderHook(() => useResizeObserver());
    expect(listener).toBeUndefined();

    act(() => {
      const div = document.createElement('div');
      result.current.observeRef(div);
    });

    expect(typeof listener).toBe('function');
  });

  it('should monitor element target with observer', () => {
    const { result } = renderHook(() => useResizeObserver());
    expect(result.current).toEqual({ observeRef: expect.any(Function), dimensions: {} });
    expect(mockObserverInstance.observe).not.toHaveBeenCalled();

    const elem: HTMLElement = document.createElement('div');
    result.current.observeRef(elem);
    expect(mockObserverInstance.observe).toHaveBeenCalledWith(elem);
  });

  it('should stop monitoring old element when new element is provided', () => {
    const { result } = renderHook(() => useResizeObserver());
    expect(result.current).toEqual({ observeRef: expect.any(Function), dimensions: {} });
    expect(mockObserverInstance.observe).not.toHaveBeenCalled();

    const elem: HTMLElement = document.createElement('div');
    result.current.observeRef(elem);
    expect(mockObserverInstance.observe).toHaveBeenCalledWith(elem);
    expect(mockObserverInstance.disconnect).not.toHaveBeenCalled();

    const elem2: HTMLElement = document.createElement('span');
    result.current.observeRef(elem2);
    expect(mockObserverInstance.disconnect).toHaveBeenCalled();
    expect(mockObserverInstance.observe).toHaveBeenCalledWith(elem2);
  });

  it('should not update dimensions when no entries provided to listener', () => {
    const { result } = renderHook(() => useResizeObserver());

    let div: HTMLElement;
    act(() => {
      div = document.createElement('div');
      result.current.observeRef(div);
    });

    act(() => {
      listener(undefined as unknown as ResizeObserverEntry[], {} as ResizeObserver);
    });

    expect(result.current.dimensions).toMatchObject({});
  });

  it('should track rectangle of a DOM element', () => {
    const { result } = renderHook(() => useResizeObserver());

    let div: HTMLElement;
    act(() => {
      div = document.createElement('div');
      result.current.observeRef(div);
    });

    act(() => {
      listener(
        [
          {
            target: div,
            contentRect: {
              width: 200,
              height: 200,
            },
          } as unknown as ResizeObserverEntry,
        ],
        {} as ResizeObserver
      );
    });

    const expectedDimensions = {
      clientHeight: 0,
      clientWidth: 0,
      contentHeight: 200,
      contentWidth: 200,
      isOverflowing: false,
      isOverflowingX: false,
      isOverflowingY: false,
      scrollHeight: 0,
      scrollWidth: 0,
    };

    expect(result.current.dimensions).toMatchObject(expectedDimensions);
  });

  it('should compute overflow of target DOM element', () => {
    const { result } = renderHook(() => useResizeObserver());

    let div: HTMLElement;
    act(() => {
      div = document.createElement('div');
      result.current.observeRef(div);
    });

    act(() => {
      listener(
        [
          {
            target: {
              clientHeight: 100,
              clientWidth: 100,
              scrollWidth: 200,
              scrollHeight: 100,
            },
            contentRect: {
              width: 100,
              height: 100,
            },
          } as unknown as ResizeObserverEntry,
        ],
        {} as ResizeObserver
      );
    });

    const expectedDimensions = {
      clientHeight: 100,
      clientWidth: 100,
      contentHeight: 100,
      contentWidth: 100,
      isOverflowing: true,
      isOverflowingX: true,
      isOverflowingY: false,
      scrollHeight: 100,
      scrollWidth: 200,
    };

    expect(result.current.dimensions).toMatchObject(expectedDimensions);

    act(() => {
      listener(
        [
          {
            target: {
              clientHeight: 100,
              clientWidth: 100,
              scrollWidth: 100,
              scrollHeight: 200,
            },
            contentRect: {
              width: 100,
              height: 100,
            },
          } as unknown as ResizeObserverEntry,
        ],
        {} as ResizeObserver
      );
    });

    const expectedDimensions2 = {
      clientHeight: 100,
      clientWidth: 100,
      contentHeight: 100,
      contentWidth: 100,
      isOverflowing: true,
      isOverflowingX: false,
      isOverflowingY: true,
      scrollHeight: 200,
      scrollWidth: 100,
    };

    expect(result.current.dimensions).toMatchObject(expectedDimensions2);
  });
});

Nikianikita

Answer 6

I've stopped using useRef and now just use useState once or twice:

const [myChart, setMyChart] = useState(null)

const [el, setEl] = useState(null)
useEffect(() => {
    if (!el) {
        return
    }
    // attach to element
    const myChart = echarts.init(el)
    setMyChart(myChart)
    return () => {
        myChart.dispose()
        setMyChart(null)
    }
}, [el])

useEffect(() => {
    if (!myChart) {
        return
    }
    // do things with attached object
    myChart.setOption(... data ...)
}, [myChart, data])

return <div key='chart' ref={setEl} style={{ width: '100%', height: 1024 }} />

Useful for charting, auth and other non-react libraries, because it keeps an element ref and the initialized object around and can dispose of it directly as needed.

I'm now not sure why useRef exists in the first place...?

Frizzell

Based on Dan's comment here: github.com/facebook/react/issues/14387#issuecomment-503616820 Refs are for values whose changes don't need to trigger a re-render. And I agree with that statement there are instances that you don't need a re-render and just need to keep a reference of something in your code e.g. component, a counter, etc. – Acidophil

Strange, so is ref in a return <div ref={ref}> not intended to be used with useRef? Because I do want to trigger execution of a block once that div element is assigned and that triggering is usually done with useEffect, like in the question. – Frizzell

Ref changes don't trigger a re-render. Chances are some of your components triggered a re-render and just about time that your ref also changed and was captured by your useEffect. – Acidophil

But we do want to capture the cases once the DOM element is assigned. That's why useRef isn't that useful in the majority of cases and why I think it shouldn't ever connect to an element's ref={ref}. Per the docs it seems like the recommended way is to rather use a "callback ref" (see answer by Gyum Fox). I'm thinking a useState can also work and is simpler. – Frizzell