React 19 Best Practices Guide (2024-2025)

Report Date: November 30, 2025 Research Focus: React 19 development best practices, new features, patterns, and security

Table of Contents #

1. React 19 Overview
2. New Features and Migration Patterns
3. Component Patterns and Hooks Best Practices
4. Performance Optimization
5. TypeScript Integration Patterns
6. Testing React Components
7. Security Considerations
8. Recommendations Summary

React 19 Overview #

React 19 was officially released on December 5, 2024, marking a significant milestone in React's evolution. This release focuses on enhancing performance, improving developer experience, and making asynchronous UI patterns production-ready.

Key Highlights #

• Automatic Performance Optimization: React Compiler (formerly React Forget) eliminates most manual memoization needs
• Enhanced Async UI Handling: New hooks specifically designed for form handling and optimistic updates
• Server-First Architecture: Production-ready Server Components and Server Actions
• Concurrent Rendering by Default: Prevents long renders from blocking the UI
• Developer Experience: Simplified APIs, better error reporting, and reduced boilerplate

New Features and Migration Patterns #

1. New Hooks #

React 19 introduces four major hooks that revolutionize async UI patterns:

use() API #

The use() API is a groundbreaking addition that reads resources during render. Unlike traditional hooks, it can be called conditionally.

Key Features:

• Works with Promises (suspends until resolution)
• Reads Context values
• Can be used inside if statements and loops (unlike traditional hooks)
• Must be used with Suspense for Promise handling

Example with Promises:

 1import { use, Suspense } from 'react';
 2
 3function DataComponent({ dataPromise }) {
 4  const data = use(dataPromise); // Suspends until promise resolves
 5  return <div>{data}</div>;
 6}
 7
 8// Usage with Suspense
 9<Suspense fallback={<p>Loading...</p>}>
10  <DataComponent dataPromise={fetchData()} />
11</Suspense>

Example with Context (Conditional):

1function MyComponent({ isSpecialMode }) {
2  if (isSpecialMode) {
3    const theme = use(ThemeContext); // Can use conditionally!
4    return <div className={`theme-${theme}`}>Special Mode</div>;
5  }
6  return <div>Normal Mode</div>;
7}

Important Note: Promises created in render must be cached using a Suspense-compatible library.

useActionState #

Simplifies async form handling by managing state transitions automatically.

Syntax:

1const [state, formAction] = useActionState(asyncFunction, initialState);

Parameters:

• asyncFunction: Receives current state and FormData
• initialState: Initial state value

Example:

 1async function submitUser(prevState, formData) {
 2  try {
 3    const username = formData.get('username');
 4    const newUser = await api.createUser(username);
 5    return {
 6      users: [...prevState.users, newUser],
 7      error: null
 8    };
 9  } catch (error) {
10    return {
11      ...prevState,
12      error: error.message
13    };
14  }
15}
16
17function UserForm() {
18  const [state, formAction] = useActionState(submitUser, {
19    users: [],
20    error: null
21  });
22
23  return (
24    <form action={formAction}>
25      <input type="text" name="username" required />
26      <button type="submit">Add User</button>
27      {state?.error && <div className="error">{state.error}</div>}
28      <ul>
29        {state?.users?.map(user => (
30          <li key={user.id}>{user.username}</li>
31        ))}
32      </ul>
33    </form>
34  );
35}

useOptimistic #

Enables optimistic UI updates that show expected results immediately while the server confirms.

Syntax:

1const [optimisticState, setOptimisticState] = useOptimistic(actualState, updateFn);

Behavior:

• Displays optimistic value immediately
• Automatically reverts if operation fails
• Updates to actual value on success

Example:

 1function TodoList({ todos }) {
 2  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
 3    todos,
 4    (state, newTodo) => [...state, { ...newTodo, sending: true }]
 5  );
 6
 7  async function handleSubmit(formData) {
 8    const title = formData.get('title');
 9    addOptimisticTodo({ id: Date.now(), title });
10
11    try {
12      await api.createTodo(title);
13      // Success - optimistic update becomes permanent
14    } catch (error) {
15      // Failure - automatically reverts to original state
16      console.error('Failed to create todo:', error);
17    }
18  }
19
20  return (
21    <>
22      <form action={handleSubmit}>
23        <input name="title" placeholder="New todo" />
24        <button type="submit">Add</button>
25      </form>
26      <ul>
27        {optimisticTodos.map(todo => (
28          <li key={todo.id} style={{ opacity: todo.sending ? 0.5 : 1 }}>
29            {todo.title}
30          </li>
31        ))}
32      </ul>
33    </>
34  );
35}

