Common mistakes writing React components with hooks
lorenzweiss.de
Common mistakes writing React components with hooks
1–10 of 98 posts
Re: Common mistakes writing React components with hooks
#2Sometimes the "don't do this" tells me more than "here's an example". Examples are great for doing the thing, but often there's reasons inside them that aren't apparent until ... you do something else.
Re: Common mistakes writing React components with hooks
#3Most of these aren’t mistakes with hooks specifically. They are just general mistakes (apply equally well to non-hooks React).
Re: Common mistakes writing React components with hooks
#4Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular
Re: Common mistakes writing React components with hooks
#5> useEffect(() => {
> fetchData();
> updateBreadcrumbs();
> }, [location.pathname]);
> There are two use cases, the "data-fetching" and "displaying breadcrumbs". Both are updated with an useEffect hook. This single useEffect hooks will run when the fetchData and updateBreadcrumbs functions or the location changes.
Is this right? Wouldn't they only update when `location.pathname` changes? Also, there should be a whole discussion on `useCallback` which is not used here and it can be quite important, plus linters would complain of missing dependencies for the useEffect.
Re: Common mistakes writing React components with hooks
#6Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular
Wikipedia says it's both https://en.wikipedia.org/wiki/React_(web_framework)
Re: Common mistakes writing React components with hooks
#7Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular
I think this is an important nitpick though in your defence. I have just started learning React having become pretty competent with Angular (day job plus some hybrid apps) and I have to say that I'm struggling to understand its popularity compared to Angular.
Angular feels fully fleshed out, adheres to MVC mostly and has nice separation of html, css and the UI TS code. I come from a native coding background so this feels logical and I can jump into a new project and get my bearings pretty quickly.
React on the other hand seems to be jQuery gone mad with CSS, JS and pseudo HTML all mixed together. Ternary statements in JSX is awful to look at.
To me it seems React is solely there to solve the V in MVC and then with a host of additional libraries (of the users choice) some kind of MVC system can be cobbled together if needs be.
I'm not saying React is bad, clearly it is very popular and has it's great use cases, but I don't think it's Angular vs React.
Re: Common mistakes writing React components with hooks
#8I would argue that writing a React component with a hook is a mistake. There is usually an easier/clearer way to solve the problems that hooks are intended to solve with the existing React primitives.
Re: Common mistakes writing React components with hooks
#9I would argue that writing a React component with a hook is a mistake. There is usually an easier/clearer way to solve the problems that hooks are intended to solve with the existing React primitives.
Can you explain what you mean by that? I'm honestly a little lost on what you're saying but I am curious.
Re: Common mistakes writing React components with hooks
#10Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular
I think this is an important nitpick though in your defence. I have just started learning React having become pretty competent with Angular (day job plus some hybrid apps) and I have to say that I'm struggling to understand its popularity compared to Angular. Angular feels fully fleshed out, adheres to MVC mostly and has nice separation of html, css and the UI TS code. I come from a native coding background so this f…
To me, the killer feature of React is how easy it is to mix with standard "vanilla" JS libraries. The "React" version of a library is usually a fairly trivial wrapper around the "normal" version. In contrast, integrating with Angular is a lot more involved and is in effect its own ecosystem.
The other thing I can't stand about Angular is that it puts its proprietary templating language "in control" of components. Which means if you want to do something more complicated that isn't implemented in the templating language, then you just can't (or you end up fighting the framework). With React, it's as if the equivalent of Angular's controllers (components? - it's been a while since I used Angular) were in control. The templating is only for templating.
FWIW, I agree on the ternary operator issue. Although IMO this is actually a deficiency in JavaScript rather than in React/JSX: If if-else and switch in JavaScript were expressions then this problem would disappear completely.