Two things about React will never stop being funny to me,
1. An entire generation of front end developers have staked their careers on a framework developed by Facebook. Facebook!
2. The hooks API. I honestly thought this was a joke when I first saw it. Developers will talk about the elegance of functional components then go and use the hooks API.
IMO there are far greater concerns with centralized API services, which are nearly always opaque, closed-source, and incentivized towards vendor lock-in (AWS being the elephant in the room).
"Staking careers" is also a little much; React isn't that hard to learn (it's near-trivial compared to .NET or iOS development), and any developer worth their salt will have to frequently retrain into new patterns and frameworks during their career.
There can be legitimate concerns with power concentrations of open-source software based on the incentives of its stewards (Chrome comes to mind); but ultimately React carries a relatively small footprint, and can always be forked [0] if it goes in a direction that developers don't like.
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.
1. An entire generation of front end developers have staked their careers on a framework developed by Facebook. Facebook!
2. The hooks API. I honestly thought this was a joke when I first saw it. Developers will talk about the elegance of functional components then go and use the hooks API.