useFormStatus #

Reads parent form status without prop drilling, similar to Context but specialized for forms.

Important: Must be imported from react-dom, not react:

1import { useFormStatus } from 'react-dom';

Returns: { pending, data } where:

• pending: Boolean indicating if form is submitting
• data: FormData object with form values

Example:

 1function SubmitButton() {
 2  const { pending, data } = useFormStatus();
 3
 4  return (
 5    <div>
 6      <button disabled={pending} type="submit">
 7        {pending ? 'Submitting...' : 'Submit'}
 8      </button>
 9      {pending && data && (
10        <p>Submitting {data.get('username')}...</p>
11      )}
12    </div>
13  );
14}
15
16function Form() {
17  return (
18    <form action={submitAction}>
19      <input type="text" name="username" placeholder="Enter name" />
20      <SubmitButton /> {/* Accesses form status without props */}
21    </form>
22  );
23}

2. Actions Framework #

Actions are async functions that automatically manage:

• Pending states: Automatically tracked and reset
• Error handling: Integrated with Error Boundaries
• Optimistic updates: Via useOptimistic
• Form resets: Automatic reset after successful submission

Form Integration:

 1async function createPost(formData) {
 2  'use server'; // Server Action
 3
 4  const title = formData.get('title');
 5  const post = await db.posts.create({ title });
 6  revalidatePath('/posts');
 7  return post;
 8}
 9
10function PostForm() {
11  return (
12    <form action={createPost}>
13      <input name="title" required />
14      <button type="submit">Create Post</button>
15    </form>
16  );
17}

3. Server Components and Server Actions #

Server Components:

• Execute on the server (build-time or per-request)
• Access databases directly
• Reduce JavaScript bundle size
• No interactivity (no state, effects, or event handlers)

Server Actions:

• Defined with "use server" directive
• Execute on the server
• Callable from Client Components
• Replace many REST/GraphQL API patterns

Example:

 1// app/posts/actions.js
 2'use server';
 3
 4export async function getPosts() {
 5  const posts = await db.posts.findMany();
 6  return posts;
 7}
 8
 9export async function createPost(formData) {
10  const title = formData.get('title');
11  await db.posts.create({ title });
12  revalidatePath('/posts');
13}
14
15// app/posts/page.js (Server Component)
16import { getPosts } from './actions';
17
18export default async function PostsPage() {
19  const posts = await getPosts(); // Direct async/await
20
21  return (
22    <div>
23      <h1>Posts</h1>
24      <ul>
25        {posts.map(post => (
26          <li key={post.id}>{post.title}</li>
27        ))}
28      </ul>
29    </div>
30  );
31}

4. Developer Experience Improvements #

ref as Prop (No More forwardRef) #

Function components now accept ref directly:

1// React 19 - Simple and clean
2function Input({ ref, ...props }) {
3  return <input ref={ref} {...props} />;
4}
5
6// React 18 - Verbose
7const Input = forwardRef((props, ref) => {
8  return <input ref={ref} {...props} />;
9});

Simplified Context Provider #

1// React 19
2<ThemeContext value="dark">
3  <App />
4</ThemeContext>
5
6// React 18
7<ThemeContext.Provider value="dark">
8  <App />
9</ThemeContext.Provider>

Ref Cleanup Functions #

 1function Component() {
 2  return (
 3    <div ref={element => {
 4      // Setup
 5      element.addEventListener('scroll', handleScroll);
 6
 7      // Cleanup (new in React 19)
 8      return () => {
 9        element.removeEventListener('scroll', handleScroll);
10      };
11    }}>
12      Content
13    </div>
14  );
15}

Enhanced useDeferredValue #

1function SearchResults({ query }) {
2  const deferredQuery = useDeferredValue(query, {
3    initialValue: '' // Show empty initially, update in background
4  });
5
6  const results = search(deferredQuery);
7  return <ResultsList results={results} />;
8}

5. Document Metadata Support #

No more react-helmet needed:

 1function BlogPost({ post }) {
 2  return (
 3    <article>
 4      <title>{post.title} - My Blog</title>
 5      <meta name="description" content={post.excerpt} />
 6      <meta property="og:image" content={post.image} />
 7      <link rel="canonical" href={`https://myblog.com/posts/${post.slug}`} />
 8
 9      <h1>{post.title}</h1>
10      <p>{post.content}</p>
11    </article>
12  );
13}

