React

// Before React 19 (manual optimization)
const filteredTasks = useMemo(() => {
  return tasks.filter(task => task.completed);
}, [tasks]);

// React 19 (automatic optimization)
const filteredTasks = tasks.filter(task => task.completed);
// Compiler automatically memoizes this

When to still use manual memoization:

• Use React Profiler to measure performance
• Only add manual memoization if profiling shows clear benefit
• Avoid premature optimization

2. New Hooks

use() Hook

Simplifies async data and context consumption:

import { use } from 'react';

// Reading context
const theme = use(ThemeContext);

// Reading promises (Server Components)
const data = use(fetchDataPromise);

Note: For this client-side task manager, we won't use use() for data fetching since we're managing state locally with useState.

useFormStatus()

Provides form submission status:

'use client';

import { useFormStatus } from 'react';

function SubmitButton() {
  const { pending, data, method } = useFormStatus();

  return (
    <button disabled={pending}>
      {pending ? 'Adding...' : 'Add Task'}
    </button>
  );
}

useOptimistic()

Handles optimistic UI updates:

'use client';

import { useOptimistic } from 'react';

function TaskList({ tasks }) {
  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (state, newTask) => [...state, { ...newTask, pending: true }]
  );

  async function addTask(task) {
    addOptimisticTask(task); // Show immediately
    await saveTask(task); // Persist to server
  }

  return optimisticTasks.map(task => (
    <TaskItem key={task.id} task={task} />
  ));
}

Note: For this client-side app, optimistic updates aren't needed since state changes are synchronous.

Component Patterns (2026)

1. Functional Components with TypeScript

Always use explicit prop interfaces:

interface TaskInputProps {
  onAddTask: (description: string) => void;
}

export default function TaskInput({ onAddTask }: TaskInputProps) {
  const [description, setDescription] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onAddTask(description);
    setDescription('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Add</button>
    </form>
  );
}

2. State Management with useState

For local component state:

'use client';

import { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all');

  const addTask = (description: string) => {
    setTasks([...tasks, {
      id: crypto.randomUUID(),
      description,
      completed: false,
      createdAt: new Date(),
    }]);
  };

  const toggleTask = (id: string) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  const deleteTask = (id: string) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (/* JSX */);
}

3. useEffect Best Practices (React 19)

useEffect is for real side effects only:

// ✅ Good: Real side effects
useEffect(() => {
  // Browser API interaction
  document.title = `${tasks.length} tasks remaining`;
}, [tasks]);

useEffect(() => {
  // Subscription
  const subscription = eventSource.subscribe(handleEvent);
  return () => subscription.unsubscribe();
}, []);

// ❌ Bad: Routine data fetching (use Server Components instead)
useEffect(() => {
  fetch('/api/tasks').then(/* ... */);
}, []);

For this project: Use useEffect for:

• Setting document title
• Focus management
• Local storage sync (if added)

Don't use for:

• Data fetching (we're using client-side state)
• Derived state (React Compiler handles it)

4. Refs for DOM Access

import { useRef, useEffect } from 'react';

export default function TaskInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    // Clear and focus input after adding task
    inputRef.current?.focus();
  };

  // Auto-focus on mount
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Custom Hooks

Extract domain logic into custom hooks:

// hooks/useTasks.ts
'use client';

import { useState } from 'react';

export function useTasks() {
  const [tasks, setTasks] = useState<Task[]>([]);

  const addTask = (description: string) => {
    setTasks([...tasks, {
      id: crypto.randomUUID(),
      description,
      completed: false,
      createdAt: new Date(),
    }]);
  };

  const toggleTask = (id: string) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  const deleteTask = (id: string) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return { tasks, addTask, toggleTask, deleteTask };
}

// Usage in component
export default function TaskList() {
  const { tasks, addTask, toggleTask, deleteTask } = useTasks();

  return (/* JSX */);
}

Benefits:

• Separates business logic from UI
• Reusable across components
• Easier to test

Event Handling

Form Events

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // Handle form submission
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

Click Events

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.stopPropagation(); // If needed
  // Handle click
};

Keyboard Events

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') {
    handleSubmit();
  }
  if (e.key === 'Escape') {
    handleCancel();
  }
};

Conditional Rendering

