5 Common TypeScript Mistakes in React (And How to Fix Them) TypeScript has become the de facto standard for React development, and for good reason: it catches bugs at compile time, improves IDE support, and makes refactoring less terrifying. But here's the thing—adopting TypeScript doesn't automatically mean you're writing type-safe code. After reviewing dozens of React codebases, I've noticed the same TypeScript mistakes popping up over and over. These aren't obscure edge cases; they're patterns that undermine the very benefits TypeScript promises to deliver. Let's walk through the five most common mistakes and, more importantly, how to fix them. Mistake #1: Overusing any (The Type Safety Killer) The any type is TypeScript's "I give up" button. It turns off type checking entirely, effectively creating a hole in your type system. The Problem // ❌ Bad: any defeats the purpose of TypeScript const fetchUserData = async (id: string): Promise => const response = await fetch(`/api/users/$id`); return response.json(); ; const UserProfile = ( userId : userId: string ) => const [user, setUser] = useState(null); useEffect(() => fetchUserData(userId).then(setUser); , [userId]); // TypeScript won't catch typos here return

user?.nane

; // Oops, typo! ; The Fix Use proper types. If you don't know the shape yet, use unknown and narrow it down. // ✅ Better: Define proper types interface User id: string; name: string; email: string; avatar?: string; const fetchUserData = async (id: string): Promise => const response = await fetch(`/api/users/$id`); if (!response.ok) throw new Error('Failed to fetch user'); return response.json() as Promise; ; const UserProfile = ( userId : userId: string ) => null>(null); useEffect(() => fetchUserData(userId) .then(setUser) .catch(setError); , [userId]); if (error) return

Error loading user

; if (!user) return

Loading...

; return

user.name

; // TypeScript catches typos now ; Real-world scenario: A team inherited a codebase with any everywhere. After spending two weeks defining proper types, they discovered 47 bugs that TypeScript had been hiding—including API response mismatches and null reference errors. Mistake #2: Skipping Runtime Validation for External Data Here's a hard truth: TypeScript types don't exist at runtime. They vanish during compilation. This means API responses, form inputs, and URL parameters can still contain unexpected data. The Problem // ❌ Bad: Trusting API data implicitly interface Product id: string; price: number; inStock: boolean; const ProductList = () => const [products, setProducts] = useState([]); useEffect(() => fetch('/api/products') .then(res => res.json()) .then(setProducts); // What if price is a string? , []); return (

products.map(p => (
• $p.price.toFixed(2) /* Runtime error if price is a string! */
))

); ; The Fix Use a validation library like Zod to verify data at runtime. // ✅ Better: Validate at runtime with Zod import z from 'zod'; const ProductSchema = z.object( id: z.string(), price: z.number().positive(), inStock: z.boolean(), ); type Product = z.infer; const ProductList = () => null>(null); useEffect(() => fetch('/api/products') .then(res => res.json()) .then(data => // Validate before using const validated = z.array(ProductSchema).parse(data); setProducts(validated); ) .catch(err => console.error('Validation failed:', err); setError('Invalid product data received'); ); , []); if (error) return

error

; return (

products.map(p => (
• $p.price.toFixed(2) /* Safe: we know price is a number */
))

); ; Real-world scenario: An e-commerce site crashed on Black Friday because the inventory API started returning prices as strings like "19.99" instead of numbers. Runtime validation would have caught this immediately instead of crashing the checkout flow. Mistake #3: Embedding API Calls in Components Mixing data fetching directly into UI components creates a tangled mess that's hard to