如何在不创建新监听器的前提下更新hook？

你的代码核心冲突在于两个需求的矛盾：

• 订阅回调中需要读取最新的groups参数值做判断
• 不希望groups变化时销毁旧订阅、创建新的重复监听器

原来的写法中groups作为副作用依赖，每次变化都会执行清理函数销毁旧监听器，再创建新监听器，虽然实际上不会同时存在多个监听器，但如果订阅是重操作或者会产生额外服务端请求的话，确实会有不必要的开销，你可以选择以下两种方案解决：

方案1：使用useRef同步最新groups（兼容所有React版本） #

通过额外的Ref容器存储最新的groups值，订阅逻辑仅在组件挂载时执行一次，回调中直接读取Ref的当前值即可拿到最新的groups：

import { useEffect, useRef } from 'react';

export function useStatusListener(groups, setGroups) {
    // 新建Ref同步最新groups值
    const groupsRef = useRef(groups);
    
    // 专门负责更新Ref的副作用，groups变化时仅更新Ref，不触发订阅重置
    useEffect(() => {
        groupsRef.current = groups;
    }, [groups]);

    // 订阅逻辑仅执行一次，依赖为空数组
    useEffect(() => {
        const unsubscribe = appRuntime.subscribe(
            "channel-name",
            (args) => {
                // 直接从Ref中取最新值判断
                if (groupsRef.current) {
                    // more code here...
                }
            }
        );

        return () => {
            unsubscribe();
        };
    }, []);
}

该方案无需依赖高版本React，逻辑直观，适合需要兼容旧版本的场景。

方案2：使用useEvent封装回调（React 18+ 推荐） #

如果你使用的是React 18及以上版本，可以直接用官方提供的useEvent API封装订阅回调，它会自动绑定最新的状态变量，不需要将groups加入副作用依赖：

import { useEffect, useEvent } from 'react';

export function useStatusListener(groups, setGroups) {
    // useEvent封装的回调永远能拿到最新的groups、setGroups等外部变量
    const handleMessage = useEvent((args) => {
        if (groups) {
            // more code here...
        }
    });

    useEffect(() => {
        const unsubscribe = appRuntime.subscribe("channel-name", handleMessage);
        return () => unsubscribe();
    }, [handleMessage]); // useEvent返回的引用永远稳定，不会触发副作用重执行
}

该方案代码更简洁，不需要手动维护Ref同步，是官方推荐的解决此类「需要最新状态但不希望触发副作用重跑」场景的方案。

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