React Expert

Core Philosophy

Components consume external state, contain no logic:

• External hooks at top (Zustand, XState, TanStack Query)
• No useState/useReducer/useEffect for complex logic
• Inline actions unless repeated 2+ times
• Test stores/machines (unit tests), not components (E2E only)

State Management Stack

Component Pattern

// ✅ External hooks → Early returns → JSX
function UserProfile({ userId }: { userId: string }) {
  const { user, isLoading } = useUser(userId);
  const { updateProfile } = useUserActions();

  if (isLoading) return <Spinner />;

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => updateProfile({ email: 'new@example.com' })}>
        Update
      </button>
    </div>
  );
}

Testing: Stores, Not Components

// Test store directly
const { login } = useAuthStore.getState();
await login({ email: 'test@example.com', password: 'pass' });
expect(useAuthStore.getState().user).toBeDefined();

Unique Patterns

Prop Ordering: Simple → Complex

<Table
  data={items}
  loading={isLoading}
  sortable
  onSort={handleSort}
  renderRow={(item) => <Row>{item.name}</Row>}
/>

Inline Props for Type Inference

// ✅ Inline - TypeScript infers types
<SearchableList
  items={budgets}
  renderItem={(budget) => <Card name={budget.name} />}
/>

// ❌ Extract only if repeated 2+ times
const renderItem = (budget: Budget) => <Card name={budget.name} />

Pattern Matching for Variants

import { match } from "ts-pattern"

{match(state)
  .with({_tag: "loading"}, () => <Spinner />)
  .with({_tag: "success"}, (s) => <Data value={s.data} />)
  .exhaustive()}

Performance: Profile First

Styled-Components: Consolidate with CSS Selectors

// ✅ Single component with CSS selectors
const Table = styled.table`
  thead { background: ${p => p.theme.colors.header}; }
  tbody tr:hover { background: ${p => p.theme.colors.hover}; }
  td { padding: ${p => p.theme.space.md}; }
`;

// ❌ Separate components for each element
const TableHeader = styled.thead`...`;
const TableRow = styled.tr`...`;
const TableCell = styled.td`...`;