DEV Community

loading...
Cover image for Top 10 mistakes to avoid when using React
Educative

Top 10 mistakes to avoid when using React

Erin Schaffer
Technical Content Marketing Specialist for Educative, Inc. (she/her)
Originally published at educative.io ・6 min read

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 10 mistakes React developers make -- and how to fix them.

We’ll cover:

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:

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
    <div>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

export default TodoList;
Enter fullscreen mode Exit fullscreen mode

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:

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petsList);
};
Enter fullscreen mode Exit fullscreen mode

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.

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};
Enter fullscreen mode Exit fullscreen mode

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:

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

const element = <Arrival position={1} />;
Enter fullscreen mode Exit fullscreen mode

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:

const lists = ['cat', 'dog', 'fish’];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

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:

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>
Enter fullscreen mode Exit fullscreen mode

5. Forgetting that setState is asynchronous

It’s easy to forget that the state in React is asynchronous. It’s something that even the most seasoned React developers forget.

Being asynchronous means that any modifications you make don’t take effect immediately (and may take effect on the next render). React automatically batches update calls to improve performance. If you access a state value right after setting it, you might not get the most accurate result.

Let’s look at an example:

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};
Enter fullscreen mode Exit fullscreen mode

You can fix this by giving an optional second parameter to setState(), which will act as a callback function. The callback function will be called right after you update the state with your change.

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};
Enter fullscreen mode Exit fullscreen mode

Note: The same thing is true for useState(), except they don’t have a similar callback argument to setState(). Instead, you would use the useEffect() hook to get the same result.

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

7. Creating and using God components

God components are monolithic and not reusable. They’re referred to as an “anti-pattern” in React. You shouldn’t build an entire page with all of your UI elements crammed into one component.
You should instead take the time to outline the different interconnected parts of your app and make them into their own components. When you separate components this way, all parts of your app are easier to maintain and restructure when needed.

8. Not following the ReactJS folder structure

The projects you create aren’t just made for current development. They most likely will need to be maintained or manipulated in the future. Folder structure is very important when considering future possibilities for a project.

Let’s take a look at a standard folder structure followed by the ReactJS community:

Alt Text

When navigating into any existing projects, it’s useful to have separate places for containers, assets, and components. It’s also useful to follow naming conventions to help with readability and organization. This helps you easily identify the purpose of any code written in your projects.

9. Sending props as strings (instead of numbers)

React developers with experience writing a lot of HTML find it natural to write something like this:

<MyComponent value=”4” />
Enter fullscreen mode Exit fullscreen mode

This value prop will actually be sent to MyComponent as a string. If you do need it as a number, you can fix this issue by using something like the parseInt() function or inserting curly brackets instead of quotation marks.

<MyComponent value={4} />
Enter fullscreen mode Exit fullscreen mode

10. Forgetting to start a component name with a capital letter

Forgetting to start component names with capital letters is a small mistake that’s very easy to make. In JSX, a component that begins with a lowercase letter compiles down to an HTML element.

Let’s say you wrote something like this:

class demoComponentName extends React.Component {
}
Enter fullscreen mode Exit fullscreen mode

This will cause an error that tells you that if you meant to render a React component, you need to start its name with an uppercase letter.

This mistake has an easy fix, which is starting component names with capital letters like this:

class DemoComponentName extends React.Component {
}
Enter fullscreen mode Exit fullscreen mode

What to learn next

Now that we’ve explored the top ten mistakes React developers make, it’s time to start working with React and applying the skills you learned here today. React developers are in high demand, so adding React to your skillset is a wise career investment.

Some recommended concepts to work with next are:

  • Libraries in React
  • Initializing Firebase in React
  • App development with Global State in React
  • Etc.

To get hands-on experience with these concepts and more, check out Educative’s learning path, React for Front-End Developers. This learning path is perfect for you if you already have experience working with JavaScript and are ready to add React to your skillset. You’ll cover everything from the fundamentals of React to making use of design patterns when creating apps in React, all with in-browser coding exercises.

Happy learning!

Continue reading about React

Discussion (6)

Collapse
larsejaas profile image
LarsEjaas • Edited

You might argue that using Class components could be no. 11. Of course there are edge cases, but I personally consider them obsolete in 2021...

Collapse
manikbajaj profile image
Manik

I agree with this, I was thinking of it after seeing examples of class based components and bang I see your comment 👍

Collapse
larsejaas profile image
LarsEjaas

Well, I wasn't trying to offend anyone but I genuinely think we should stick to functional components going forward. However, I am sure a lot of developers maintain projects with lots of class components where it just decided not to refactor..

Collapse
bigbott profile image
bigbott

How to avoid mistakes in React? - Don't use React.

Collapse
santosh3700 profile image
Santosh Devnath

There is no best alternative to React. So I think react is best till now for creating web apps

Collapse
bigbott profile image
bigbott

React is the best solution if you have to build inner enterprise app with limited numbers of users and you have team of 20 developers who knows nothing but react.

React is not a best solution in any other case.

Forem Open with the Forem app