6. Resource Preloading APIs #

New APIs for performance optimization:

 1import { preload, preinit, preconnect, prefetchDNS } from 'react-dom';
 2
 3// Preload a resource
 4preload('/assets/font.woff2', { as: 'font', type: 'font/woff2' });
 5
 6// Preinit (preload + execute)
 7preinit('/scripts/analytics.js', { as: 'script' });
 8
 9// Preconnect to external domain
10preconnect('https://cdn.example.com');
11
12// DNS prefetch
13prefetchDNS('https://api.example.com');

Migration Patterns #

Breaking Changes to Address #

1. PropTypes Removed

   • Migrate to TypeScript or remove PropTypes
   • Function component defaultProps removed (use ES6 defaults)

2. Legacy Context Removed

   • Migrate to modern createContext API
   • Class components: use contextType

3. String Refs Removed

   • Replace with callback refs: ref={el => this.input = el}

4. ReactDOM Methods Removed

   • ReactDOM.render() → createRoot().render()
   • ReactDOM.hydrate() → hydrateRoot()
   • unmountComponentAtNode() → root.unmount()
   • findDOMNode() → Use refs instead

5. Test Utilities Removed

   • react-test-renderer/shallow → Use React Testing Library
   • react-dom/test-utils → Use React Testing Library

Automated Migration #

Use codemods for automatic migration:

1# Comprehensive migration recipe
2npx codemod@latest react/19/migration-recipe
3
4# Or specific codemods
5npx react-codemod replace-reactdom-render
6npx react-codemod replace-string-ref

Incremental Adoption Strategy #

1. Update Dependencies:

   1npm install --save-exact react@^19.0.0 react-dom@^19.0.0
   2npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
   

2. Test in Staging:

   • Evaluate compatibility with your stack
   • Run automated tests
   • Test critical user flows

3. Enable Features Gradually:

   • React Compiler can be enabled per-file/component
   • Server Components require framework support (Next.js 15+)
   • Most new hooks are opt-in

4. Team Training:

   • Update internal documentation
   • Conduct workshops on new patterns
   • Share migration guide with team

Component Patterns and Hooks Best Practices #

1. Functional Components as Standard #

Recommendation: Use functional components exclusively. Class components are legacy.

Best Practice:

 1// Good - Modern functional component
 2function UserProfile({ userId }) {
 3  const [user, setUser] = useState(null);
 4  const [loading, setLoading] = useState(true);
 5
 6  useEffect(() => {
 7    fetchUser(userId).then(setUser).finally(() => setLoading(false));
 8  }, [userId]);
 9
10  if (loading) return <Spinner />;
11  return <div>{user.name}</div>;
12}
13
14// Avoid - Class component (legacy)
15class UserProfile extends React.Component {
16  // ...outdated pattern
17}

2. Custom Hooks for Reusable Logic #

Custom hooks are the preferred way to share stateful logic across components.

Best Practice:

 1// Custom hook for data fetching
 2function useUser(userId) {
 3  const [user, setUser] = useState(null);
 4  const [loading, setLoading] = useState(true);
 5  const [error, setError] = useState(null);
 6
 7  useEffect(() => {
 8    let cancelled = false;
 9
10    setLoading(true);
11    fetchUser(userId)
12      .then(data => {
13        if (!cancelled) {
14          setUser(data);
15          setError(null);
16        }
17      })
18      .catch(err => {
19        if (!cancelled) setError(err);
20      })
21      .finally(() => {
22        if (!cancelled) setLoading(false);
23      });
24
25    return () => { cancelled = true; };
26  }, [userId]);
27
28  return { user, loading, error };
29}
30
31// Usage in multiple components
32function UserProfile({ userId }) {
33  const { user, loading, error } = useUser(userId);
34
35  if (loading) return <Spinner />;
36  if (error) return <Error message={error.message} />;
37  return <div>{user.name}</div>;
38}
39
40function UserAvatar({ userId }) {
41  const { user, loading } = useUser(userId);
42
43  if (loading) return <SkeletonAvatar />;
44  return <img src={user.avatar} alt={user.name} />;
45}

3. Hooks Composition Pattern #

