5 most common mistakes when using TypeScript with React

We all learn by studying and doing. As the saying goes, "doing and learning" is key to mastering any skill. After working with React and TypeScript for several years, I've certainly learned a lot. However, developers often make common mistakes when using these technologies together. Here are the five most common mistakes I've encountered:

1. Improper typing of props

• Mistake: Not properly typing props, either by using any or not using interfaces/types at all.
• Solution: Always define prop types using TypeScript's interface or type. This helps catch errors early and provides better documentation.

interface MyComponentProps {
  title: string;
  count: number;
}

export default function MyComponent({ title, count }: MyComponentProps) {
 ... 

2. Using "any" type with every breath

• Mistake: Overusing the "any" type to bypass TypeScript's type-checking, which defeats the purpose of using TypeScript.
• Solution: Use specific types or generics whenever possible. If the type is unknown, consider using unknown or refining the type through type guards.

// Avoid
const handleEvent = (event: any) => {

// Prefer
const handleEvent = (event: MouseEvent<HTMLButtonElement>) => {

3. Ignoring Type safety with libraries

• Mistake: Failing to properly type external libraries or third-party components, which can lead to runtime errors.
• Solution: Utilize DefinitelyTyped (@types/ packages) for type definitions of popular libraries. If a library lacks type definitions, create custom types or use module augmentation.

// Install type definitions
npm install @types/lodash

// Import with types
import _ from 'lodash';

4. Incorrect handling of state and effects

• Mistake: Incorrectly typing state and effects, leading to issues with state updates and dependency arrays in useEffect.
• Solution: Properly type state with useState, and ensure useEffect dependencies are correctly specified.

// State typing
const [count, setCount] = useState<number>(0);

// Effect with dependency array
useEffect(() => {
...
}, [count]); 

5. Not leveraging type inference

• Mistake: Manually typing everything even when TypeScript can infer types automatically. This is redundant and verbose code.
• Solution: Easy... allow TypeScript to infer types where appropriate to keep the code clean and concise.

// Overly verbose
const add = (a: number, b: number): number => {
  return a + b;
};

// Leveraging type inference
const add = (a: number, b: number) => {
  return a + b; 
};

These are not the only but perhaps the most common mistakes I stop doing as a React/TypeScript developer.
There is still a lot to learn to continue writing more robust, maintainable, and error-free code (if that exist).