React Code Implementer

React Code Implementation

Component Implementation

Default Approach

• Start with Server Components by default
• Add 'use client' only when needed
• Use TypeScript for all components
• Define prop types with interfaces
• Export component as named export

Server Components

// components/UserProfile.tsx
interface UserProfileProps {
  userId: string;
}

export async function UserProfile({ userId }: UserProfileProps) {
  const user = await fetchUser(userId); // Direct database/API call

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Guidelines:

• Make async when fetching data
• Fetch data directly without useEffect
• No hooks allowed
• Can use Suspense boundaries for loading states
• Return JSX directly

Client Components

'use client';

import { useState } from 'react';

interface CounterProps {
  initialCount?: number;
}

export function Counter({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <button => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Guidelines:

• Add 'use client' at the top
• Use hooks for state and effects
• Handle events and interactivity
• Optimize re-renders with memo/useMemo/useCallback

State Management

Local State

Usage: Component-specific state

Tools:

• useState for simple values
• useReducer for complex state logic

const [isOpen, setIsOpen] = useState(false);
const [user, setUser] = useState<User | null>(null);

Shared State

Usage: State shared across components

Approaches:

• Lifting state: Lift to common ancestor
• Context: Use Context for deep prop threading
• Zustand: Global client state management

// Using Zustand store
import { useUserStore } from '@/stores/user';

export function UserMenu() {
  const { user, logout } = useUserStore();
  // ...
}

Server State

Usage: Data from API/database

Tool: TanStack React Query

'use client';

import { useQuery } from '@tanstack/react-query';

export function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return <PostList posts={data} />;
}

Hooks Implementation

Custom Hooks

Naming: Always prefix with 'use'

// hooks/useLocalStorage.ts
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

Best Practices:

• Return tuple [value, setValue] or object { data, error }
• Handle cleanup in useEffect return
• Memoize complex calculations
• Document dependencies and side effects

Common Hooks

Error Handling

Component Level

'use client';

export function DataDisplay() {
  const { data, error, isLoading } = useQuery(queryOptions);

  if (error) {
    return (
      <ErrorAlert>
        <p>Failed to load data</p>
        <button => refetch()}>Retry</button>
      </ErrorAlert>
    );
  }

  if (isLoading) return <LoadingSkeleton />;

  return <DataView data={data} />;
}

Error Boundary

• Usage: Catch unexpected React errors
• Implementation: Use error.tsx in Next.js or custom boundary
• Fallback: Show user-friendly error message

Styling

Tailwind CSS

<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Click me
</button>

CSS Modules

import styles from './Button.module.css';

<button className={styles.primary}>Click me</button>

Conditional Classes

import clsx from 'clsx';

<div className={clsx(
  'base-class',
  isActive && 'active',
  isDisabled && 'disabled'
)}>

Forms

Controlled Components

const [email, setEmail] = useState('');

<input
  type="email"
  value={email}
  => setEmail(e.target.value)}
/>

Form Libraries

Recommended: React Hook Form for complex forms

import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors } } = useForm();

<form
  <input {...register('email', { required: true })} />
  {errors.email && <span>Email is required</span>}
</form>

Performance

Optimization Checklist

• Use React.memo for expensive pure components
• useMemo for expensive calculations
• useCallback for functions passed to children
• Split large components into smaller ones
• Lazy load components with dynamic imports
• Virtualize long lists

When to Optimize

• After identifying actual performance issue
• For components that render frequently
• For expensive calculations
• Not prematurely - profile first

Testing

Component Tests

Library: React Testing Library

Focus: Test user behavior, not implementation

import { render, screen, fireEvent } from '@testing-library/react';
import { Counter } from './Counter';

test('increments count on click', () => {
  render(<Counter />);
  const button = screen.getByRole('button');

  fireEvent.click(button);

  expect(button).toHaveTextContent('Count: 1');
});

Code Quality Checklist

• All props have TypeScript types
• No 'any' types without justification
• Components are focused (single responsibility)
• Proper error handling
• Loading states for async operations
• Accessibility attributes (ARIA labels, roles)
• Tests cover main user flows