// ❌ Clever but brittle
const u = (d) => d.filter((x) => x.a).map((x) => x.n);

// ✅ Explicit and stable
interface User {
  id: string;
  name: string;
  isActive: boolean;
}
 
const getActiveUserNames = (users: User[]): string[] => {
  return users.filter((user) => user.isActive).map((user) => user.name);
};

// ❌ Ambiguous naming
const valid = true; // Valid what?
const user = false; // Is this a boolean? An object? A flag?
const data = true; // What about data?
const loading = false; // Loading what? Is loading done or not started?

// ✅ Intent encoded in the name
const isValid = true;
const hasUser = false;
const shouldRender = true;
const isLoading = false;
const canSubmit = true;
const didFetch = false;

// If it reads naturally in an if-statement, you're good
if (shouldRender) { ... }        // ✅ "If should render"
if (hasPermission) { ... }       // ✅ "If has permission"
if (isAuthenticated) { ... }     // ✅ "If is authenticated"
 
if (render) { ... }              // ❌ "If render" — verb or boolean?
if (permission) { ... }          // ❌ "If permission" — what about it?

// ✅ Clear separation of concerns
 
// Parent Component (knows WHAT to do)
const UserDashboard = () => {
  const handleSaveProfile = async (userData: UserData) => {
    await api.updateUser(userData);
    toast.success('Profile saved!');
    analytics.track('profile_updated');
  };
 
  const handleDeleteAccount = async () => {
    if (confirm('Are you sure?')) {
      await api.deleteUser();
      router.push('/goodbye');
    }
  };
 
  return (
    <ProfileForm
      onSave={handleSaveProfile} // Interface: "you can save"
      onDelete={handleDeleteAccount} // Interface: "you can delete"
    />
  );
};
 
// Child Component (knows HOW to render)
interface ProfileFormProps {
  onSave: (data: UserData) => void;
  onDelete: () => void;
}
 
const ProfileForm = ({ onSave, onDelete }: ProfileFormProps) => {
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    const formData = extractFormData(e.target);
    onSave(formData); // Delegate to parent
  };
 
  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button type='submit'>Save</button>
      <button type='button' onClick={onDelete}>
        Delete Account
      </button>
    </form>
  );
};

// ❌ Hidden dependencies — must read entire component to understand inputs
const UserCard = (props) => {
  return (
    <div className={props.className}>
      <img src={props.user.avatar} alt={props.user.name} />
      <h2>{props.user.name}</h2>
      {props.showEmail && <p>{props.user.email}</p>}
      {props.onEdit && <button onClick={props.onEdit}>Edit</button>}
    </div>
  );
};

// ✅ Self-documenting interface
interface UserCardProps {
  user: User;
  showEmail?: boolean;
  className?: string;
  onEdit?: () => void;
}
 
const UserCard = ({
  user,
  showEmail = false,
  className = '',
  onEdit,
}: UserCardProps) => {
  return (
    <div className={className}>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      {showEmail && <p>{user.email}</p>}
      {onEdit && <button onClick={onEdit}>Edit</button>}
    </div>
  );
};

// For components with many props, group logically
interface DataTableProps {
  // Data
  data: Row[];
  columns: Column[];
 
  // Pagination
  page?: number;
  pageSize?: number;
  onPageChange?: (page: number) => void;
 
  // Selection
  selectedIds?: string[];
  onSelectionChange?: (ids: string[]) => void;
 
  // Appearance
  className?: string;
  isCompact?: boolean;
}
 
const DataTable = ({
  // Data
  data,
  columns,
 
  // Pagination
  page = 1,
  pageSize = 10,
  onPageChange,
 
  // Selection
  selectedIds = [],
  onSelectionChange,
 
  // Appearance
  className,
  isCompact = false,
}: DataTableProps) => {
  // Implementation
};

// ❌ Ternary pyramid of doom
return isLoading ? (
  <Spinner />
) : isError ? (
  <ErrorBanner message={error.message} />
) : !isAuthenticated ? (
  <LoginPrompt />
) : !hasPermission ? (
  <AccessDenied />
) : data?.length === 0 ? (
  <EmptyState />
) : (
  <DataView data={data} />
);
 
// Quick: What renders when isLoading=false, isError=false,
// isAuthenticated=true, hasPermission=false?
// Exactly. Nobody can parse this quickly.

// ✅ Linear, explicit, and debuggable
const Dashboard = () => {
  const { data, isLoading, isError, error } = useData();
  const { isAuthenticated, hasPermission } = useAuth();
 
  if (isLoading) {
    return <Spinner />;
  }
 
  if (isError) {
    return <ErrorBanner message={error.message} />;
  }
 
  if (!isAuthenticated) {
    return <LoginPrompt />;
  }
 
  if (!hasPermission) {
    return <AccessDenied />;
  }
 
  if (!data || data.length === 0) {
    return <EmptyState />;
  }
 
  // Happy path — the main render
  return <DataView data={data} />;
};

