Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

logoAsync

The latest news in the world of engineering.

Identity and Access Management (IAM), including security and customer experience.

Visit Blog

Grow your business to millions.Engage and retain your customers.

Visit Blog

32 React Best Practices That Every Programmer Should Follow

Important React best practices every React developer should follow before, during, & after writing the code. To ensure code maintainability, keep these React coding best practices handy.

Anjali Rohira
Anjali Rohira
October 26, 2021
6 min read

Free, Secure and Trusted Way to Authenticate Your Visitors

Add login to your website in 5 minutes completely for free!

Free Sign UpNo hidden costs. No credit card needed.

Why Follow React Coding Best Practices?

Writing code to create apps isn't just enough; the code should be as clean and maintainable as your app. Before jumping into the good practices to follow, it's essential to realize the reasons behind the same. It becomes crucial for you to understand coding conventions because of the following reasons:

  1. As a developer, you shall understand that writing code to build apps is not enough, but the code should also be Reliable, Scalable, and Maintainable. Generally, 40% - 80% of the total cost of software is spent on its maintenance.
  2. Readability is the priority. Any software is seldom fully supported by one single developer; There is a whole team or group of people working on it. Furthermore, new developers always join the project team. Thus, maintaining coding standards improves the product's readability that lets developers easily understand the codebase even faster.
  3. Like any product, the software must be well-packaged and clean. Following best coding practices helps you write clean code throughout the codebase by ensuring consistency.

Starting with React Best Practices

Code Structure

There's basically no defined structure, but you should have a style to follow throughout the codebase. Thus, this section explains how you can structure your codebase for medium to large-sized apps.

  1. Put all your imports in order at the very top of the code file. You shall ideally prioritize as follows:

    React imports <> Library imports <> import * as <> import ./<some file>

    Make sure all your imports statements are on new lines, as this will make your imports clean and easy to understand for all the components, third-party libraries, etc.

  2. Use index.js for each folder to export so that all the imports are referenced on the index.js file, and you don't have to write import statements again and again for every file.
  3. It's easy to get confused about whether to use double quotes (" ") or single quotes (' ') while working with React. The simple answer is: maintain consistency whatever you're using.

    Also, consider that you use double quotes (" ") for JSX attributes and single quotes (' ') for the JS code (Follow the standard way or maintain consistency).

  4. Most of the time, beginners merge two-three components inside a single file and play around with that. However, that's not a good practice to follow. Dividing the whole app into components and then working on it on a separate file is a good practice to maintain clean code.
  5. Do you sometimes use CSS styles with JSX? But it's a bad practice. Always make classNames for each element and put all the styling under respective CSS files only.

Naming Conventions

  1. Your filenames should always have consistent casing and extension. Either use .js or .jsx as explained in code structure for extensions. And PascalCase or camelCase for filenames.
  2. In React, name your file the same as the React component inside that file i.e. without a hyphen in the filename. For example: Registration-Form → ❌. RegistrationForm → ✔️.
  3. Not only filename but also make sure that your variables/functions/modules filenames are consistent with cases.
  4. Use well-descriptive names for variables/functions/modules/Actions, keeping in mind that it is application-specific so that even a third party or new developer can easily understand you code.
  5. It's bad to use the underscore prefix ( _ ) for a React component's internal methods because underscore prefixes seem to be used as a convention in other languages to denote private objects or variables. But everything in JavaScript is public. And there is no native support for privacy. So, even if you add underscore prefixes to your properties, It'll not make them private. _onClickSubmit() → ❌
  6. When making reducer functions, write Action types as domain/eventNames. For example: ADD_TODO and INCREMENT (in CAPITALS) as this matches the typical conventions in most programming languges for declaring the constant values.
  7. Talking about cases in a React component, use PascalCase for the same — and for their instances, use camelCase. For example:-
const loginForm = <LoginForm />;
import LoginForm from './loginForm';

