ReactJS: A Brief Introduction

ReactJS, is basically an open-source javascript library developed by Facebook, mainly used for building user-interfaces, and, especially, single-page applications.

Used by thousands of companies and projects globally, ReactJS is one of the most popular libraries for building webapps.

And today, in this blog post, we are going to deep-dive into some of the ReactJS best practices you can implement as a developer, not only increasing your efficiency, but improving the performance of your app as well.

Knowing how to code is essential, but knowing what to code is another skill set, and doing it in the best way possible is what makes you stand out as a developer.

We at Infrasity specialize in crafting organic tech content that drives ~12 % increase in traffic and developer sign-ups. Along with organic tech content, we help Y Combinator startups with Go-To-Marketing strategies for companies in infrastructure management, API, DevX, and Dev Tools space. We’ve helped some of the world’s fastest-growing infrastructure startups through our expertise in technical writing.

Our content, tailored for developers and infrastructure engineers, is strategically distributed across platforms like Dev.to, Medium, and Stack Overflow, ensuring maximum reach.

We create content and (Go-To-Marketing)GTM strategies for companies in infrastructure management, API, DevX, and Dev Tools. Our expertise in technical writing has helped some of the world’s fastest-growing infrastructure and Y Combinator startups.

In this article brought to you by Infrasity, you’ll learn everything about ReactJS Best Practices, how to assess if a code follows the best practices, which, if not followed, will hinder productivity, increase debugging time, the benefits of following best practices, and how to make it a habit.

Without any further ado, let’s get right into it!

Prerequisites to learn React

If you want to learn ReactJS, having a good grasp over Javascript is crucial. There are few topics that you don’t want to neglect, let’s layout a list of topics (javascript) that are essential to learn React:

• Map, filter, and reduce array methods
• Functions
• Classes
• Data structures like arrays
• Promises, async/await
• DOM (document object model)]
• Dot (.) operator
• Closures
• arrow functions
• spread (…) operator
• template literals

One of the main benefits of using React is the features like virtual DOM, component-based architecture, and it’s declarative syntax. React's applications include the development of SPAs (single-page applications), web apps, PWAs (progressive web apps), and more. There are various challenges that you, as a React developer may face during the development of webapp, which include state management, performance optimization, code structure management and many more.

Today, we are going to learn about some of the best practices that are key to optimizing your React code, as well as the performance of your app. Understanding ReactJS patterns is important to follow the best practices effectively.

ReactJS: Best practices 🔑

We have discussed about what React is, it’s applications, and why should a developer implement best practices while writing react code.
Using best practices in React development ensures the maintainability, scalability, and performance of the codebase. Also promoting code readability and understandability, which, as a result, reduces bugs and errors.

As far as best practices are concerned, we at Infrasity keep in mind all the best practices of writing code, inculcating all features of ReactJS effectively, using Linting tools, well-formatted code, making sure that comments are excluded when committing the code, and only necessary comments make it to the commits.

Infrasity has made a lot of demo recipe libraries to assist Devzero, one of our customers, in creating recipe libraries, which helped them in quick developer onboarding.

The recipe libraries created were a combination of different tech stacks, like NodeJs, BunJS, React, and CockroachDB, so that the end users could directly use them as boilerplate code without writing the entire code from scratch. All the code written by developers at Infrasity incorporated clean code principles, making the codebase robust.

Below is an outline of all the ReactJS best practices that we are going to discuss in this blog post:

1. Folder structure management
2. State management
3. React router for multi-page applications
4. Lazy loading
5. Reusable components
6. Using React Hooks effectively
7. Staying updated with new React features.

Let’s get straight into it and discuss each practice one by one!

1. Folder Structure management:

A well maintained, and organized folder structure can help you, as well as other developers working together, understand the codebase better, identify various resources used in the project, etc.
This will not only help in scalability, but also with easy navigation throughout the various components.

You can break down functionalities into smaller, reusable modules to keep your codebase clean and organized.

Check the below code snippet for an example:

Another good practice involves grouping similar components (functionalities) in the same folder. Check the below folder structure, where I have grouped the components under the crowdfunding section in a single file:

All of these components should be included in the same folder as they convey similar usage (buttons, forms, campaign details etc).

2. State management:

With the development of a webapp, and it’s increasing complexity, basically the size, managing various states and the direction your data flows should be well organized and have a plan. There are several things to keep in mind when managing states in ReactJS, let’s learn about few techniques by which your webapp would become more efficient!

• Keep your state as local as possible: Use local component state for UI-related states and keep it as close to where it is going to be used as possible to minimize the complex nature.

• Use context wherever possible: For application-wide state that needs to be accessed by many components, use the Context API to avoid prop drilling.
  Here’s where to learn more about the context API
  

• Limiting component creation: As much as react promotes creation of components for various functionalities, we have to limit this practice as it makes the state flow even more complicated.

Example: If an app has 3 child components, LoginPage, HomePage, and featureSection page, its best to include the feature section inside HomePage itself, instead of creating a completely different component.

This practice is more subjective, and will take repetition to perfect.

3. Lazy Loading