// ✅ Simple, single-level ternaries are fine
const Button = ({ isLoading, children }) => (
  <button disabled={isLoading}>{isLoading ? <Spinner /> : children}</button>
);
 
// ✅ Conditional className
<div className={isActive ? 'active' : 'inactive'} />;
 
// ✅ Nullish coalescing for defaults
const displayName = user.nickname ?? user.name ?? 'Anonymous';

// ❌ Conditional hook — this WILL break
const UserProfile = ({ userId }) => {
  if (!userId) {
    return <div>No user selected</div>;
  }
 
  // 🚨 This hook only runs when userId exists
  // React loses track of hook order between renders
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
 
  return <Profile user={user} />;
};

// ✅ Hooks ALWAYS run, conditions go INSIDE
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    // Condition inside the hook
    if (!userId) {
      setUser(null);
      return;
    }
 
    setIsLoading(true);
    fetchUser(userId)
      .then(setUser)
      .finally(() => setIsLoading(false));
  }, [userId]);
 
  // Early returns AFTER all hooks
  if (!userId) {
    return <div>No user selected</div>;
  }
 
  if (isLoading) {
    return <Spinner />;
  }
 
  return <Profile user={user} />;
};

// ✅ DO
- Call hooks at the top level
- Call hooks in the same order every render
- Call hooks only in React functions (components or custom hooks)
- Put conditions INSIDE hooks
 
// ❌ DON'T
- Call hooks inside loops
- Call hooks inside conditions
- Call hooks inside nested functions
- Call hooks in regular JavaScript functions

// ❌ Lying to React
const SearchResults = ({ query, filters }) => {
  const [results, setResults] = useState([]);
 
  useEffect(() => {
    // Uses query AND filters, but only declares query
    fetchResults(query, filters).then(setResults);
  }, [query]); // 🚨 Lie: filters is missing
 
  // Bug: Changing filters doesn't trigger a new fetch
  // You'll see stale results and tear your hair out
};

// ✅ Honest dependency tracking
const SearchResults = ({ query, filters }) => {
  const [results, setResults] = useState([]);
 
  useEffect(() => {
    fetchResults(query, filters).then(setResults);
  }, [query, filters]); // All dependencies declared
 
  return <ResultsList results={results} />;
};

// Problem: filters object is recreated every render
const Parent = () => {
  // ❌ New object reference every render
  const filters = { status: 'active', sort: 'date' };
  return <SearchResults filters={filters} />;
};
 
// Solution 1: Memoize in parent
const Parent = () => {
  const filters = useMemo(
    () => ({
      status: 'active',
      sort: 'date',
    }),
    []
  ); // Stable reference
 
  return <SearchResults filters={filters} />;
};
 
// Solution 2: Lift individual values
const SearchResults = ({ status, sort }) => {
  useEffect(() => {
    fetchResults({ status, sort });
  }, [status, sort]); // Primitives are easy to compare
};

// ❌ Component doing too much
const ShoppingCart = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [couponCode, setCouponCode] = useState('');
  const [discount, setDiscount] = useState(0);
 
  useEffect(() => {
    setIsLoading(true);
    fetch('/api/cart')
      .then((r) => {
        if (!r.ok) throw new Error('Failed to load cart');
        return r.json();
      })
      .then((data) => {
        setItems(data.items);
        setError(null);
      })
      .catch((err) => setError(err.message))
      .finally(() => setIsLoading(false));
  }, []);
 
  useEffect(() => {
    if (!couponCode) {
      setDiscount(0);
      return;
    }
 
    fetch(`/api/coupons/validate?code=${couponCode}`)
      .then((r) => r.json())
      .then((data) => setDiscount(data.discount))
      .catch(() => setDiscount(0));
  }, [couponCode]);
 
  const addItem = async (productId) => {
    const response = await fetch('/api/cart/add', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
    const updated = await response.json();
    setItems(updated.items);
  };
 
  const removeItem = async (itemId) => {
    // ... similar logic
  };
 
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const finalTotal = total - total * discount;
 
  if (isLoading) return <Spinner />;
  if (error) return <Error message={error} />;
 
  return (
    <div>
      <CartItems items={items} onRemove={removeItem} />
      <CouponInput value={couponCode} onChange={setCouponCode} />
      <CartTotal total={finalTotal} discount={discount} />
      <CheckoutButton total={finalTotal} />
    </div>
  );
};

