TypeScript Best Practices for React Applications

TypeScript has become an essential tool for building robust React applications. Here are the best practices I've learned from years of TypeScript development.

Component Props Typing

Always define clear interfaces for your component props:

interface ButtonProps {

children: React.ReactNode;

variant?: 'primary' | 'secondary';

onClick?: () => void;

disabled?: boolean;

}

const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', onClick, disabled }) => {

return (

<button

className={`btn btn-${variant}`}

onClick={onClick}

disabled={disabled}

{children}

</button>

);

};

State Management

Use proper typing for useState hooks:

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

const [loading, setLoading] = useState<boolean>(false);

const [errors, setErrors] = useState<string[]>([]);

Event Handlers

Type your event handlers correctly:

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {

e.preventDefault();

// Handle form submission

};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

setValue(e.target.value);

};

Custom Hooks

Create reusable, well-typed custom hooks:

function useApi<T>(url: string): {

data: T | null;

loading: boolean;

error: string | null;

} {

const [data, setData] = useState<T | null>(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

// Fetch data logic

}, [url]);

return { data, loading, error };

}

Conclusion