DEV Community: Megalraja

React Props: How Do Components Share Data With Each Other?

Megalraja — Wed, 04 Nov 2026 17:20:09 +0000

Imagine you're building an e-commerce application.

You have one Product component, but you need to display different products:

Laptop – ₹50,000
Mobile – ₹20,000
Headphones – ₹2,000

Would you create three separate components for these products?

Not necessary!

React provides something called Props (Properties) that allows you to reuse the same component with different data.

1. What are Props?

Props are a way to pass data from a parent component to a child component.

Think of a component as a function. Props act like the function's parameters.

Let's understand with an example.

Parent Component

function App() {
    return (
        <div>
            <Product name="Laptop" price={50000} />
            <Product name="Mobile" price={20000} />
            <Product name="Headphones" price={2000} />
        </div>
    );
}

Here, we're passing different values to the same Product component.

Child Component

function Product(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>Price: ₹{props.price}</p>
        </div>
    );
}

The child component receives the values through the props object.

Output

Laptop
Price: ₹50000

Mobile
Price: ₹20000

Headphones
Price: ₹2000

Notice something?

We created only one component but reused it three times with different data.

That's the power of props!

2. How do Props work internally?
When a parent component passes data to a child component, React makes that data available through the child's props.

For example:

<Product name="Laptop" price={50000} />

The child receives an object conceptually like this:

{
    name: "Laptop",
    price: 50000
}

You can access these values using:

props.name
props.price

3. Props Destructuring

Instead of writing props.name and props.price repeatedly, we can use destructuring.

function Product({ name, price }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>Price: ₹{price}</p>
        </div>
    );
}

Both approaches work the same way.

4. Important Rules About Props

Props are passed from parent to child.

Props can contain strings, numbers, arrays, objects and functions.

Props are read-only.

A child component should not directly modify its props.

Different component instances can receive different props.

5. When do developers use Props?

Real-world examples:

Passing product information to product cards.

Passing user information to profile components.

Passing data to reusable table components.

Passing event handler functions to child components.

Passing configuration values to reusable UI components.

Final Thoughts :

Props make React components reusable and help us build applications with smaller, independent components.

Instead of writing the same UI repeatedly, create one reusable component and provide different data through props.

*Write once. Reuse everywhere. That's the idea behind React Props! *

I used to think React updates the entire page whenever the state changes. But that's not exactly how it works.

Megalraja — Wed, 04 Nov 2026 14:22:10 +0000

When I started learning React, I came across something called useState().

At first, I only knew how to use it.

For example:

const [count, setCount] = useState(0);

Click a button, increase the count, and React updates the screen.

Pretty simple, right?

But then I started wondering...

What actually happens when I call setCount()?

I learned that React doesn't reload the entire webpage.

Instead, something interesting happens:

React receives the state update.

The component runs again with the new state.

React compares the previous UI with the new UI.

It updates the necessary parts of the actual DOM.

For example, if only the counter value changes, React doesn't need to recreate the entire page.

That made me understand one important thing:

Learning React isn't just about knowing components, props, and hooks.

It's also about understanding what React does behind the scenes.

I'm still exploring these concepts, and honestly, every small discovery makes React more interesting.

React useState Hook – How React Updates the UI

Megalraja — Wed, 04 Nov 2026 14:12:44 +0000

When I started learning React, I had a small doubt.

Why doesn't React update the UI when I change a normal JavaScript variable?

In JavaScript, we can easily change a variable:

let count = 0;

count++;
console.log(count); // 1

But in React, changing a normal variable doesn't update the screen.

So, how do we update the UI?

That's where useState comes in.

What is useState?

useState is a React Hook that allows us to store data and update the UI when that data changes.

Let's see a simple example.

My first example: Counter

import { useState } from 'react';

