Best Practices for Import Statements in React

Learn about the optimal order and style for importing modules in React projects.

Best Practices for Import Statements in React

Understanding and maintaining a consistent order for import statements in React applications can greatly improve code readability and maintainability. Here’s a guideline on how to structure your import statements for clarity and efficiency.

This is not a programing style guide. It’s a guideline on how to organize your imports.

Core Packages

Always start by importing core packages. These are essential libraries that your project depends on.

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

Assets

Next, import assets like images, SVGs, and icons. Grouping these together helps in identifying resource dependencies at a glance.

// ** import icons
import BackSvg from "@icons/BackSvg";
import SearchSvg from "@icons/SearchSvg";

// ** import assets
import googleSvg from "@svg/google.svg";
import AbsoluteLogo from "@svg/AbsoluteLogo.svg";
import frontGirl from "@illustration/FrontGirl.svg";
import userImage from "@illustration/userImage.webp";

Third-Party Packages

After assets, bring in third-party packages. These are external libraries that are not part of the core packages.

// ** import third party
import { toast } from "react-toastify";
import { CircularProgress } from "@nextui-org/react";

Shared Components

Shared components are reusable components used across different parts of your application.

// ** import shared components
import Image from "@shared/Image";
import Button from "@shared/Button";
import Typography from "@shared/Typography";

Components

Following shared components, import specific components that are used in your current module.

// ** import components
import AddFoodItem from "@components/AddFoodItem";
import CalendarPopup from "@components/CalendarPopup";

Sub Pages/Sections

Sub-pages or section imports come next. These are often specific to the module you’re working on.

// ** import sub pages/sections
import Section1 from "./Section1";
import Section2 from "./Section2";
import Section3 from "./Section3";

Configuration Files

Configuration files like environment settings should be imported thereafter.

// ** import config
import env from "@src/config";

State Management

For state management tools (like Redux), import them after your configuration files.

// ** import state manager
import { useDispatch } from "react-redux";
import { setLocale } from "@src/redux/slices/language";

Utilities and Libraries

Utility functions or libraries are imported next. They usually provide helper functions used across components.

// ** import utils
import { useStorableState } from "@utils/useStorable";

Custom Hooks

Custom hooks, which encapsulate logic, are imported following utilities.

// ** import hooks
import useStorable from "@src/utils/useStorable";

APIs

Finally, import your API functions or services. This keeps API-related imports organized and easily identifiable.

// ** import apis
import { getUserProfileApi } from "@api/auth";
import { confirmOrderApi } from "@api/cart";

In simple terms, here is the overall order of imports style guide:

1. core packages (e.g. React, React Router, Next, etc…)
2. assets (e.g. images, SVGs, icons, etc…)
3. component/shared ui/sub pages
4. third-party packages
5. configuration files/utils/types/validation schema/hooks/custom hooks/sate management
6. api functions/services

Example index.js

Click on the following dropdown to view a sample index.js file with imports organized according to the order described above.

View Example of organized imports 👀

index.js

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

// ** import icons
import BackSvg from "@icons/BackSvg";
import SearchSvg from "@icons/SearchSvg";

// ** import assets
import googleSvg from "@svg/google.svg";
import AbsoluteLogo from "@svg/AbsoluteLogo.svg";
import frontGirl from "@illustration/FrontGirl.svg";
import userImage from "@illustration/userImage.webp";

// ** import third party
import { toast } from "react-toastify";
import { CircularProgress } from "@nextui-org/react";

// ** import shared components
import Image from "@shared/Image";
import Button from "@shared/Button";
import Typography from "@shared/Typography";

// ** import components
import AddFoodItem from "@components/AddFoodItem";
import CalendarPopup from "@components/CalendarPopup";

// ** import sub pages/sections
import Section1 from "./Section1";
import Section2 from "./Section2";
import Section3 from "./Section3";

// ** import config
import env from "@src/config";

// ** import state manager
import { useDispatch } from "react-redux";
import { setLocale } from "@src/redux/slices/language";

// ** import utils
import { useStorableState } from "@utils/useStorable";

// ** import hooks
import useStorable from "@src/utils/useStorable";

// ** import apis
import { getUserProfileApi } from "@api/auth";
import { confirmOrderApi } from "@api/cart";

Import Aliases

Import aliases simplify import statements, making them more readable and manageable, especially in large projects. Here’s how to use them effectively in Node.js, React, and Next.js 14.

Good Practice: Using Import Aliases

// In a React/Next.js project
import Button from '@components/Button';

// In a Node.js project
const dbConfig = require('@config/db');

Bad Practice: Without Import Aliases

// Complex and lengthy relative paths
import Button from '../../../components/Button';
const dbConfig = require('../../config/db');

Setting Up Aliases

• React/Next.js: Configure jsconfig.json or tsconfig.json for alias paths.
• Node.js: Use module-alias package or configure package.json for custom paths.

Import aliases streamline project structure by reducing the complexity of import statements, enhancing code readability and maintainability.

---

References:

• Using Import Aliases in JavaScript
• module-alias Package
• Configuring Path Aliases in Frontend Projects

By following this order, your imports will be neatly organized and easily understandable to anyone reading your code. This not only aids in development but also in maintaining the codebase efficiently.