DEV Community

Cover image for The most common mistakes when using React

The most common mistakes when using React

Alex K. on September 11, 2019

The article was originally posted on my personal blog. Answering React-related questions on Stack Overflow, I've noticed that there are a few main...
Collapse
 
thebouv profile image
Anthony Bouvier

I'll add one more mistake:

Using React when you don't need it.

Collapse
 
niweera profile image
Nipuna Weerasekara

You hurt my feelings 😆

Collapse
 
thebouv profile image
Anthony Bouvier

HUG!!!!

Collapse
 
techbos profile image
TechBos😎

Very true.

Collapse
 
lexiebkm profile image
Alexander B.K.

I am using it, and I am quite satisfied with the result. My app consists of a lot of modules. I handle myself both of the front end and back end.

Collapse
 
thebouv profile image
Anthony Bouvier

That's great. I'm not saying React isn't useful. I'm saying it is a tool and some people try to use it for every problem.

There are plenty of projects where React as a choice is simply over-engineering.

Thread Thread
 
dillionmegida profile image
Dillion Megida

Could you list examples?

I'm getting to think I'm involved here 😕

Thread Thread
 
lexiebkm profile image
Alexander B.K.

Because my app is a specific SPA, I choose React. As a learning developer, I don't want to write in vanilla JS for some reasons. Learning Angular takes longer time.
I am developing a KPI management system using Balanced Score Card methodology; it deals with massive usage of database (I use mySQL) from which data need to be displayed in a datagrid that must have features such as inline editing and row grouping. For that purpose I use ag-Grid and Tabulator. The app is supposed to be able to display dashboard that contains data visualizations as well as standard reporting (pdf and possibly excel format as well).
So, scalability is my concern since I began to think about using JS framework.

Collapse
 
c24w profile image
Chris Watson

zing

Collapse
 
franzisk profile image
Francisco Vieira Souza

And when would that be?

Collapse
 
victorcorcos profile image
Victor Cordeiro Costa • Edited

I found an error on the second code snipped. You passed the idx as a parameter, but you used the id instead.

The corrected code...

    const updateFeaturesList = (e, id) => {
      const { checked } = e.target;
      setListFeatures(features => {
        return features.map((feature, index) => {
          if (id === index) {
            feature = { ...feature, checked };
          }
          return feature;
        });
      });
    };

It is just a minor thing, though

Collapse
 
clarity89 profile image
Alex K.

A sharp eyed reader! :) Thank you, I'll fix it :)

Collapse
 
victorcorcos profile image
Victor Cordeiro Costa

Hehehe, thank you!
By the way, Great post!!
I am learning React from scratch right now and this was in particular useful! <3

Thread Thread
 
clarity89 profile image
Alex K.

Thank you and good luck! :) Be sure to also check the official documentation, it has more details about the points I mentioned.

Collapse
 
torrao profile image
Ricardo Torrão

Good article!

Just a reminder...React is a library and not a framework 😊

Collapse
 
vonheikemen profile image
Heiker

I think React is no longer just a library for the view layer. Their scope has a stronger focus on state and side effects, and now with hooks in the picture there is now a "React way" of doing things.

Collapse
 
clarity89 profile image
Alex K.

Ah, semantics... I use those terms interchangeably, but I guess in this case it's good to stick to the official description. I'll update the post :)

Collapse
 
clarity89 profile image
Alex K.

Thanks for the feedback :) My point was more about keeping state and it's usage consistent, e.g. do not declare something as an array and access it as an object. But for small cases like having a name defined on a user object, it sometimes does make sense imo. What I did not mean is to have the whole complex state structure set out in the initial state. In that case it's better to use thorough validations when accessing it or delaying accessing the state until all the data is loaded. Should have probably made it more clear in the article :)

Collapse
 
chrisachard profile image
Chris Achard

Nice list! Using the functional form of setState is the one that I always forget 🤪

I also like the last example with useMemo - thanks!

Collapse
 
lexiebkm profile image
Alexander B.K.

Point 1, 3 and 4 are already covered in the Documentation. I only know a little about Hooks, so I skip point 5 and 6 until I finish learning them through the doc before using them in a real project. So far, most of components I create in my current project are class based. Maybe in next projects I will consider using Hooks when appropriate.
There are actually a lot of things I need to master regarding React : Hooks, Redux (especially for global state management) and Webpack; not to mention other technologies for front end and back end. Unfortunately for some reasons I couldn't learn them regularly.

 
vonheikemen profile image
Heiker • Edited

You can't really do shit with React without a page to mount it.

Do you mean it's not a framework because you need ReactDOM to mount it in the DOM?

I could think of more reasons why React is not a framework but that is not one.

Collapse
 
lwatson2 profile image
Logan Watson

Nice article! Love learning stuff like this!

Collapse
 
hemalr profile image
Hemal • Edited

Awesome article, a few gotchas I didn't know of. The useMemo one especially 👍

Collapse
 
teekatwo profile image
Tori Pugh

Great article! I think you've answered one of my questions with useEffect not working. I need to do more research on useMemo now.

Collapse
 
changoman profile image
Hunter Chang

Nice! I like the useEffect callback example with useState.

Collapse
 
mudras profile image
mudra

Very nice article

Collapse
 
lexiebkm profile image
Alexander B.K.

I think there is also one important topic you can discuss :
Controlled vs Uncontrolled component.
In real practices, we have to decide which one we want to use (consistently).

Collapse
 
kylefilegriffin profile image
Kyle Griffin

Some very helpful tips. Some are pretty obvious but as a learning developer, I'm seeing best practice for general javascript here too, which is good.

Collapse
 
hyggedev profile image
Chris Hansen

Thankful for this. You basically cleared up how useMemo() works for me. 💯