// Conditional rendering with &&
{tasks.length === 0 && (
  <p>No tasks yet. Add one above!</p>
)}

// Conditional rendering with ternary
{loading ? (
  <Spinner />
) : (
  <TaskList tasks={tasks} />
)}

// Multiple conditions
{tasks.length === 0 ? (
  <EmptyState />
) : filter === 'active' ? (
  <ActiveTasks tasks={activeTasks} />
) : (
  <CompletedTasks tasks={completedTasks} />
)}

Lists and Keys

// Always use stable, unique keys
{tasks.map(task => (
  <TaskItem
    key={task.id} // Use stable ID, not index
    task={task}
    onToggle={toggleTask}
    onDelete={deleteTask}
  />
))}

Key Rules:

• Use unique, stable IDs (not array index)
• Keys must be unique among siblings
• Don't use Math.random() for keys

Common Patterns

1. Controlled Inputs

const [value, setValue] = useState('');

<input
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

2. Lifting State Up

// Parent component manages shared state
function TaskManager() {
  const [tasks, setTasks] = useState<Task[]>([]);

  return (
    <>
      <TaskInput onAddTask={(desc) => {/* add to tasks */}} />
      <TaskList tasks={tasks} />
    </>
  );
}

3. Composition

// Compose small components
function TaskList({ tasks, children }) {
  return (
    <div>
      {tasks.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
      {children}
    </div>
  );
}

// Usage
<TaskList tasks={tasks}>
  <TaskStats count={tasks.length} />
</TaskList>

Performance Best Practices (2026)

1. Let React Compiler Handle Optimization

// ✅ Do: Write clean code, let compiler optimize
const filteredTasks = tasks.filter(task => {
  if (filter === 'active') return !task.completed;
  if (filter === 'completed') return task.completed;
  return true;
});

// ❌ Don't: Premature manual optimization
const filteredTasks = useMemo(() => {
  return tasks.filter(/* ... */);
}, [tasks, filter]);

2. Measure Before Optimizing

import { Profiler } from 'react';

<Profiler id="TaskList" onRender={onRenderCallback}>
  <TaskList tasks={tasks} />
</Profiler>

3. Code Splitting (if needed later)

import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

Accessibility

ARIA Labels

<button
  onClick={handleDelete}
  aria-label={`Delete task "${task.description}"`}
>
  🗑️
</button>

<input
  type="checkbox"
  checked={task.completed}
  onChange={handleToggle}
  aria-label={`Mark "${task.description}" as ${task.completed ? 'incomplete' : 'complete'}`}
/>

Keyboard Navigation

<button
  onClick={handleAction}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleAction();
    }
  }}
>
  Action
</button>

Focus Management

const inputRef = useRef<HTMLInputElement>(null);

const handleSubmit = () => {
  // Return focus to input after action
  inputRef.current?.focus();
};

Common Pitfalls (2026)

❌ Don't: Mutate state directly

// ❌ Bad
tasks.push(newTask);
setTasks(tasks);

// ✅ Good
setTasks([...tasks, newTask]);

❌ Don't: Use index as key

// ❌ Bad
{tasks.map((task, index) => (
  <TaskItem key={index} task={task} />
))}

// ✅ Good
{tasks.map(task => (
  <TaskItem key={task.id} task={task} />
))}

❌ Don't: Call hooks conditionally

// ❌ Bad
if (condition) {
  const [state, setState] = useState(0);
}

// ✅ Good
const [state, setState] = useState(0);
if (condition) {
  // Use state conditionally
}

❌ Don't: Forget dependency arrays

// ❌ Bad (runs on every render)
useEffect(() => {
  console.log(tasks);
});

// ✅ Good (runs when tasks change)
useEffect(() => {
  console.log(tasks);
}, [tasks]);

TypeScript Integration

Component Props

interface TaskItemProps {
  task: Task;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
}

export default function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
  return (/* JSX */);
}

Event Handlers

const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  // e is properly typed
};

const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  // e.target.value is typed as string
};

Children Props

interface ContainerProps {
  children: React.ReactNode;
}

function Container({ children }: ContainerProps) {
  return <div>{children}</div>;
}

References

• React 19 Release Notes
• React Hooks Reference
• React TypeScript Cheatsheet
• React Compiler Documentation
• React Best Practices 2026