function Counter() {

    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>

            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

export default Counter;

Here:

useState(0) sets the initial value to 0.
count holds the current value.
setCount updates the state.

When we click the button, setCount requests a state update.

React renders the component again and displays the updated value.

Simple, right?

Why not use a normal variable?

Let's try this:

function Counter() {

    let count = 0;

    return (
        <div>
            <h1>{count}</h1>

            <button onClick={() => count++}>
                Increment
            </button>
        </div>
    );
}

The value changes in JavaScript, but the UI doesn't update.

Why?

Because React doesn't know that the normal variable has changed.

That's why we use useState.

Can we store different values?

Yes! We can use useState with different data types.

const [name, setName] = useState("Raja");

const [age, setAge] = useState(21);

const [isLogin, setIsLogin] = useState(false);

const [skills, setSkills] = useState(["Java", "React"]);

const [user, setUser] = useState({
    name: "Raja",
    age: 21
});

We can use it for forms, todo lists, login pages, and many other applications.

One more thing: Previous state

We can update state using its previous value.

setCount(prev => prev + 1);

Here, prev represents the previous state value.

This is useful when our next state depends on the previous state.

What I learned

After practising useState, I understood three important things:

Normal variables don't trigger React renders.
useState helps React remember values between renders.
Updating state causes React to render the component again.

Initially, I thought useState was just another way to declare variables.

But now I understand why it's important in React.

Learning React is easier when we understand why something is used instead of just memorizing its syntax.

JavaScript Closures Explained with a Real-World Example

Megalraja — Sat, 24 Oct 2026 15:50:47 +0000

Have you ever wondered how a function can remember variables even after the outer function has finished executing?

That's the magic of Closures in JavaScript!

** What is a Closure?**

A closure is created when a function remembers and can access variables from its outer lexical scope, even after the outer function has finished executing.

Real-World Example: Bank Account

Imagine creating a bank account. You want to deposit money and check the balance, but you don't want anyone to modify the balance directly.

function bankAccount() {
    let balance = 1000;

    return {
        deposit(amount) {
            balance += amount;
            return balance;
        },

        getBalance() {
            return balance;
        }
    };
}

const account = bankAccount();

console.log(account.getBalance()); // 1000
console.log(account.deposit(500)); // 1500
console.log(account.getBalance()); // 1500

console.log(account.balance); // undefined

How Does It Work?

bankAccount() creates a local variable called balance.

The function returns two inner functions: deposit() and getBalance().

Even after bankAccount() finishes executing, those functions retain access to balance.

The variable stays accessible through the returned functions without being directly exposed.

That's a closure! The inner functions remember the environment in which they were created.

Why Are Closures Important?

Closures are useful for:

Data privacy and encapsulation
Callbacks and event handlers
Function factories
Maintaining state between function calls
Understanding hooks and other JavaScript patterns

** Key Takeaway**

A closure is not simply a function inside another function. It's a function together with access to its surrounding lexical environment.

Once you understand closures, many JavaScript concepts become easier to understand!

Question for developers: Where have you used closures in your projects?

JavaScript Truthy and Falsy Values

Megalraja — Tue, 13 Oct 2026 06:08:27 +0000

Ever wondered why some values behave like true and others behave like false in JavaScript, even when they aren't actually booleans?

Let's make it simple!

What are Truthy and Falsy Values?

JavaScript evaluates values as either truthy or falsy when they are used in a Boolean context, such as an if condition.

if ("Hello") {
    console.log("This is truthy!");
}

Output:

This is truthy!

Wait, "Hello" isn't true. So why does the condition execute?

Because non-empty strings are truthy in JavaScript!

Truthy Values

These values behave like true in a condition:

if ("JavaScript") console.log("String is truthy");
if (100) console.log("Number is truthy");
if ([]) console.log("Empty array is truthy");
if ({}) console.log("Empty object is truthy");

Yep! Even an empty array [] and an empty object {} are truthy.

Falsy Values

JavaScript has only a few falsy values:

if (false) console.log("Hello");
if (0) console.log("Hello");
if ("") console.log("Hello");
if (null) console.log("Hello");
if (undefined) console.log("Hello");
if (NaN) console.log("Hello");

Nothing gets printed because every condition is falsy.

Other falsy values include -0 and 0n (BigInt zero).

Let's Test Your Understanding!

What do you think this code prints?

let cart = [];

if (cart) {
    console.log("Cart has items!");
} else {
    console.log("Cart is empty!");
}

Answer: Cart has items!

Why? Because an empty array is truthy, even though it contains no elements.

If you want to check whether the cart actually has items, use:

if (cart.length > 0) {
    console.log("Cart has items!");
} else {
    console.log("Cart is empty!");
}

Remember This

Truthy → Behaves like true in a condition.
[] and {} → Truthy!

Falsy → Behaves like false in a condition.
0, "", null, undefined, false, and NaN → Falsy!

Understanding truthy and falsy values helps us write cleaner conditions and avoid unexpected bugs.

Your turn!

What will this print?

console.log(Boolean("0"));
console.log(Boolean("false"));
console.log(Boolean(0));

Drop your answer in the comments before checking it in the console!

Understanding Fetch API and Promises in JavaScript.

Megalraja — Wed, 07 Oct 2026 15:12:26 +0000

Fetch API & Promises — Imagine Ordering Food

Learning fetch() and Promises can feel confusing at first.

So let's forget code for a minute and imagine you're ordering pizza.

You place an order:

fetch("pizza-api.com/order");

You don't get the pizza immediately.

The restaurant says:

"Don't worry, your order is being prepared. I'll let you know when it's ready."

That's basically a Promise.

Promise

A Promise represents something that will have a result in the future.

It can be:

Pending     → Pizza is being prepared
Fulfilled  → Pizza is ready
Rejected   → Sorry, we're out of pizza

`.then()`

When the pizza arrives, you can do something with it:

fetch("pizza-api.com/order")
    .then(response => response.json())
    .then(data => {
        console.log("Pizza arrived!", data);
    });

Think of .then() as:

"When you get the result, do this."

`.catch()`

But what if the restaurant says:

"Sorry, something went wrong with your order."

That's where .catch() comes in:

fetch("pizza-api.com/order")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("Order failed!", error));

