A note about not firing side effects in useState(prev => next) ?
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
So I ended up doing this by mistake after a wonky merge:
let Foo = (props) => {
let [bar, setBar] = useState();
let handleClick = () => {
useState(bar => {
let newBar = bar + 1;
props.handleBarChange(newBar); // bad, which isn't surprising
return newBar;
});
};
return <div onClick={handleClick}>click me</div>;
};
If you fire a side effect such as calling something that sets state in a higher component from a useState updater function, you get the error "Cannot update a component from inside the function body of a different component" (but not always! It seems to depend on internal timing). This definitely seems like a bad idea when you look at it, but I couldn't find any mention in the docs that this is bad.
https://reactjs.org/docs/hooks-reference.html#functional-updates
There is the note about side effects generally on useEffect:
Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase)
But this is not in the main body of a function component, doesn't feel like a true side effect as it's still just setting state within React, and doesn't feel like it's in the render phase either.
I initially wanted to comment about this here (https://github.com/facebook/react/issues/18178), because the general message of that thread was "don't set state of another component in a render method", and I've managed to get this error message without doing that, but the thread is locked. Thanks.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dalla pagina di riferimento di Hooks collegata, in particolare dalla sezione sugli aggiornamenti funzionali, e confronta le relative indicazioni con la nota citata sugli effetti collaterali di useEffect. Chiarisci se gli effetti collaterali all'interno di un updater di useState non sono supportati e spiega il comportamento pertinente; il lavoro sarà considerato completato quando la documentazione tratterà questo esempio senza ambiguità.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100