Combine multiple custom hooks for complex behavior:

 1function useAuthenticatedUser() {
 2  const { user, loading: authLoading } = useAuth();
 3  const { data: profile, loading: profileLoading } = useUserProfile(user?.id);
 4  const { permissions, loading: permLoading } = usePermissions(user?.id);
 5
 6  return {
 7    user,
 8    profile,
 9    permissions,
10    loading: authLoading || profileLoading || permLoading
11  };
12}
13
14// Clean component using composed hook
15function Dashboard() {
16  const { user, profile, permissions, loading } = useAuthenticatedUser();
17
18  if (loading) return <Spinner />;
19
20  return (
21    <div>
22      <h1>Welcome, {profile.name}</h1>
23      {permissions.canEdit && <EditButton />}
24    </div>
25  );
26}

4. State Reducer Pattern #

For complex state logic, use the reducer pattern:

 1const initialState = {
 2  items: [],
 3  filter: 'all',
 4  sortBy: 'date',
 5  loading: false,
 6  error: null
 7};
 8
 9function listReducer(state, action) {
10  switch (action.type) {
11    case 'FETCH_START':
12      return { ...state, loading: true, error: null };
13    case 'FETCH_SUCCESS':
14      return { ...state, loading: false, items: action.payload };
15    case 'FETCH_ERROR':
16      return { ...state, loading: false, error: action.payload };
17    case 'SET_FILTER':
18      return { ...state, filter: action.payload };
19    case 'SET_SORT':
20      return { ...state, sortBy: action.payload };
21    default:
22      return state;
23  }
24}
25
26function ItemList() {
27  const [state, dispatch] = useReducer(listReducer, initialState);
28
29  useEffect(() => {
30    dispatch({ type: 'FETCH_START' });
31    fetchItems()
32      .then(items => dispatch({ type: 'FETCH_SUCCESS', payload: items }))
33      .catch(error => dispatch({ type: 'FETCH_ERROR', payload: error }));
34  }, []);
35
36  const filteredItems = filterAndSort(state.items, state.filter, state.sortBy);
37
38  return (
39    <div>
40      <FilterControls
41        filter={state.filter}
42        onFilterChange={f => dispatch({ type: 'SET_FILTER', payload: f })}
43      />
44      <ItemGrid items={filteredItems} />
45    </div>
46  );
47}

5. Component Composition over Props Drilling #

Use composition to avoid deep prop drilling:

 1// Good - Composition
 2function Dashboard({ children }) {
 3  const user = useUser();
 4
 5  return (
 6    <div className="dashboard">
 7      <Sidebar user={user} />
 8      <main>{children}</main>
 9    </div>
10  );
11}
12
13function App() {
14  return (
15    <Dashboard>
16      <UserProfile /> {/* Gets user from context, not props */}
17      <ActivityFeed />
18    </Dashboard>
19  );
20}
21
22// Avoid - Props drilling
23function Dashboard({ user, children }) {
24  return (
25    <div className="dashboard">
26      <Sidebar user={user} />
27      <main>{React.cloneElement(children, { user })}</main>
28    </div>
29  );
30}

6. Avoid Unnecessary useEffect #

React 19 emphasizes reducing useEffect usage:

 1// Bad - Unnecessary effect
 2function SearchResults({ query }) {
 3  const [results, setResults] = useState([]);
 4
 5  useEffect(() => {
 6    setResults(filterResults(data, query));
 7  }, [query, data]);
 8
 9  return <ResultsList results={results} />;
10}
11
12// Good - Direct calculation
13function SearchResults({ query }) {
14  const results = useMemo(() => filterResults(data, query), [query, data]);
15  return <ResultsList results={results} />;
16}
17
18// Better - May not even need useMemo if fast
19function SearchResults({ query }) {
20  const results = filterResults(data, query); // React Compiler handles this
21  return <ResultsList results={results} />;
22}

7. Rules of Hooks (Still Apply) #

1. Only call hooks at the top level - No conditionals, loops, or nested functions
2. Only call hooks from React functions - Components or custom hooks
3. Custom hooks must start with "use" - Naming convention for tooling

 1// Bad - Conditional hook
 2function Component({ shouldFetch }) {
 3  if (shouldFetch) {
 4    const data = useFetch('/api/data'); // ERROR!
 5  }
 6}
 7
 8// Good - Conditional logic inside hook
 9function Component({ shouldFetch }) {
10  const data = useFetch(shouldFetch ? '/api/data' : null);
11}
12
13function useFetch(url) {
14  const [data, setData] = useState(null);
15
16  useEffect(() => {
17    if (!url) return;
18    fetch(url).then(r => r.json()).then(setData);
19  }, [url]);
20
21  return data;
22}

