DEV Community

Five common mistakes writing react components (with hooks) in 2020

Lorenz Weiß on May 25, 2020

This post was originally posted here React as a framework React has been out in the world of web development for quite some time now an...

Read full post

marcin93 • May 25 '20 • Edited

Great tips, thank you. :) When comes to using useRef hook to store variable value between rerenders, I prefer just keep variable out of the component's scope. For me it's more clear and clean.

let variable = 'Hello';

const Component = () => {
  return <span>{variable}</span>
};

Ruben Meseguer • May 25 '20

Is there any downside to doing it this way? Looks clean :)

marcin93 • May 25 '20 • Edited

I use this regularly and I've never faced problems. :) I treat this a little like a "class property in functional components".

But of course there are cases where this approach can not work properly. It's depend from an individual case.

Valerii Diachenko • May 26 '20

If there are several components, for example, several counters on a page, the disadvantage is that several components will refer to one variable. In the case of useRef, each component will have its own instance of this variable.

Lorenz Weiß • May 26 '20

That's true ! 🤔 So storing it outside the component can actually be quite dangerous.
Thank you for that ! :)

marcin93 • May 26 '20 • Edited

Yes, that's the case, Valerii. When component has a few instances some problems can occur. But when we use this approach in a single-instance component like page view for example, everything should be fine.

Andrew Slobodianiuk • May 26 '20

Thank you for the great article! Could you please clarify, is it valid to wrap 'button' into HTML tag 'a' ? As I know HTML validator will show an error. Maybe if we want to add a link element that looks like a button we should customize 'a' tag?

Pablo Berganza • May 27 '20

Ideally yes. You'd have to style the anchor tag to look like a button. It's considered bad practice to have an interactive element inside of another (a.k.a button inside an anchor, anchor inside another anchor, etc).

Julian Mojico • Aug 11 '21

Brief, good explanation, beautiful writing and great selection of the common mistakes.

Also liked your final conclusion:
"But making mistakes is also important when learning a framework or programming language and probably nobody is 100% free of these mistakes."

Thanks for sharing.

Lukas Klinzing • May 26 '20

Problem with 3 is that it will setstate even though the component might be unmounted already. So you need to handle unsubscriptions. But that you have to do anyways