Follow this order for importing modules to maintain a clean and organised structure:

  1. React and other libraries
  2. Third-party libraries
  3. Hooks
  4. Constants
  5. Utility functions
  6. Components
  7. Styles

Alphabetical Sorting

Within each category, sort imports alphabetically to improve readability and maintain consistency.

Example:

// React and other libraries
import React, { useState, useEffect } from 'react';
import { FC } from 'react';

// Third-party libraries
import axios from 'axios';
import lodash from 'lodash';

// Hooks
import { useMyCustomHook } from './hooks/useMyCustomHook';

// Constants
import { API_URL, DEFAULT_LIMIT } from './constants';

// Utility functions
import { calculateTotal } from './utils/calculateTotal';

// Components
import { AnotherComponent } from './components/AnotherComponent';

// Styles
import './MyComponent.css';