How could we handle expensive or frequent subscriptions that need to access some changing prop/state with hooks?

It sort of looks hard without breaking the rule

const Component = ({ outer }) => {
    const [mutable, setMutable] = useState(0);
    const [cond, setCond] = useState(false);
    useEffect(() => {
        const handle = doExpensiveSubscription((value) => {
            if (cond) {
                // cond and outer are stale values
                setMutable(calculate(outer, value));
            }
        });
        return handle.unsubscribe;
        // the ESLint exhaustive-deps rule would warn about unmet dependency: outer, cond
    }, []);
    return <div onClick={() => setCond(!cond)}>{mutable}</div>;
};

My temporary solution to the problem looks like

const Component = ({ outer }) => {
    const [mutable, setMutable] = useState(0);
    const [cond, setCond] = useState(false);

    const paramRef = useRef({});
    paramRef.current = { outer, cond };

    useEffect(() => {
        const handle = doExpensiveSubscription((value) => {
            const { outer, cond } = paramRef.current;
            if (cond) {
                // cond and outer hold their respective current values now
                setMutable(calculate(outer, value));
            }
        });
        return handle.unsubscribe;
        // the ESLint exhaustive-deps rule would warn about unmet dependency: outer, cond
    }, []);
    return <div onClick={() => setCond(!cond)}>{mutable}</div>;
};

There does not seem to be a specific documentation about that.

Bắt đầu với các ví dụ về hooks trong issue và xem lại tài liệu hiện có về useEffect, useRef và exhaustive-deps. Xác định cách tài liệu nên giải thích các subscription cần props hoặc state hiện tại mà không tạo lại các subscription tốn kém; hoàn tất khi phần hướng dẫn đề cập đến vấn đề stale value và cảnh báo về dependency.