// ✅ Custom hook handles all cart logic
const useCart = () => {
  const [items, setItems] = useState<CartItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    setIsLoading(true);
    fetch('/api/cart')
      .then((r) => {
        if (!r.ok) throw new Error('Failed to load cart');
        return r.json();
      })
      .then((data) => {
        setItems(data.items);
        setError(null);
      })
      .catch((err) => setError(err.message))
      .finally(() => setIsLoading(false));
  }, []);
 
  const addItem = useCallback(async (productId: string) => {
    const response = await fetch('/api/cart/add', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
    const updated = await response.json();
    setItems(updated.items);
  }, []);
 
  const removeItem = useCallback(async (itemId: string) => {
    const response = await fetch('/api/cart/remove', {
      method: 'POST',
      body: JSON.stringify({ itemId }),
    });
    const updated = await response.json();
    setItems(updated.items);
  }, []);
 
  const total = useMemo(
    () => items.reduce((sum, item) => sum + item.price, 0),
    [items]
  );
 
  return { items, isLoading, error, addItem, removeItem, total };
};
 
const useCoupon = (cartTotal: number) => {
  const [code, setCode] = useState('');
  const [discount, setDiscount] = useState(0);
  const [isValidating, setIsValidating] = useState(false);
 
  useEffect(() => {
    if (!code) {
      setDiscount(0);
      return;
    }
 
    setIsValidating(true);
    const timeoutId = setTimeout(() => {
      fetch(`/api/coupons/validate?code=${code}`)
        .then((r) => r.json())
        .then((data) => setDiscount(data.discount))
        .catch(() => setDiscount(0))
        .finally(() => setIsValidating(false));
    }, 500); // Debounce
 
    return () => clearTimeout(timeoutId);
  }, [code]);
 
  const finalTotal = cartTotal - cartTotal * discount;
 
  return { code, setCode, discount, finalTotal, isValidating };
};
 
// ✅ Component is now purely presentational
const ShoppingCart = () => {
  const { items, isLoading, error, removeItem, total } = useCart();
  const { code, setCode, discount, finalTotal } = useCoupon(total);
 
  if (isLoading) return <Spinner />;
  if (error) return <Error message={error} />;
 
  return (
    <div>
      <CartItems items={items} onRemove={removeItem} />
      <CouponInput value={code} onChange={setCode} />
      <CartTotal total={finalTotal} discount={discount} />
      <CheckoutButton total={finalTotal} />
    </div>
  );
};

// ✅ Expensive calculation
const sortedAndFilteredData = useMemo(() => {
  return data
    .filter((item) => item.status === filter)
    .sort((a, b) => b.date - a.date)
    .slice(0, 1000);
}, [data, filter]);
 
// ✅ Referential equality for child optimization
const MemoizedChild = React.memo(ExpensiveChild);
 
const Parent = () => {
  // Without useCallback, handleClick is new every render
  // This would defeat React.memo on MemoizedChild
  const handleClick = useCallback((id: string) => {
    setSelected(id);
  }, []);
 
  return <MemoizedChild onClick={handleClick} />;
};
 
// ✅ Dependency in other hooks
const fetchData = useCallback(async () => {
  const response = await fetch(`/api/data?id=${id}`);
  return response.json();
}, [id]);
 
useEffect(() => {
  fetchData().then(setData);
}, [fetchData]); // Now this only runs when id changes

// ❌ Premature optimization
const name = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
// String concatenation is trivially fast
 
// ❌ New object/array that doesn't matter
const style = useMemo(() => ({ color: 'red' }), []);
// Unless this is passed to a memoized child, who cares?
 
// ❌ Handler that's not passed to memoized children
const handleClick = useCallback(() => {
  doSomething();
}, []);
// If the child isn't memoized, this useCallback is pure overhead

// features/user/index.ts
// This is the PUBLIC API of the user feature
 
// Components
export { UserProfile } from './components/UserProfile';
export { UserAvatar } from './components/UserAvatar';
 
// Hooks
export { useUser } from './hooks/useUser';
 
// Types
export type { User } from './types';

// Button.tsx
export default function Button() { ... }
 
// Usage - anything goes
import Button from './Button';      // ✅ Original name
import MyButton from './Button';    // 😕 Different name

// Button.tsx
export const Button = () => { ... };
 
// Usage - consistent everywhere
import { Button } from './Button';  // Always Button

// ❌ Impossible states are possible
interface DataState {
  data: User[] | null;
  isLoading: boolean;
  error: string | null;
}
 
// ✅ Impossible states are impossible
type DataState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'error'; error: string }
  | { status: 'success'; data: User[] };
 
const UserList = () => {
  const [state, setState] = useState<DataState>({ status: 'idle' });
 
  // TypeScript narrows automatically
  switch (state.status) {
    case 'idle':
      return <button onClick={fetch}>Load Users</button>;
    case 'loading':
      return <Spinner />;
    case 'error':
      return <Error message={state.error} />;
    case 'success':
      return <List users={state.data} />;
  }
};