Performance Optimization #

1. React Compiler (Automatic Memoization) #

Revolutionary Change: React 19's compiler eliminates most manual memoization needs.

How It Works:

• Analyzes components at compile-time
• Automatically skips unnecessary re-renders
• Memoizes expensive calculations
• Stabilizes function references

What This Means:

 1// React 18 - Manual memoization needed
 2const ExpensiveComponent = memo(({ data }) => {
 3  const processed = useMemo(() => processData(data), [data]);
 4  const handleClick = useCallback(() => { /* ... */ }, []);
 5
 6  return <div onClick={handleClick}>{processed}</div>;
 7});
 8
 9// React 19 - Compiler handles it automatically
10function ExpensiveComponent({ data }) {
11  const processed = processData(data); // Auto-memoized by compiler
12  const handleClick = () => { /* ... */ }; // Auto-stabilized
13
14  return <div onClick={handleClick}>{processed}</div>;
15}

When Manual Memoization Is Still Needed:

• Third-party libraries requiring memoized values
• Passing functions to React.memo components with strict equality
• Extreme performance-critical sections

2. Concurrent Rendering Features #

React 19 enables concurrent rendering by default, allowing interruptible rendering.

useTransition #

Mark non-urgent updates to keep UI responsive:

 1function SearchPage() {
 2  const [query, setQuery] = useState('');
 3  const [isPending, startTransition] = useTransition();
 4  const [results, setResults] = useState([]);
 5
 6  function handleChange(e) {
 7    const value = e.target.value;
 8    setQuery(value); // Urgent: update input immediately
 9
10    startTransition(() => {
11      // Non-urgent: search can be interrupted
12      setResults(searchData(value));
13    });
14  }
15
16  return (
17    <div>
18      <input value={query} onChange={handleChange} />
19      {isPending && <Spinner />}
20      <ResultsList results={results} />
21    </div>
22  );
23}

useDeferredValue #

Defer expensive updates:

 1function FilteredList({ items, filter }) {
 2  const deferredFilter = useDeferredValue(filter);
 3  const filtered = items.filter(item => item.includes(deferredFilter));
 4
 5  return (
 6    <div>
 7      {filter !== deferredFilter && <Spinner />}
 8      <ul>
 9        {filtered.map(item => <li key={item}>{item}</li>)}
10      </ul>
11    </div>
12  );
13}

3. Suspense for Data Fetching #

Use Suspense to handle loading states declaratively:

 1import { use, Suspense } from 'react';
 2
 3function UserProfile({ userPromise }) {
 4  const user = use(userPromise); // Suspends until loaded
 5  return <div>{user.name}</div>;
 6}
 7
 8function ProfilePage({ userId }) {
 9  const userPromise = fetchUser(userId); // Don't await here
10
11  return (
12    <Suspense fallback={<ProfileSkeleton />}>
13      <UserProfile userPromise={userPromise} />
14    </Suspense>
15  );
16}

Suspense Batching (React 19.2): React 19.2 introduced Suspense batching for server-side rendering, dramatically improving performance by grouping multiple Suspense boundaries.

4. Lazy Loading and Code Splitting #

Split large components to reduce initial bundle:

 1import { lazy, Suspense } from 'react';
 2
 3const AdminPanel = lazy(() => import('./AdminPanel'));
 4const Dashboard = lazy(() => import('./Dashboard'));
 5
 6function App() {
 7  const { isAdmin } = useAuth();
 8
 9  return (
10    <Suspense fallback={<PageSpinner />}>
11      {isAdmin ? <AdminPanel /> : <Dashboard />}
12    </Suspense>
13  );
14}

5. Virtualization for Long Lists #

Don't render thousands of items at once:

 1import { useVirtualizer } from '@tanstack/react-virtual';
 2
 3function VirtualList({ items }) {
 4  const parentRef = useRef();
 5
 6  const virtualizer = useVirtualizer({
 7    count: items.length,
 8    getScrollElement: () => parentRef.current,
 9    estimateSize: () => 50,
10  });
11
12  return (
13    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
14      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
15        {virtualizer.getVirtualItems().map(virtualItem => (
16          <div
17            key={virtualItem.key}
18            style={{
19              position: 'absolute',
20              top: 0,
21              left: 0,
22              width: '100%',
23              height: `${virtualItem.size}px`,
24              transform: `translateY(${virtualItem.start}px)`,
25            }}
26          >
27            {items[virtualItem.index]}
28          </div>
29        ))}
30      </div>
31    </div>
32  );
33}

