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