So what's actually happening?

You
 ↓
fetch() 
 ↓
Promise 
 ↓
.then() → "Pizza arrived!" 
 ↓
.catch() → "Something went wrong!"

And there's one more interesting thing:

response.json()

also returns a Promise.

Promise → "Wait, I'll get back to you."

That's why we use another .then() after it.

The easiest way I remember it:

fetch() → Place the order
.then() → "Great! Here's what to do with the result."

.catch() → "Oops, something went wrong."

Once I started thinking about Promises this way, fetch() and asynchronous JavaScript became much less confusing.

Sometimes the best way to learn programming isn't more code — it's finding the right analogy.

Understanding Callback Function in JavaScript

Megalraja — Tue, 06 Oct 2026 05:38:39 +0000

while learning javascript, I came across a concept called a callback funtion.

At first, the name sounds complicated. But the idea is actually pretty simple.

What is a callback function?

A callback function is a function passed into another function as an argument, which can be called later.

for example:

function greet(name) {
    console.log("Hello " + name);
}

function processUser(callback) {
    callback("Alex");
}

processUser(greet);

Here, greet is passed to processUser as an argument.

Inside processUser, we call:

callback("Alex");

So greet() gets executed.

Why do we use Callbacks?

Callbacks are useful when we want one function to run another function after something happens.

or example:

function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

calculate(10, 20, function(result) {
    console.log(result);
});

Output:

30

The callback receives the result after the calculation is completed.

Callbacks are especially important in JavaScript because they are commonly used with events, timers, and asynchronous operations.

Simple way to remember
Function → Does the work
Callback → Function passed to another function
callback() → Executes the passed function

JavaScript Arrays — More Than Just a List

Megalraja — Mon, 05 Oct 2026 05:47:13 +0000

When I started learning JavaScript, one thing I kept seeing everywhere was arrays.

But the simple question is: Why do we even need them?

Imagine storing the names of three students:

let student1 = "Arun";
let student2 = "Bala";
let student3 = "Kiran";

This works, but imagine having 100 students.

That's where an array becomes useful:

let students = ["Arun", "Bala", "Kiran"];

Now all the names are stored together, and we can access them using their index:

console.log(students[0]); // Arun
console.log(students[2]); // Kiran

Arrays are Objects in JavaScript

Here's an interesting part:

let numbers = [10, 20, 30];

console.log(typeof numbers);
// "object"

That's because an array is a special type of object in JavaScript.

But arrays are designed specifically for ordered data, which is why we get features like indexes and methods such as push() and pop().

Heterogeneous Data

Another interesting thing about JavaScript arrays is that they can hold different types of values:

let data = [10, "Hello", true, 25.5, null];

This is called a heterogeneous array because different data types can exist in the same array.

We can also easily add or remove elements:

students.push("David"); // Add
students.pop();         // Remove

So, the basic idea is:

Array → Special type of object

Purpose → Store ordered collections of values

Index → Access a particular value

Heterogeneous → Different data types can exist together

push() → Add an element

pop() → Remove an element

Arrays look simple at first, but understanding why they're objects and how they're different from normal objects makes the JavaScript data-type concept much clearer.

What surprised you most about JavaScript arrays?

JavaScript Loops: why we use them - the first 3 types

Megalraja — Fri, 02 Oct 2026 06:16:47 +0000

while learning javascript I came across loops

but before learning different types of loops, I want understand one question - why do we use loops?

