React Import Best Practices

✅ DO (Modern Pattern)

import React, { useState, useEffect, useCallback } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return <div>{count}</div>;
}

❌ DON'T (Old Pattern - Causes Lint Warnings)

import React from "react";

function MyComponent() {
  const [count, setCount] = React.useState(0); // ❌ Don't use React.useState

  React.useEffect(() => {
    // ❌ Don't use React.useEffect
    console.log(count);
  }, [count]);

  return <div>{count}</div>;
}

Common React Imports

// Hooks
import React, {
  useState, // State management
  useEffect, // Side effects
  useCallback, // Memoized callbacks
  useMemo, // Memoized values
  useRef, // Refs
  useContext, // Context consumption
  useReducer, // Complex state
} from "react";

// Components & Utilities
import React, {
  Component, // Class components
  lazy, // Code splitting
  Suspense, // Loading fallback
  Fragment, // <> shorthand
  Children, // Children utilities
  createRef, // Refs for class components
} from "react";

// Types (TypeScript)
import React, {
  FC, // Functional Component
  ReactNode, // React node type
  ReactElement, // React element type
} from "react";

Why This Matters

1. Cleaner Code: Direct imports are more readable
2. Better Tree-Shaking: Bundlers can optimize better
3. Modern Standard: Aligns with React 17+ best practices
4. Fewer Warnings: Keeps ESLint happy
5. Future-Proof: Ready for React 18 and beyond