in ,

12 Silly Mistakes Every React Developers Make

React Developer

Introduction

The most popular front-end framework React is widely used and loved by developers all across the world. But even the most experienced developer is prone to make errors. Some errors make us feel embarrassed about ourselves.

Maybe it happens by mistake, overlooking, lack of experience, or deadline pressure, every React developer working with firms delivering custom software development services have a story to tell when it comes to committing silly mistakes.

In this blog, we will take about those silly mistakes and a way around them.

Below are 12 Silly Mistakes made by React Developers –

1. Inadequate components (educative)

React is a very lightweight framework designed to function as a component-based architecture. As such, you are taking a step back in component creation is one of the silliest mistakes one can make. React encourages developers to create small components as it’s more specific to a single task. Rather than creating complex monolithic components, creating smaller components helps debug since you are well aware of the components and their particular tasks.

2. Modifying state directly

The state in React needs to be immutable. Trying to modify the state directly is known to cause hard-to-fix performance issues. The correct way to change your state is by leveraging the setState() method or using the useState() React hook. Using either of the two will ensure that your DOM is correctly re-rendered using React. One may also use map() with JavaScript’s spread syntax to avoid mutating other state values.

3. Not using absolute paths.

While importing dependencies like components, images, CSS, etc., importing it from different directories is tedious. Also, it is prone to errors. The moment you decide to change the file directory, the import will fail! The ideal way of dealing with this is to use absolute import paths. This is easily done by creating a jsconfig.json file in the root directory as follows

// jsconfig.json
{
“compilerOptions”: {
“baseUrl”: “src”
},
“include”: [“src”]
}

This will allow you to import files like

import React from ‘react’;
import { LINKS } from ‘helpers/constants’;
import Button from ‘components/Button/Button’;

4. Using class instead of className

Probably the most commonly encountered silly mistake amongst React developers is when they name their React element. Beginners tend to use “class” instead of “className” when calling their element. Using the former in React will give you errors to deal with. As React is so much similar to vanilla JavaScript, such notorious mistakes are inevitable. However, one needs to know that the keyword “class” is reserved by JavaScript and JSX. That’s why React forces developers to use className. A fundamental but crucial point to remember, isn’t it?

5. Using Redux too much

Sure, Redux has its perks while managing global states in larger applications. But just because of that, one shouldn’t throw Redux too much to manage every state in the application. Using Redux for state changes will make your code bulky by adding unnecessary code snippets. UsingRedux is recommended for applications having parallel-level components. For everything else, using setState() or useState() will get the job done easily.

6. Not following proper folder structure.

While designing a React application, the sections must be divided into separate components. The correct way of building a page using React is to create individual components and then integrate them to get the desired result. Not doing so can make the code way more complex, chunky, and hard to debug. The component approach also helps in reducing the development time of the application as more and more developers can join forces together to bring the application to life.

7. Calling Hooks from Class Components

React introduced React Hooks from version 16.8.0. Developers can leverage hooks to make coding easier like

useParams hook – to access URL parameters during React Routing

useHistory hook – to access API history

useRef hook – to get access to DOM element

But these hooks work only inside functional components. One can’t leverage hooks from inside a class-based component. As a result, developers often make mistakes and use hooks inside class components, and get compilation errors.

8. Forgetting to use key props when using the Array map method

The array map method in React is used to display a list of items stored in an array. As such, we can render the map method like this.

const lists = [‘obj1’, ‘obj2’, ‘obj3’];

render() {
return (
<ul>
{lists.map(item =>
<li>{item}</li>)}
</ul>
);
}

But novice React developers try to implement the same logic for larger applications only to be greeted by render issues. This happens because React has to keep track of individual elements on the DOM. So one needs to introduce key props to help React with identifying which elements are being modified or deleted inside an array. The right approach of using the map method is as follows.

const lists = [‘obj1’, ‘obj2’, ‘obj3’];

render() {
return (
<ul>
{lists.map(item =>
<li key={item}>{item}</li>)}
</ul>
);
}

9.  Applying business logic in Reusable components

Components in React can be divided into two subdomains, namely – Presentation components and Container components. While the presentation components are associated with the look of the application, container components serve as their logical counterpart. Novice developers often tend to mix the presentation component with app logic. Doing so makes it difficult to reuse the presentational components without copy/pasting.

10. Not writing unit tests.

More than a mistake, this point can be counted as an “often ignored” aspect of React programming. Unit testing is often overlooked by developers as the application still performs as expected without unit testing. But writing unit test cases double ensures that the application’s functionality works as desired. Writing a unit test can also save much of your time on pointing errors across your application.

11. Forgetting to capitalize the first letter of your component

While coding, it is easy to forget the naming convention of the framework. For example, every component in React must start with a capital letter. Otherwise, the browser will throw a rendering error. This happens because the browser treats the component as a built-in element. Therefore, it is advised to capitalize the first letter of your React component to avoid such unpleasant errors.

12. Not using React or Redux dev tools.

No application is bug-free. After a while, every application will encounter bugs that need to be fixed. Dev tools can assist you with this tedious task. React dev tools are incredibly powerful tools that can be used to inspect rendered React elements. Redux tool also comes feature-packed like viewing state changes, let you witness every actionable change, etc. Professional React developers tend to maximize their efficiency by constantly using dev tools.

Conclusion

We all learn from the mistakes that we commit. In this blog, we talked about the common mistakes React developers tend to make while coding. On that note, let us know which one of the following is the silliest mistake that you have committed.

Author Bio –

Hardik Shah is a Tech Consultant at Simform, a leading custom software development company. He leads large scale mobility programs that cover platforms, solutions, governance, standardization, and best practices. Connect with him to discuss the best practices of software methodologies @hsshah_

Report

What do you think?

Written by Abhishek Chauhan

Leave a Reply

Your email address will not be published. Required fields are marked *

Wireless is the Future! Why it's Perfect for Every Company

Office 365 to Office 365 Migration Guide