How could we handle expensive or frequent subscriptions that need to access some changing prop/state with hooks?
Offen
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
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.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit den Hooks-Beispielen im Issue und überprüfe die bestehende Dokumentation zu useEffect, useRef und exhaustive-deps. Ermittle, wie die Dokumentation Abonnements erklären sollte, die aktuelle Props oder State benötigen, ohne teure Abonnements neu zu erstellen; abgeschlossen, wenn die Anleitung das Problem veralteter Werte und die Abhängigkeitswarnung behandelt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100