当 ref 指向 DOM 元素时，使用 ref.current 作为 useEffect 的依赖项是否安全？

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

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;

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>
</>
);
}

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

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 }
}