Why do we use loops?

Loops allow us to repeat a block of code without rewrite same code again and again.

For example , without loop:

 console.log(1);
 console.log(2);
 console.log(3);
 console.log(4);
 console.log(5);

with loop:

for(let i=1;i<=5;i++){
       console.log(i);
}

The loop becomes especially useful when working with large amounts of data, such as arrays.

Types of loop:

1.for loop:
A for loop is useful when you know how many times you want to repeat something.

for (let i = 1; i <= 5; i++) {
   console.log(i); 
}

2.while loop:

A while loop checks the condition before executing the code.

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

If the condition is false from the beginning, the loop won't execute.

3. do...while Loop

A do...while loop executes the code first and checks the condition afterward.

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

This means it will execute at least once.

Quick way to remember

for - repeat with initialization, condition & update
while - check → execute
do...while - execute → check

The key difference:

while can execute zero times, but do...while executes at least once.

CRUD Operations with JavaScript Objects

Megalraja — Wed, 30 Sep 2026 14:57:57 +0000

While learning JavaScript objects, I practiced a simple concept that appears everywhere in software development: CRUD.

CRUD stands for:

Create → Add data
Read → Access data
Update → Change data
Delete → Remove data

Let's use a vehicle object as an example.

const vehicle = {
    model: "KTM 350",
    price: 200000,
    fuelType: "Fuel",
    cc: 350,
    drive: function() { 
    console.log("Speed: 150 km/h"); 
    } 
};

1.Create

Add a new property:

vehicle.gear = 6;

2.Read

Access existing data:

console.log(vehicle.model);
console.log(vehicle.price);

We can also call a method:

vehicle.drive();

3.Update

Change an existing value:

vehicle.price = 210000;

4.Delete

Remove a property:Use delete key word

delete vehicle.cc;

Now the cc property no longer exists.

The basic idea

Create → vehicle.gear = 6
Read → vehicle.model
Update → vehicle.price = 210000
Delete → delete vehicle.cc

This simple example helped me understand that CRUD isn't only related to databases or APIs.

The same four operations can be practiced directly with JavaScript objects.

I'm building my JavaScript fundamentals one concept at a time.

JavaScript: Object Creation & Constructor Functions

Megalraja — Tue, 29 Sep 2026 14:56:05 +0000

While learning JavaScript, I explored how objects can be created and reused.

The simplest way is an object literal:

const laptop = {
    brand: "HP",
    model: "H15",
    price: 45000
};

But when we need multiple objects with the same structure, a constructor function is useful:

function Laptop(brand, model, price) {
    this.brand = brand;
    this.model = model;
    this.price = price;
}

const laptop1 = new Laptop("HP", "H15", 45000);
const laptop2 = new Laptop("MSI", "MSI15", 55000);

Here, new creates a new object, and this refers to that newly created object.

Simple idea:

Constructor → Structure
new → Creates object
this → Sets object properties

A small concept, but an important foundation for understanding JavaScript objects.

JavaScript Parameters, Arguments, Default & Rest Parameters

Megalraja — Sun, 27 Sep 2026 16:01:11 +0000

When I started learning JavaScript functions, I kept mixing up parameters and arguments. Then I came across default and rest parameters.

Here’s how I understand them now.

1. Parameters

Parameters are the variables we define when creating a function.

function greet(name) {
    console.log("Hello " + name);
}

Here, name is a parameter.

2. Arguments

Arguments are the actual values we pass when calling the function.

plaintext

greet("John");

Here, "John" is the argument.

Parameter → placeholder
Argument → actual value

3. Default Parameters

We can give a parameter a default value.


function greet(name = "John") {
    console.log("Hello " + name);
}

greet();

Output:

Hello John

If we provide a value, the default value isn't used:

greet("David");

Output:

Hello David

4. Rest Parameters

What if we don't know how many arguments will be passed?

We can use ... to collect them.

function add(...numbers) {
    return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(add(10, 20, 30));

Output:

60

The ...numbers collects the arguments into an array.

Quick way to remember

Parameter → variable in the function
Argument → value passed to the function
Default → fallback value
Rest → collects multiple arguments

Understanding these four concepts made JavaScript functions much clearer for me.

At first, parameters, arguments, default parameters, and rest parameters looked like separate confusing topics. But once I understood how they work together, functions started making much more sense.

Still learning, still practicing, and slowly building my JavaScript fundamentals one concept at a time.

What JavaScript concept confused you when you first started?