DEV Community

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...

Read full post

Anthony Bouvier • Sep 12 '19

I'll add one more mistake:

Using React when you don't need it.

Nipuna Weerasekara • Sep 17 '19

You hurt my feelings 😆

Anthony Bouvier • Sep 17 '19

TechBos😎 • Sep 12 '19

Very true.

Alexander B.K. • Sep 17 '19

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.

Anthony Bouvier • Sep 17 '19

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.

Dillion Megida • Sep 18 '19

Could you list examples?

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

Alexander B.K. • Sep 18 '19

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.

Chris Watson • Sep 17 '19

zing

Francisco Vieira Souza • Sep 18 '19

And when would that be?

Victor Cordeiro Costa • Sep 16 '19 • 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

Alex K. • Sep 17 '19

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

Victor Cordeiro Costa • Sep 17 '19

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

Alex K. • Sep 17 '19

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

Ricardo Torrão • Sep 12 '19

Good article!

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

Heiker • Sep 12 '19

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.

Alex K. • Sep 12 '19

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 :)

Alex K. • Sep 17 '19

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 :)

Chris Achard • Sep 11 '19

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

I also like the last example with useMemo - thanks!

Alexander B.K. • Sep 17 '19

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.

Heiker • Sep 17 '19 • 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.

Logan Watson • Sep 12 '19

Nice article! Love learning stuff like this!

Hemal • Sep 17 '19 • Edited

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

Tori Pugh • Sep 12 '19

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

Hunter Chang • Sep 12 '19

Nice! I like the useEffect callback example with useState.

mudra • Sep 17 '19

Very nice article

Alexander B.K. • Sep 17 '19

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).

Kyle Griffin • Sep 12 '19

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.

Chris Hansen • Sep 4 '21

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