6. Image Optimization #

Modern image optimization techniques:

 1function OptimizedImage({ src, alt }) {
 2  return (
 3    <picture>
 4      <source
 5        type="image/webp"
 6        srcSet={`${src}.webp 1x, ${src}@2x.webp 2x`}
 7      />
 8      <img
 9        src={src}
10        alt={alt}
11        loading="lazy"
12        decoding="async"
13        width={800}
14        height={600}
15      />
16    </picture>
17  );
18}

7. Resource Preloading #

Use React 19's new preloading APIs:

 1import { preload, prefetchDNS } from 'react-dom';
 2
 3function ProductPage({ productId }) {
 4  // Preload product image as soon as component mounts
 5  useEffect(() => {
 6    preload(`/images/product-${productId}.jpg`, { as: 'image' });
 7    prefetchDNS('https://api.example.com');
 8  }, [productId]);
 9
10  return <Product id={productId} />;
11}

8. Profiling and Monitoring #

Continuous Performance Monitoring:

 1// Use React DevTools Profiler
 2import { Profiler } from 'react';
 3
 4function onRenderCallback(
 5  id, // component identifier
 6  phase, // "mount" or "update"
 7  actualDuration, // time spent rendering
 8  baseDuration, // estimated time without memoization
 9  startTime,
10  commitTime,
11  interactions
12) {
13  // Log or send to analytics
14  analytics.track('component-render', {
15    id,
16    phase,
17    duration: actualDuration
18  });
19}
20
21function App() {
22  return (
23    <Profiler id="App" onRender={onRenderCallback}>
24      <Dashboard />
25    </Profiler>
26  );
27}

Key Recommendations:

• Profile regularly during development
• Set up Real User Monitoring (RUM) for production
• Monitor Core Web Vitals (LCP, FID, CLS)
• Use React DevTools Profiler to identify bottlenecks
• Don't optimize prematurely - measure first

TypeScript Integration Patterns #

1. Component Props Typing #

Function Components:

 1interface UserCardProps {
 2  name: string;
 3  age: number;
 4  email?: string;
 5  onEdit?: () => void;
 6}
 7
 8function UserCard({ name, age, email, onEdit }: UserCardProps) {
 9  return (
10    <div>
11      <h2>{name}</h2>
12      <p>Age: {age}</p>
13      {email && <p>Email: {email}</p>}
14      {onEdit && <button onClick={onEdit}>Edit</button>}
15    </div>
16  );
17}

Extending HTML Element Props:

 1import { ComponentProps } from 'react';
 2
 3// Inherit all button props
 4interface CustomButtonProps extends ComponentProps<'button'> {
 5  variant?: 'primary' | 'secondary';
 6  loading?: boolean;
 7}
 8
 9function CustomButton({ variant = 'primary', loading, children, ...props }: CustomButtonProps) {
10  return (
11    <button
12      {...props}
13      className={`btn btn-${variant}`}
14      disabled={loading || props.disabled}
15    >
16      {loading ? 'Loading...' : children}
17    </button>
18  );
19}

Using ComponentPropsWithRef (React 19):

 1import { ComponentPropsWithRef, forwardRef } from 'react';
 2
 3// React 19 - No forwardRef needed
 4interface InputProps extends ComponentPropsWithRef<'input'> {
 5  label: string;
 6}
 7
 8function Input({ label, ref, ...props }: InputProps) {
 9  return (
10    <div>
11      <label>{label}</label>
12      <input ref={ref} {...props} />
13    </div>
14  );
15}

2. Event Handler Typing #

 1// Specific event types
 2function Form() {
 3  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 4    e.preventDefault();
 5    // Handle submission
 6  };
 7
 8  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 9    console.log(e.target.value);
10  };
11
12  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
13    if (e.key === 'Enter') {
14      // Handle enter
15    }
16  };
17
18  return (
19    <form onSubmit={handleSubmit}>
20      <input onChange={handleInputChange} onKeyDown={handleKeyDown} />
21    </form>
22  );
23}
24
25// Generic handler type
26type ClickHandler = React.MouseEventHandler<HTMLButtonElement>;
27
28const handleClick: ClickHandler = (e) => {
29  console.log(e.currentTarget); // Typed as HTMLButtonElement
30};

Using Handler Types:

1interface ButtonProps {
2  onClick?: React.MouseEventHandler<HTMLButtonElement>;
3  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
4}

