Forem: Chirag Surendra

The JavaScript Basics I’m Glad I Learned Before Going Back to React

Chirag Surendra — Fri, 26 Dec 2025 14:57:12 +0000

In my last blog, I talked about the mistakes I made while learning React—especially how skipping JavaScript fundamentals made everything harder.
This time, I want to share what I did differently when I decided to learn JavaScript properly.
And trust me, this decision changed everything.

My First (Funny) JavaScript Misunderstanding 😅

When I first heard about JavaScript, I honestly thought:

“Java and JavaScript are probably the same… just add script at the end.”

Yeah. Big mistake 😄
Turns out, Java and JavaScript are completely different languages. Different use cases, different syntax, different worlds.

Once I got past that assumption, I decided:

This time, I won’t rush. I’ll start from the absolute basics.

Everything in JavaScript Happens Inside an Execution Context 🧠

One of the first (and most important) concepts I learned was the Execution Context.

Think of it like a sealed container where JavaScript runs your code.

This container holds:

Information about variables
Functions
The order in which code is executed

Every time JavaScript runs a program, it creates an execution context.

What’s Inside the Execution Context?

The execution context has two main components:

1️⃣ Memory Component (Variable Environment)

Stores variables and functions
Keeps them in key-value pairs
Variables are initially stored as undefined

2️⃣ Code Component (Thread of Execution)

Executes code one line at a time
Follows a strict order

Because of this, JavaScript is:

Synchronous → One command at a time
Single-threaded → Executes code in a specific sequence

JavaScript Runs in Two Phases ⚙️

Whenever a JS program runs, the execution context is created in two phases:

Phase 1: Memory Creation Phase

Memory is allocated to all variables and functions
Variables get undefined
Functions get stored entirely in memory

Phase 2: Code Execution Phase

Code is executed line by line
Actual values are assigned
Functions are invoked

Let’s Understand This with a Simple Example 👇

var n = 2;

function square(num) {
  var ans = num * num;
  return ans;
}

var square2 = square(n);
var square4 = square(4);

🧠 Memory Creation Phase

JavaScript first scans the whole code and allocates memory:

n → undefined
square → function definition
square2 → undefined
square4 → undefined

Nothing is executed yet.

▶️ Code Execution Phase

Now JavaScript starts executing:

n gets the value 2
Function square is skipped for now
When square(n) is called:
A new execution context is created
Memory is allocated for num and ans
num = 2, ans = 4
return ans sends control back

Same steps repeat for square(4).

Once everything finishes, the global execution context is destroyed.

Call Stack: The Manager Behind the Scenes 📚

So how does JavaScript keep track of all this?

👉 With the Call Stack

It keeps track of execution contexts
Follows Last In, First Out (LIFO)
When a function finishes, its execution context is removed

The call stack is also known as:

Execution Context Stack
Program Stack
Runtime Stack

Why This Matters (Especially for React) 💡

When I finally understood:

Execution context
Memory allocation
Call stack

Things like this started making sense:

Hoisting
Closures
useEffect
State updates
Unexpected behavior in React

React didn’t feel “magical” anymore—it felt logical.

Final Thoughts 🙌

This time, I didn’t rush into React.

I slowed down.
I respected JavaScript.
I learned how it actually works behind the scenes.

And honestly?
That made me a much better React learner.

If you’re about to start React, or feeling stuck:
Don’t skip JavaScript fundamentals.
They’re not optional—they’re the foundation.

Beginner mistakes I made while learning React

Chirag Surendra — Sat, 20 Dec 2025 07:50:12 +0000

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.