They are apparently this panacea of elegant stateless code, but the developer is expected to know that multiple calls to useState must be made in the same order every time. Typically we associate APIs that are fragile to out-of-order calls with tightly coupled stateful systems.
Not to mention the hideous use APIs. Thanks you, React, for this array which apparently contains a state and a setter?
I think your first point gets to a tradeoff that isn't much discussed about hooks- they can be elegant and simple, but only assuming quite a bit of upfront knowledge about how they work.
It's almost like taking the verbosity of class lifecycle methods, and 'pre compiling' it into a form which is terser, yes, but that now only a sufficiently informed reader can grok - the lifecycle is still there, it just has to be modelled by the reader instead of by the code.
Sometimes this is a good tradeoff, but not always.
The developer isn't just "expected to know", because they'll get an error if they don't. React's debugger is really good at pointing out mistakes.
As someone who started off thinking hooks were too "magic" to be taken seriously, such concerns are a thing of the past.
If you just think of calls to useState as variable declarations, it makes zero sense that you'd ever want to call useState in a different order.
this -
let userName = 'bob';
let favouriteColour = 'purple';
is this
let [ userName, setUserName ] = useState('bob)';
let [ favouriteColour , setFavouriteColour ] = useState('purple)';
Hooks enable you to reason about the state your component is in in a way that class components couldn't.
Hooks felt extremely awkward to me at first, because it was forcing me to write code in ways that felt unnatural. Once I stopped fighting it, the benefits became apparent, and now the old way feels awkward.
I've seen this a lot, when is an example of a time when you would want to call hooks out of order? I can't think of a single time where this would be a good thing to do
Sometimes you would like to return out of a series of hooks calls early or throw to an error boundary. That also leads to conditional calls.
Example: you have a {data, error} = fetchData() and then a useEffect(..., [data]) or 3. It would be very handy if you could just throw the error before the useEffect because you already know it's going to be irrelevant.
So then you put everything after in a new component (because that can be rendered conditionally) or keep checking for errors throughout the effects code. Both are kind of meh.
I'm not sure if this could maybe even work, actually, because there are no real out of order calls, only incomplete calls? But rules of hooks say no, and I have gotten the "hooks called out of order" error for it.
let [ data, setData ] = useState();
useEffect(() => {
let result = fetchData();
if (result.error) {
//do something, or abort?
return;
}
setData(result.data);
}, []);
useEffect(() => {
if (!data) return;
//perform secondary chained action using the fetched data
let result = fetchMoreData(data.guid);
}, [ data ]);
I know this is controversial, but I find them hard to understand. When I call `useState()`, what's the identity of the state that I'm using? What ties the state together between subsequent invocations of my component? For example, I know that strange things happen if you conditionally invoke `useState()`. People like to talk about "functional components", but hooks seem to live and breathe on mysterious side effects that I don't understand.
If only there was some way to discover how things worked... Some website where you could type “how react hooks work” and get dozens of articles and blog posts explaining it.