3. State and Refs Typing #

 1// State with explicit type
 2const [user, setUser] = useState<User | null>(null);
 3
 4// State with initial value (type inferred)
 5const [count, setCount] = useState(0); // Type: number
 6
 7// Array state
 8const [items, setItems] = useState<Item[]>([]);
 9
10// Complex state
11interface FormState {
12  values: Record<string, string>;
13  errors: Record<string, string>;
14  isSubmitting: boolean;
15}
16
17const [formState, setFormState] = useState<FormState>({
18  values: {},
19  errors: {},
20  isSubmitting: false
21});
22
23// Refs (React 19 requires initial value)
24const inputRef = useRef<HTMLInputElement>(null);
25
26// Ref for mutable value
27const timerRef = useRef<NodeJS.Timeout | null>(null);
28
29useEffect(() => {
30  timerRef.current = setTimeout(() => {
31    // Do something
32  }, 1000);
33
34  return () => {
35    if (timerRef.current) {
36      clearTimeout(timerRef.current);
37    }
38  };
39}, []);

4. Custom Hooks Typing #

 1interface UseUserResult {
 2  user: User | null;
 3  loading: boolean;
 4  error: Error | null;
 5  refetch: () => Promise<void>;
 6}
 7
 8function useUser(userId: string): UseUserResult {
 9  const [user, setUser] = useState<User | null>(null);
10  const [loading, setLoading] = useState(true);
11  const [error, setError] = useState<Error | null>(null);
12
13  const fetchUser = useCallback(async () => {
14    try {
15      setLoading(true);
16      const data = await api.fetchUser(userId);
17      setUser(data);
18      setError(null);
19    } catch (err) {
20      setError(err as Error);
21    } finally {
22      setLoading(false);
23    }
24  }, [userId]);
25
26  useEffect(() => {
27    fetchUser();
28  }, [fetchUser]);
29
30  return { user, loading, error, refetch: fetchUser };
31}

5. Generic Components #

 1interface ListProps<T> {
 2  items: T[];
 3  renderItem: (item: T, index: number) => React.ReactNode;
 4  keyExtractor: (item: T) => string | number;
 5}
 6
 7function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
 8  return (
 9    <ul>
10      {items.map((item, index) => (
11        <li key={keyExtractor(item)}>
12          {renderItem(item, index)}
13        </li>
14      ))}
15    </ul>
16  );
17}
18
19// Usage with type inference
20function UserList() {
21  const users: User[] = [...];
22
23  return (
24    <List
25      items={users}
26      renderItem={(user) => <UserCard user={user} />} // user is typed as User
27      keyExtractor={(user) => user.id}
28    />
29  );
30}

6. Context Typing #

 1interface ThemeContextValue {
 2  theme: 'light' | 'dark';
 3  toggleTheme: () => void;
 4}
 5
 6const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 7
 8function ThemeProvider({ children }: { children: React.ReactNode }) {
 9  const [theme, setTheme] = useState<'light' | 'dark'>('light');
10
11  const toggleTheme = useCallback(() => {
12    setTheme(prev => prev === 'light' ? 'dark' : 'light');
13  }, []);
14
15  const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
16
17  return (
18    <ThemeContext value={value}>
19      {children}
20    </ThemeContext>
21  );
22}
23
24// Custom hook for type-safe context consumption
25function useTheme(): ThemeContextValue {
26  const context = use(ThemeContext);
27  if (!context) {
28    throw new Error('useTheme must be used within ThemeProvider');
29  }
30  return context;
31}

7. Children and ReactNode #

 1// Basic children
 2interface CardProps {
 3  children: React.ReactNode;
 4  title?: string;
 5}
 6
 7// Render prop pattern
 8interface RenderPropProps<T> {
 9  data: T[];
10  render: (item: T) => React.ReactNode;
11}
12
13// Function as children
14interface LoadingWrapperProps {
15  loading: boolean;
16  children: (data: Data) => React.ReactNode;
17}
18
19function LoadingWrapper({ loading, children }: LoadingWrapperProps) {
20  const data = useData();
21
22  if (loading) return <Spinner />;
23  return <>{children(data)}</>;
24}

