DEV Community

Shariq Ahmed
Shariq Ahmed

Posted on

Some Silly Mistakes That You Might Be Making in React in 2024

Image description

If you are a React developer, then at times I’m sure you might be making some silly mistakes. What’s even worse? You don’t even realize that those are actually mistakes.

Well, I got you. This happened to me as well. But if you are someone who’s just starting out in React, make sure you don’t make these mistakes. So, let’s get started.

1. Not Using Proper Key

In React, key is used to tell which item in the list is modified. It’s of paramount importance as well. But at times, in a rush developers forget to use the key. This will create problems later on. Make sure you avoid doing this by assigning unique keys to elements while you’re writing the code.

2. Incorrectly Using State in Functional Components

Functional components return React elements. We can also use state in functional components. But at times, developers mishandle these states. How to avoid this situation? Use useState. It will manage all the states correctly.

3. Re-rendering of Functional Components

One problem with functional components is that it re-renders whenever a state is changed. But at times, some components re-renders more than often. This can hurt your app’s speed as well as performance. You can prevent this by using React.memo or useMemo.

4. Forgetting Component Structure

Expert React developers break down their components in small pieces. This makes the codes readable as well as easy to use. But this is what beginner React developers often forget. So, as an expert React developer, beginners take my advice. Always break down your components into smaller pieces.

5. Asynchronous Operations

In case you want to fetch data from any API, you have to use async operations. But, at times due to varying reasons, errors do occur. Avoid this problem by using async/await in your code.

6. Unnecessarily Using State

In React, state is used as something that can store data and get modified overtime. Keyword: modify overtime. But some developers use state just to store data. Well, this isn’t wrong. But the problem is why are they not using other functions like useRef?

7. State Doesn’t Update Automatically

This is more common in beginners React developers than expert ones and that’s of assuming that your state variable automatically updates. Keep in mind that until and unless you render, your state variable won’t update.

Top comments (0)