React 19 + Tailwind CSS Code Review

/devkit.react.code-review $ARGUMENTS

// ✅ Correct: useActionState for form submissions
const [state, formAction, isPending] = useActionState(submitAction, initialState);

// ❌ Avoid: Manual state management for forms
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

// ✅ Correct: use() with Suspense for data fetching
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}

// ❌ Avoid: useEffect for data fetching when use() is appropriate
useEffect(() => { fetchData().then(setData); }, []);

// ✅ Correct: useFormStatus for submit button state
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
}

// ✅ Correct: Optimistic updates for better UX
const [optimisticItems, addOptimisticItem] = useOptimistic(
  items,
  (state, newItem) => [...state, { ...newItem, pending: true }]
);

// ✅ React 19: ref is a regular prop
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// ❌ Deprecated: forwardRef wrapper (still works but unnecessary)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

// ✅ React 19: Native metadata support
function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <h1>{post.title}</h1>
    </article>
  );
}

// ✅ Correct: Discriminated unions for variant props
type ButtonProps = 
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

// ✅ Correct: Spread remaining props
function Button({ variant, children, ...props }: ButtonProps) {
  return <button className={variants[variant]} {...props}>{children}</button>;
}

// ❌ Avoid: Boolean prop explosion
<Button isPrimary isLarge isDisabled isLoading />

// ✅ Correct: Render props for flexibility
<DataProvider render={(data) => <List items={data} />} />

// ✅ Correct: Compound components
<Select>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>

// ✅ Correct: Custom hook extracts reusable logic
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  
  return debouncedValue;
}

// ❌ Avoid: Hooks that do too much
function useEverything() { /* manages auth, theme, data, routing... */ }

// ✅ Correct: Logical grouping of utilities
<div className="
  flex items-center gap-4           /* Layout */
  px-4 py-2                         /* Spacing */
  bg-white dark:bg-gray-800         /* Colors */
  rounded-lg shadow-md              /* Effects */
  hover:shadow-lg transition-shadow /* States */
">

// ❌ Avoid: Random ordering
<div className="shadow-md py-2 flex hover:shadow-lg bg-white px-4 rounded-lg">

// ✅ Correct: Consistent dark mode variants
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 className="text-gray-800 dark:text-white">Title</h1>
  <p className="text-gray-600 dark:text-gray-400">Description</p>
</div>

// ❌ Avoid: Inconsistent or missing dark mode
<div className="bg-white text-black"> /* No dark mode support */

// ✅ Correct: Mobile-first responsive
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div className="p-4 md:p-6 lg:p-8">
    <h2 className="text-lg md:text-xl lg:text-2xl">Heading</h2>
  </div>
</div>

// ❌ Avoid: Desktop-first or inconsistent breakpoints
<div className="lg:grid-cols-3 grid-cols-1"> /* Confusing order */

// ✅ Correct: Use cva for variant management
import { cva } from 'class-variance-authority';

const button = cva('rounded font-medium transition-colors', {
  variants: {
    intent: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    },
    size: {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-base',
      lg: 'px-6 py-3 text-lg',
    },
  },
  defaultVariants: { intent: 'primary', size: 'md' },
});

// ❌ Avoid: String concatenation for variants
className={`btn ${isPrimary ? 'bg-blue-600' : 'bg-gray-200'} ${isLarge ? 'px-6' : 'px-4'}`}

// ❌ Avoid: Arbitrary values when design tokens exist
<div className="mt-[13px] text-[#1a2b3c]">

// ✅ Correct: Use design system values
<div className="mt-3 text-gray-800">

// ❌ Avoid: @apply in CSS (loses utility benefits)
.btn { @apply px-4 py-2 rounded; }

// ✅ Correct: Component abstraction in JSX
const Button = ({ children }) => (
  <button className="px-4 py-2 rounded">{children}</button>
);

// React Compiler auto-optimizes, manual memoization often unnecessary
// ✅ Let compiler optimize
function ExpensiveList({ items }) {
  return items.map(item => <Item key={item.id} data={item} />);
}

// ❌ Avoid: Premature optimization
const MemoizedList = memo(({ items }) => {
  const processedItems = useMemo(() => items.map(process), [items]);
  const handleClick = useCallback(() => {}, []);
  // ...
});

// ✅ Correct: Proper ARIA usage
<button 
  aria-label="Close dialog"
  aria-expanded={isOpen}
  aria-controls="menu-content"
>
  <XIcon aria-hidden="true" />
</button>

// ❌ Avoid: Redundant ARIA
<button role="button" aria-label="Click me button">Click me</button>

// ✅ Correct: Screen reader utilities
<span className="sr-only">Loading</span>
<div aria-busy="true" className="animate-spin" />

// ✅ Correct: Focus visible styling
<button className="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">

// ✅ Correct: Form with Server Action
async function createPost(formData: FormData) {
  'use server';
  const title = formData.get('title');
  await db.posts.create({ title });
  revalidatePath('/posts');
}

function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <SubmitButton />
    </form>
  );
}

// ✅ Correct: Progressive enhancement
<input
  type="email"
  required
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  className="invalid:border-red-500 invalid:text-red-600"
/>

// ✅ Correct: Query by role/label
const button = screen.getByRole('button', { name: /submit/i });
await userEvent.click(button);
expect(screen.getByText(/success/i)).toBeInTheDocument();

// ❌ Avoid: Query by test ID when better options exist
const button = screen.getByTestId('submit-btn');

/devkit.react.code-review example-input