8. React 19 Specific Types #

 1// useActionState typing
 2type ActionState = {
 3  errors?: Record<string, string>;
 4  success?: boolean;
 5};
 6
 7async function submitAction(
 8  prevState: ActionState,
 9  formData: FormData
10): Promise<ActionState> {
11  // Implementation
12  return { success: true };
13}
14
15function Form() {
16  const [state, action] = useActionState(submitAction, {});
17
18  return (
19    <form action={action}>
20      {/* Form fields */}
21    </form>
22  );
23}
24
25// useOptimistic typing
26interface Todo {
27  id: number;
28  title: string;
29  sending?: boolean;
30}
31
32function TodoList({ todos }: { todos: Todo[] }) {
33  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
34    todos,
35    (state: Todo[], newTodo: Todo): Todo[] => [...state, newTodo]
36  );
37
38  return <ul>{/* Render todos */}</ul>;
39}

TypeScript Configuration #

Recommended tsconfig.json:

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "lib": ["ES2020", "DOM", "DOM.Iterable"],
 5    "jsx": "react-jsx",
 6    "module": "ESNext",
 7    "moduleResolution": "bundler",
 8    "strict": true,
 9    "noUnusedLocals": true,
10    "noUnusedParameters": true,
11    "noFallthroughCasesInSwitch": true,
12    "allowSyntheticDefaultImports": true,
13    "esModuleInterop": true,
14    "skipLibCheck": true,
15    "forceConsistentCasingInFileNames": true,
16    "resolveJsonModule": true,
17    "isolatedModules": true,
18    "paths": {
19      "@/*": ["./src/*"]
20    }
21  },
22  "include": ["src"],
23  "exclude": ["node_modules", "dist"]
24}

Testing React Components #

1. Vitest + React Testing Library Setup #

Why Vitest?

• Lightning-fast execution (uses Vite/esbuild)
• Native ESM and TypeScript support
• No complex configuration needed
• Modern UI dashboard
• Drop-in replacement for Jest

Installation:

1npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event @vitest/coverage-v8

Configuration (vite.config.ts):

 1import { defineConfig } from 'vitest/config';
 2import react from '@vitejs/plugin-react';
 3
 4export default defineConfig({
 5  plugins: [react()],
 6  test: {
 7    environment: 'jsdom',
 8    globals: true,
 9    setupFiles: './src/test/setup.ts',
10    coverage: {
11      provider: 'v8',
12      reporter: ['text', 'json', 'html'],
13      exclude: [
14        'node_modules/',
15        'src/test/',
16      ]
17    }
18  }
19});

Setup File (src/test/setup.ts):

1import { cleanup } from '@testing-library/react';
2import { afterEach } from 'vitest';
3import '@testing-library/jest-dom';
4
5// Cleanup after each test
6afterEach(() => {
7  cleanup();
8});

Package Scripts:

1{
2  "scripts": {
3    "test": "vitest",
4    "test:ui": "vitest --ui",
5    "test:coverage": "vitest --coverage"
6  }
7}

2. Testing Best Practices #

Test User Behavior, Not Implementation:

 1import { render, screen } from '@testing-library/react';
 2import { userEvent } from '@testing-library/user-event';
 3import { describe, it, expect, vi } from 'vitest';
 4
 5// Good - Tests behavior
 6describe('LoginForm', () => {
 7  it('submits form with username and password', async () => {
 8    const user = userEvent.setup();
 9    const onSubmit = vi.fn();
10
11    render(<LoginForm onSubmit={onSubmit} />);
12
13    await user.type(screen.getByLabelText(/username/i), 'testuser');
14    await user.type(screen.getByLabelText(/password/i), 'password123');
15    await user.click(screen.getByRole('button', { name: /log in/i }));
16
17    expect(onSubmit).toHaveBeenCalledWith({
18      username: 'testuser',
19      password: 'password123'
20    });
21  });
22
23  it('shows error when username is empty', async () => {
24    const user = userEvent.setup();
25
26    render(<LoginForm onSubmit={vi.fn()} />);
27
28    await user.click(screen.getByRole('button', { name: /log in/i }));
29
30    expect(screen.getByText(/username is required/i)).toBeInTheDocument();
31  });
32});
33
34// Avoid - Tests implementation details
35describe('LoginForm', () => {
36  it('updates state when input changes', () => {
37    const { container } = render(<LoginForm />);
38    const input = container.querySelector('.username-input'); // Bad: implementation detail
39
40    fireEvent.change(input, { target: { value: 'test' } }); // Bad: fireEvent instead of userEvent
41
42    expect(input.value).toBe('test'); // Bad: testing state directly
43  });
44});

3. Testing Async Components #

With Suspense and use():