> ## Documentation Index > Fetch the complete documentation index at: https://peacockindia.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 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 ## 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. ```js theme={null} 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. ```js theme={null} // ** 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. ```js theme={null} // ** 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. ```js theme={null} // ** 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. ```js theme={null} // ** 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. ```js theme={null} // ** 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. ```js theme={null} // ** import config import env from "@src/config"; ``` ### State Management For state management tools (like Redux), import them after your configuration files. ```js theme={null} // ** 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. ```js theme={null} // ** import utils import { useStorableState } from "@utils/useStorable"; ``` ### Custom Hooks Custom hooks, which encapsulate logic, are imported following utilities. ```js theme={null} // ** 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. ```js theme={null} // ** 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. ```js index.js theme={null} 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 ```javascript theme={null} // 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 ```javascript theme={null} // 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](https://medium.com/dailyjs/using-import-aliases-in-javascript-a0b46237601c) * [module-alias Package](https://www.npmjs.com/package/module-alias) * [Configuring Path Aliases in Frontend Projects](https://betterprogramming.pub/the-native-way-to-configure-path-aliases-in-frontend-projects-5db70f19a6e0) 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.