10 Common Mistakes React Beginners Make (And How to Avoid Them)

When I first started learning React, I ran into several common pitfalls that caused unexpected issues in my projects. Whether you’re just beginning your React journey or refreshing your basics, I’ve compiled a guide — or should call it a summary of the mistakes I made — to help you avoid these common errors.

1. Is Your Vite Environment Properly Configured?

Before you start coding, make sure your Vite setup is correctly configured and that you’re using the latest version. An outdated or incorrect configuration can cause issues from the get-go.

2. Did You Remember to Add the Return Statement?

If you forget to add the return keyword in your functional components, your JSX won’t render. Always ensure your component returns the correct JSX.

const Component = () => {
  return <div>Don't forget to return.</div>;
};

3. Did You Wrap Multiple Lines of JSX in a return() Statement?

In React, if your return statement has only one line of JSX, you don’t need the wrapper parentheses. However, if you have multiple lines, you’ll need to wrap them in parentheses. Or sometimes you will need a React fragment(<></>) when you don’t want to introduce an extra div or container element.

return (
  <>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </>
);

4. Using the Right Attribute for CSS Classes: className Instead of class

In React, you can’t use the standard class attribute for applying CSS classes. Instead, use className.

<div className="container">Content goes here</div>;

5. Are Your Props and Attribute Names Consistent?

Ensure that the prop names you pass match the attributes you define in your components. React is case-sensitive, so any mismatch can break the flow.

<Note title="React Basics" />

function Note(props) {
  return <h1>{props.title}</h1>;
}

6. Inline Styles: Remember to Use CamelCase

When applying inline styles in JSX, switch from the traditional kebab-case (e.g., font-size) to camelCase (e.g., fontSize).

const style = {
  backgroundColor: "blue",
  fontSize: "20px"
};

7. Did You Remember to import and export Correctly?

Forget to export or import a component, and your app won’t run. Check if your function is being imported correctly based on how it’s exported:

Named export:

export const HomePageBanner = () => {}
// Import it like this:
import { HomePageBanner } from './HomePageBanner';

Default export:

function HomePageBanner() {};
// Import it like this -programmers have to come up with a name for it:
import HomePageBanner from './HomePageBanner';

8. Are You Using import * Correctly to Create an Alias?

When importing all exported items from a file, use as to create an alias. This allows you to reference functions or variables from that file.

import * as calculation from "./calculation";
const result = calculation.add(5, 3);

9. Did you adjust the import paths after moving files?

Always double-check if the import from paths need updating when you move files within your project structure.

10. Did you use double curly braces when embedding a CSS object in React’s JSX?

When inserting JavaScript expressions inside JSX that involve a CSS object, remember the double curly braces:

a) Insert JavaScript expressions in JSX

b) Create an object literal inside the JavaScript expression

<h1 className="heading" style={{ color: "red" }}>
  {greetings}
</h1>