5 Tiny React + TypeScript Habits That Prevent Big Bugs

If you are learning React with TypeScript, bugs can feel random.

The good news: a few small habits can remove many common mistakes.

In this post, I will share 5 tiny habits I use in real projects.

---

1) Type your props clearly

When props are any, wrong values can pass silently.

type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean;
};

export function Button({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button disabled={disabled} onClick={onClick}>
      {label}
    </button>
  );
}

This gives instant feedback if you pass the wrong prop.

2) Avoid any for API data

Use a type for response data, even if it is small.

type User = {
  id: number;
  name: string;
  email: string;
};

Now your editor helps you when reading user.name or user.email.

3) Handle loading and error states first

Many UI bugs happen because we only think about "success" state.

A simple rule:

• Start with loading
• Add error
• Then render the data

Your app becomes more stable and user-friendly.

4) Use small reusable helpers

If you copy the same logic 2–3 times, make a small helper.

This reduces bugs because fixes happen in one place.

5) Add one simple test for critical behavior

You do not need 100 tests to get value.

With vitest, even one test for an important function can catch regressions early.

---

Final thought

Good code quality is usually not about one big trick.
It is about small habits repeated every day.

If you are a beginner, start with one habit today.
Then add one more next week. Your future self will thank you.