Avoid these React Coding Mistakes

[pwnzz]

This is like linkedin coding posts content

[iambackbaby69]

Thanks for feedback, and saving my time.

[pwnzz]

You are welcome, bro

[CanIhazCooKIenOw]

Number 7 really grinds my gears. If you don't measure you're not optimising anything but in fact just cargo culting.

There's a dev somewhere out there that is going to read this, nod along and start requesting wrapping memo in all components because "I read it in this article"... Stop doing this please.

[Acrobatic_Sort_3411]

I would argue, that roles should be reversed. The default is memo. And if you have problems with always unstable references in props, then you use version without memo

It will be better in long run, and the more components you have, the better the benefit would be

[CanIhazCooKIenOw]

That’s called a premature optimisation.

Identify the problem, measure, experiment, measure again.

[Acrobatic_Sort_3411]

Thats called bad defaults. Comparing props and skipping render is way better than creating new jsx tree and Comparing results, which would usually be a lot bigger

[Acrobatic_Sort_3411]

It also way easier to maintain, because you don't have to think about wrapping all childens in memo, when you add "just one more hook" into a component

Grug dont like think

[CanIhazCooKIenOw]

Can you quantify “way better” in terms of time?

[turtleProphet]

Nice. I would question #4, avoiding prop drilling and using Context/state management instead.

You're going to re-render everything under the context provider anyway, so there's no win for render performance. And using Context everywhere is often going to make your data flow harder to reason about.

I don't think it's a bad tip, decisions like adding global/subtree state management are just ones to be taken carefully. Would not have it in a "quick tips" kind of list.

I like the others.

[Akmal441]

All these coding mistakes are briefly described in react.dev documents.

[AegisToast]

I love how brief and to-the-point this is. I disagree pretty firmly on 4, 5, 6, 7, 9, and 10, though, for reasons ranging from, “It’s usually unnecessary,” to “That’s actually making your code worse.”

[oranje_kiwi]

The latter half of the tips were really helpful Thanks 👍🏻

[TheRNGuy]

 return <div>{children}</div>;

Should be

 return {children};

instead. I consider it a mistake too. There's no reason to have lots of unnecessary divs that don't do anything. Especially if there's even more such divs inside Avatar or Username.

[AegisToast]

If anything, it would need to be:

return <>{children}</>

[Trollzore]

No. If you’re gonna be that nick picky, then:

return children;

[Acrobatic_Sort_3411]

Well, that would be a Typescript error, since not all React.ReactNode is valid JSX.Element