As the name suggests, lazy loading is a feature in React that delays the loading of components until they are needed, which helps to improve the initial load time of an application by reducing the amount of code that needs to be loaded upfront.

This is especially useful when your codebase is complex, and as it grows, this is a must-have in your React application.
It can be implemented simply by using the snippet React.lazy() when importing a component from another folder.

But how does this even work?

There are 3 high-level steps that are involved in Lazy Loading:

1. Code Splitting: When you use React.lazy, Webpack (or another bundler) splits your code into smaller chunks. Each chunk corresponds to a different part of your application.
2. Dynamic Import: The actual code for the lazy-loaded component is only fetched when the component is about to be rendered. This reduces the amount of code that needs to be loaded initially.
3. Suspense: While the code for the lazy-loaded component is being fetched, the suspense component displays a fallback UI.

Check out the below example for a more detailed code implementation.

4. Re-usable components

These are fundamentals in React if you want to develop scalable and maintainable applications.
Developing re-usable components promote code reusability, reduce redundancy, and enhance consistency across the application.

Here are 2 simple examples of isolating components:

The below component only includes a button, which can be re-used various times for other pages, and sections as well.

Another example includes having props in your component which makes it customizable according to your needs:

Also, we can use the single responsibility principle, which simply means creating a component dedicated to a single functionality that doesn’t contain multiple use-cases. It simply states that a component should have only one reason to change, meaning it should have only one job or responsibility.

5. Using React Hooks

Hooks in ReactJS are nothing but functions that help us manage our application, trigger conditional operations, and build a more efficient application.

In React 16.8, hooks provide a more direct API to manage component logic and state without the need for class components.
You can implement hooks to manage the aftereffects of a function, which generally happen after a state is altered. Let’s take a look at 2 of the most common hooks available in ReactJS.

1.useState:

It is nothing but an array of two elements, it helps us manage the values of a particular function, or a variable.
useState returns an array with two elements: the current state and a function to update that state. You can use array destructuring to assign these values to variables.

You can see in the below example of how we are creating a state for a variable ‘count’, and incrementing it every time the button is clicked.

2.useEffect:

useEffect is a Hook that allows you to perform side effects in function components.

useEffect takes two arguments:

1. A function that contains the side effect logic.
2. An optional array of dependencies.

Below is a simple example where we are displaying error if the data from API is not fetched, and setting the data as the result if otherwise.

6. Staying updated with React versions

Staying updated with React version changes will prove beneficial when optimizing your code and webapp.
You will also get informed about the best ways to improve performance and efficiency as well. But how can you, as a developer stay updated with these changes and updates? Well there are certain ways to do so, which include:

Following Official React Channels

1. React Blog: Regularly check the official React blog for announcements, release notes, and detailed posts about new features.

2. React Newsletter: Subscribe to newsletters like React Newsletter for weekly updates on React and its ecosystem.

3. Social media: You can follow the official pages on X or stay tuned with the official docs and blogs of ReactJS.

FAQs

What is the best way to learn more about React?
The best way to learn React and write efficient code is simply to practice more and more every day. Sooner or later, you will get used to writing good, readable, and efficient code as a default.

Why should we follow best practices?
The main reason to keep these practices in mind is to optimize the performance of your web application while simultaneously improving the quality of the code you write.

Should a beginner follow these practices?
While it’s good if you follow and implement these from the very beginning, but your main focus as a beginner should always be learning the workings of React and
understanding the fundamentals.

Does improving performance matter on a small scale?
Following these practices works best when we face the issue of scalability and maintaniblity, it is a good practice to ensure applying these even at a smaller scale as well.

What are the common challenges faced by React developers?
Some common challenges faced by React developers include state management, performance optimization, code structure management, and ensuring the maintainability of the application as it scales.

How can I stay updated with the latest React version changes?
Follow official React channels and blogs and subscribe to newsletters like React Newsletter for weekly updates.

Conclusion

As a developer, just learning how to code in React isn’t enough, knowing what to code, implementing ReactJS best practices, are going to help you build an efficient, fast, and a light-weight web application.

Here’s a simple summary of all the ReactJS best practices that we learned about today:

Efficient folder management

• State management
• Lazy Loading
• Re-usable components
• Using react hooks
• Staying updated with latest features of ReactJS

Whenever you’re onto your next project, building in React, make sure to implement these ReactJS best practices into it, which will make it a better experience for both, the users, and the developers!

Infrasity assists organizations with creating tech content for infrastructural organizations working on Kubernetes, cloud cost optimization, DevOps, and platform engineering.

We specialize in crafting technical content and strategically distributing it on developer platforms to ensure our tailored content aligns with your target audience and search intent.

For more such content, including Kickstarter guides involving various tech stacks like NextJS, BunJS, NuxtJS and Vue, in-depth technical blogs, boilerplate code, customizable templates and the latest updates on cutting-edge technology in infrastructure,follow Infrasity

Contact us at contact@infrasity.com today to help us write content that works for you and your developers.
Happy coding and React-ing!! 🥂

Written By Atharva Hinge for Infrasity.