Beginner mistakes I made while learning React

Introduction

React JS (commonly referred to as React) is an open-source JavaScript library developed and maintained by Facebook (now Meta). It is mainly used for building user interfaces, especially single-page applications.

Unlike full frameworks like Angular, React focuses only on the view layer, which makes it flexible and easy to integrate with other tools and libraries.

Key Characteristics of React

Component-Based Architecture
React applications are built using small, reusable components that return UI.

Declarative Approach
You describe what the UI should look like, and React handles how to update the DOM.

Virtual DOM
React uses a lightweight copy of the real DOM to optimize rendering and improve performance.

Unidirectional Data Flow
Data flows from parent components to child components, making apps easier to debug.

JSX Syntax
JSX allows you to write HTML-like code inside JavaScript.

The Main Problem I Faced

When I started learning React, I jumped directly into React without fully understanding JavaScript.

At first, I thought React itself was difficult. But later, I realized the real problem was my weak JavaScript fundamentals. React heavily depends on JavaScript concepts, and without them, everything feels confusing.

This mistake made my learning process slower and more frustrating than it needed to be.

That’s why I’m writing this post—to help other beginners avoid the same mistakes.

Beginner Mistakes I Made While Learning React

1. Skipping JavaScript Fundamentals ❌

This was my biggest mistake.

React uses many JavaScript concepts such as:

• map, filter, reduce
• Arrow functions
• Destructuring
• Spread operator
• this, closures, and scope

Without understanding these, React code looks scary.

Example:

const users = ["Alex", "John", "Sam"];

users.map(user => <li>{user}</li>);

If you don’t understand map(), this line will confuse you.

✅ Lesson:
Before learning React, make sure you are comfortable with core JavaScript.

2. Not Understanding Components Properly

Initially, I treated components like normal HTML files.

In reality, components are functions that return UI.

Example:

function Welcome() {
  return <h1>Hello, World!</h1>;
}

Components:

• Should be small
• Should do one thing
• Should be reusable

✅ Lesson:
Think of components as building blocks, not pages.

3. Confusing Props and State

At first, I didn’t understand the difference between props and state.

Props → Data passed from parent to child (read-only)

State → Data managed inside a component (can change)

Example:

function Greeting({ name }) {
  return <h2>Hello, {name}</h2>;
}

Here, name is a prop.

✅ Lesson:
Understand when to use props and when to use state.

4. Forgetting to Use Keys in Lists

When rendering lists, I often forgot to add key, which caused warnings.

Wrong:

items.map(item => <li>{item}</li>);

Correct:

items.map(item => <li key={item}>{item}</li>);

Keys help React identify which items have changed.

✅ Lesson:
Always use unique keys when rendering lists.

5. Misusing useEffect Hook

I used useEffect without understanding dependencies, which caused unnecessary re-renders.

Example:

useEffect(() => {
  fetchData();
}, []);

The empty array means this effect runs only once.

✅ Lesson:
Learn how dependency arrays work before using useEffect.

6. Mutating State Directly

At first, I modified state directly, which didn’t update the UI.

Wrong:

state.count = state.count + 1;

Correct:

setCount(count + 1);

React updates the UI only when state is updated immutably.

✅ Lesson:
Never mutate state directly.

Why I Wrote This Post

I wrote this post because these mistakes made my React learning journey harder than it needed to be.

If you are a beginner and feeling stuck with React, chances are the problem isn’t React—it’s the basics you skipped.

Final Thoughts

React is a powerful and beginner-friendly library if you learn it the right way.

My advice to beginners:

• Learn JavaScript fundamentals first
• Build small projects
• Make mistakes and learn from them
• Don’t rush the process

💬 I’d love to hear from you!

What mistakes did you make while learning React?
Feel free to comment, share your experience, or ask questions below.