无需重新执行useEffect/useMemo获取最新state的实现是否合理？

你的写法是否正确？ #

完全正确。核心是利用useRef创建的对象在组件整个生命周期内引用恒定的特性，每次组件渲染时将最新state赋值给ref的属性，让仅绑定一次的事件回调能随时访问到最新的state值——这完美避开了因state高频变化导致useEffect反复执行、重复绑定/解绑事件的性能损耗，非常适合你提到的「useEffect逻辑复杂、依赖每帧变化」的场景。

小细节优化：React社区约定俗成用ref的current属性存储动态值，建议把realState.state改成realState.current，代码更易读也更符合规范。

更优的实现方案 #

1. 简化版ref实现（最轻量化） #

保持核心逻辑不变，改用规范的current属性：

function MyComponent(props) {
    const [state, setState] = useState(0)
    const stateRef = useRef(state)
    // 每次渲染同步最新state到ref
    stateRef.current = state

    const ref = useRef(null)
    useEffect(() => {
        const onPointerDown = (event) => {
            console.log(stateRef.current)
        }
        ref.current.addEventListener("pointerdown", onPointerDown)
        return () => ref.current.removeEventListener("pointerdown", onPointerDown)
    }, [])

    return <button ref={ref}>{props.title}</button>
}

2. React 19+ 使用useEvent（最简洁规范） #

React 19推出的useEvent API专门解决这类「需要稳定回调但要访问最新state」的场景，它会创建一个引用恒定的函数，内部始终能获取到最新的组件状态，无需手动维护ref：

function MyComponent(props) {
    const [state, setState] = useState(0)
    // 创建稳定的事件回调，自动捕获最新state
    const onPointerDown = useEvent((event) => {
        console.log(state)
    })

    const ref = useRef(null)
    useEffect(() => {
        ref.current.addEventListener("pointerdown", onPointerDown)
        return () => ref.current.removeEventListener("pointerdown", onPointerDown)
    }, [onPointerDown]) // useEvent返回的函数引用稳定，useEffect仅执行一次

    return <button ref={ref}>{props.title}</button>
}

3. useSyncExternalStore（适合外部状态场景） #

如果你的state来自外部状态管理库（比如Redux、Zustand），可以用React 18+的useSyncExternalStore来订阅状态变化，不过对于组件内部state来说，这个方案略显冗余：

function MyComponent(props) {
    const [state, setState] = useState(0)
    // 定义订阅和获取最新状态的函数
    const subscribe = (callback) => {
        // 组件内部state无需额外订阅，返回空的解绑函数即可
        return () => {}
    }
    const getLatestState = () => state

    const ref = useRef(null)
    useEffect(() => {
        const onPointerDown = (event) => {
            console.log(getLatestState())
        }
        ref.current.addEventListener("pointerdown", onPointerDown)
        return () => ref.current.removeEventListener("pointerdown", onPointerDown)
    }, [])

    return <button ref={ref}>{props.title}</button>
}

内容的提问来源于stack exchange，提问作者Chaoz