TOP 5 MISTAKES TO AVOID WHEN USING REACT

React has quickly become the most popular front-end framework in the tech world, used by big tech companies such as Facebook, Netflix, Airbnb, and many more. React developers are in high demand, and the demand continues to grow.

Today, we’ll explore the top 5 mistakes React developers make -- and how to fix them.

1. NOT CREATING ENOUGH COMPONENTS
A common mistake that React developers make is that they don’t create enough components. With React, you’re able to create large components that execute many tasks, but it’s better to keep components small, with one component corresponding to one function. Not only does it save you time, but it also helps you with debugging since you know which components are associated with any errors that may arise.

Let’s take a look at an example of the TodoList component:

2. MODIFYING THE STATE DIRECTLY
In React, state should be immutable. If you modify the state directly, it’ll cause performance issues that are difficult to fix.

Let’s look at an example:

You want to update the checked key of an object in an array based on the state of a checkbox, but you have a problem. React can’t observe and trigger re-rendering because the object is being changed with the same reference.

To fix this, you can either use the setState() method or the useState() hook. Either of these methods will ensure that your changes are acknowledged by React and your DOM is correctly re-rendered.

Let’s rewrite the previous example and use the useState() method.

Note: You could also use map() and spread syntax to avoid mutating other state values.

3. PASSING A NUMBER AS A STRING WHEN PASSING PROPS
Passing a number as a string when passing props can lead to issues in a React program.

Let’s start with an example:

In this example, the component expects the position as a prop and declares that the position should be a number. Since you’re making a strict comparison, anything that’s not a number or not exactly equal to 1 would trigger the second expression and print “last!”.

To fix this, you should insert curly brackets around the input like this:

4. NOT USING KEY ON A LISTING COMPONENT
Let’s say you need to render a list of items and your code looks something like this:

If you’re working with a smaller app, this could work. But when working with large lists, you’ll run into rendering problems when wanting to modify or delete an item from the list.

React tracks all of the list elements on the Document Object Model (DOM). React wouldn’t know what has changed in your list without this record.

To fix this, you need to add keys to all of your list elements. Keys give each element a unique identity, which helps React determine which items have been added, removed, modified, etc.

Here’s how to do this:

5. USING REDUX TOO MUCH
With bigger React apps, many developers use Redux to manage global state. While Redux is useful, you don’t need to use it to manage every state in your apps.

If you have an app that doesn’t have any parallel-level components that need to exchange information, you have no need to add an extra library to your project. It’s recommended to use a local state method or useState over Redux when you use a form component and want to check the state of a check button every time it’s accessed.

Now that we've covered the top five mistakes that React developers make, it's time to start working with React and apply the skills you learned here today. React developers are in high demand, so adding React to your skill set is a smart career investment.