Best Practices for Import Statements in React

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

​
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:

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.