React+Chart.js中useCallback拖拽回调为何无法获取最新状态值

问题背景 #

使用React和chart.js实现柱状图展示功能，同时引入chartjs-plugin-dragdata与chartjs-plugin-zoom插件，支持图表在限定范围内的拖拽、缩放操作。

实现目标 #

dragdata插件支持在options配置对象中自定义onDragStart和onDragEnd回调函数，需要在指定状态更新时同步修改该回调逻辑。该状态在其他组件中更新，可以通过useEffect钩子正常监听到它的变化：

// setActiveState调用时可正常触发
useEffect(()=> {
    console.log(activeState) // 可正常打印值从state_1变为state_2
}, [activeState]);

核心业务代码如下：

export const SomeComponent: FC = () => {
    const { activeState } = useContext(CertainContext)
    const data = //.. some data

    const onDragStart = (event, elIndex, chartIndex)=> {
        console.log(activeState) // <-- 此处存在问题：打印值始终为state_1
    }
    const options = {
        // other options
        plugins: {
            dragData: {
                onDragStart: onDragStart
            }
        }
    }
    return (
      <Chart
        type="bar"
        options={options}
        data={data}
      />
    )
}

存在的问题：无论怎么调整实现方式，onDragStart函数始终留存首次渲染时的activeState初始值，不会同步更新。

已尝试方案 #

最初判断问题和React函数的闭包值捕获机制有关，因此尝试使用useCallback钩子，让函数在activeState变化时重新生成，但问题并未解决：

export const SomeComponent: FC = () => {
    const { activeState } = useContext(CertainContext)
    const data = //.. some data

    const onDragStart = useCallback((event, elIndex, chartIndex)=> {
        console.log(activeState) // <-- 此处存在问题：打印值始终为state_1
    }, [activeState])
    const options = {
        // other options
        plugins: {
            dragData: {
                onDragStart: onDragStart
            }
        }
    }
    return (
      <Chart
        type="bar"
        options={options}
        data={data}
      />
    )
}

可以确认组件确实发生了重渲染，仅该回调函数未获取到最新值，options中的其他配置项可以正常更新，例如下方缩放配置的enabled属性就可以随activeState变化正常生效：

const options = {
        // other options
        plugins: {
            zoom: {
                wheel: {
                    enabled: activeState === "state_1" // 该配置可随状态正常更新生效
                }
            }
        }
    }

后续还尝试过使用useMemo缓存整个options对象等多种组合写法，但始终未解决问题。

这个问题和React Hooks闭包陷阱无关，本质是第三方插件的配置更新逻辑差异：

• 普通配置项（比如zoom插件的enabled属性）更新时，react-chartjs-2会把新值同步到底层Chart.js实例的对应配置上，所以状态变化后可以正常生效
• chartjs-plugin-dragdata在图表初始化阶段，会直接把首次传入的onDragStart/onDragEnd回调缓存到插件自身的内部作用域中，后续options对象更新时，插件不会主动替换已经缓存的回调引用。因此无论组件重渲染多少次、是否用useCallback/useMemo包裹回调或配置，拖拽触发的永远是第一次渲染时捕获了初始状态值的旧函数。

用ref存储最新的状态值，回调中永远读取ref的最新值即可，完全不需要依赖useCallback或者useMemo反复生成新的配置/回调引用：

export const SomeComponent: FC = () => {
    const { activeState } = useContext(CertainContext)
    const data = //.. some data
    // 用ref同步存储最新的状态值
    const activeStateRef = useRef(activeState)
    // 每次状态变化就更新ref的current值
    useEffect(() => {
        activeStateRef.current = activeState
    }, [activeState])

    // 这个回调只需要在组件首次渲染时定义一次即可
    const onDragStart = (event, elIndex, chartIndex)=> {
        // 永远从ref里取最新值，不存在闭包陈旧问题
        console.log(activeStateRef.current)
        // 后续拖拽逻辑直接使用activeStateRef.current即可，拿到的永远是最新状态
    }
    const options = {
        // other options
        plugins: {
            dragData: {
                onDragStart: onDragStart
            },
            zoom: {
                wheel: {
                    enabled: activeState === "state_1"
                }
            }
        }
    }
    return (
      <Chart
        type="bar"
        options={options}
        data={data}
      />
    )
}

如果还有onDrag、onDragEnd这类其他回调，同理都从ref里取值即可，不需要把这些回调加到依赖数组里反复生成新引用。

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