作为参数传入的 useRef 需要添加到依赖项中吗？

Question

从下面两个问题，我了解到useRef不需要添加更新依赖。

我查看的相关问题：

• https://stackoverflow.com/a/60476525/9854149

• https://stackoverflow.com/a/63353582/9854149

但是当 useRef 用作props、eslint 总是警告 hook 缺少依赖项？

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

const One = ({ refEl }) => {
  const clickHandler = useCallback(e => {
    refEl.current = 1111;
  }, []); //⚠️ React Hook useCallback has a missing dependency: 'refEl'. Either include it or remove the dependency array.

  useEffect(() => {
    refEl.current = 2222;
  }, []); //⚠️ React Hook useCallback has a missing dependency: 'refEl'. Either include it or remove the dependency array.

  return (
    <div onClick={clickHandler} ref={refEl}>
      One
    </div>
  );
};

function App() {
  const el = useRef('');
  return <One refEl={el} />;
}

export default App;

Answer 1

eslint 无法判断 refEl 是一个 ref，因此它只会将其视为普通 prop，将 ref 传递给您应该使用 React.forwardRef 的功能组件

import { useCallback, useEffect, useRef, forwardRef } from "react";

const One = forwardRef((props, ref) => {
  const clickHandler = useCallback((e) => {
    ref.current = 1111;
  }, [ref]);

  useEffect(() => {
    ref.current = 2222;
  }, [ref]);

  return (
    <div onClick={clickHandler} ref={ref}>
      One
    </div>
  );
});

function App() {
  const el = useRef("");
  return <One ref={el} />;
}

export default App;