Files and Folders

  1. Your app's directory structure shall be as follows:
└── /src
  ├── /assets - Contains static assets such as  images, svgs, company logo etc.
  ├── /components - reusable components like navigation bar, buttons, forms
  ├── /services - JavaSript modules
  ├── /store - redux store
  ├── /utils - utilities, helpers, constants.
  ├── /views/pages - majority of the app pages would be here
  ├── index.js
  └── App.js
  1. Each component folder should have its respective files grouped under the same. It maintains the hierarchy throughout the codebase. The necessary files include: Component.js, Component.css, Component.test.js

Code

  1. Play the game of HOOKS by following all its rules. You can read more about the rules here. Either manually follow these rules or use an ESLint plugin called eslint-plugin-react-hooks which enforces these rules. So, add these rules while working on any project
  2. Remove console. logs — unless you have strong motivation why you would like it.
  3. Avoid multiple if-else blocks. Instead, use ternary — best for clean code practice
  4. Remove all commented-out codes. The biggest motivation for writing comments is the bad code that you write. It would be good to spend more time writing descriptive functions, methods, and filenames that are self-explanatory.
  5. Write Tests for each component. It's a good practice to write test cases for each component developed as it reduces the chances of getting errors when deployed. You can check all the possible scenarios through unit testing — and for that, some of the most commonly used React test frameworks you can use are JEST and ENZYMES.

Good Commenting Practices

  1. Use comments to explain why you did something, not how you did it. If you find yourself explaining how you did something, then it's time to make your code self-explanatory.
  2. Another point is not to write comments that are obvious and redundant — for example:
// Prints out the sum of two numbers
console.log(sum);
  1. Write comments that are legal, informative, explanatory of intent, and offer clarification,

ES6

  1. Always destructure your props. Destructuring your props helps make your code cleaner and more maintainable. It also makes assigning object properties to variables feels like much less of a chore.
  2. Know where to use spread/rest operators. You shall read about it before actually using it.
  3. Try using optional chaining if possible.
  4. Use const instead of var or let . const lets you check that a variable should always stay constant. let indicates that the values of the variables can be changed.
  5. Start preferring arrow functions (= >) for more cleaner code. Arrow functions allow simplifying your code to a single line.

Basics

  1. Always ensure that your app is responsive.
  2. Your app should contain a proper README.md file that clearly details or explains your app. Clearly mention the features, functionalities, contributions guidelines, installation process, guide, etc.
  3. Do check that your app runs without any errors.
  4. Use EsLint throughout your codebase and other automation tools so that most of the best practices are maintained automatically for you.
  5. Consolidate duplicate code throughout the codebase.

Please note that I haven't talked about automation extension and tools that can help you maintain most of the best practices easily without looking into separately. But, I wanted to bring this into consideration. Anyhow, you can use extensions like prettier, EsLint, EditorConfig, PLOP etc., to maintain your codebase efficiently.

These are the best practices that I've learned practically over time by working in a team, reviewing my mates' codebase, observing open-source projects and repositories, and reading great resources, such as the offical React docs.

Conclusion

I hope you gained valuable insights. If you have more suggestions or practices that the React or dev community can follow, please to let us know.

Until next time, keep learning, build awesome stuff, and uplift the community.

By the way, if you want to add user registration and authentication to your React apps, you can use LoginRadius. It helps you become more efficient and focus more on the core business features of your React apps.



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptReactAuthenticationNodeJsCSSSecurityC#JWTOAuth

Do you want a free authentication solution?

Add the world's most secure, reliable and easy to implement user authentication solution on your applications at $0Get Started Free

Anjali Rohira

Anjali Rohira

She is a freelance full-stack developer and a UI/UX designer. She likes to explore and contribute to open source projects. She is also a technical writer and speaks at tech conferences and meetups. When she is not coding or designing, she enthusiastically discusses startup ideas that can make a positive impact.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces