"Nieprawidłowa kolejność hooków" oznacza taki przypadek, gdy jeden z hooków nie jest używany za każdym razem?
const Error = () => {
const [value, setValue] = useState(false);
if (value) {
useEffect(() => {
console.log('...');
}, []);
}
return <button onClick={() => setValue(!value)}>Odśwież komponent</button>;
};
Oczywiście sposobem na naprawę błędu jest zrobienie warunku wewnątrz useEffect
, ale w bardziej skomplikowanych przypadkach możemy podzielić hooki na jeszcze mniejsze części. Wszystkie rzeczy, które nie potrzebują stanu można wynieść "wyżej" poza hook i w nim używać jedynie rzeczy, które są konieczne useState
, useEffect
, useReducer
itd
const customAction = (value) => {
// fragment kodu, który nie potrzebuje polegać na stanie Reacta
// i wystarczą mu zwykłe argumenty
}
const useMyHook = () => {
// fragment kodu wykorzystujący hooki i wywołujący powyższą funkcję w odpowiednim momencie
}
A jakbyś nie renderował całej aplikacji naraz, tylko np. poddrzewo? wtedy zobaczyłbyś, które poddrzewo całej aplikacji zgłasza ten błąd. Wtedy znowu sprawdzić podddrzewo poddrzewa itp.
Żeby wyizolować komponent albo chociaż poddrzewo, gdzie jest ten błąd.
Przy tym pomyśle można byłoby wykorzystać Reactowy "try / catch". Jest to taki specjalny komponent, który przechwytuje błędy z komponentów, które renderuje i w razie błędu pozwala jakoś na to zareagować np zmienić renderowane komponenty.