DEV Community: Siva Samanthapudi

React Mastery Series – Day 13: React Hooks Deep Dive – Understanding useEffect

Siva Samanthapudi — Sat, 01 Aug 2026 18:18:50 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored Forms in React and learned how controlled components help React manage user input.

Today, we will dive into one of the most important and widely used React Hooks:

useEffect Hook

useEffect is a fundamental Hook used in almost every real-world React application.

It helps us perform side effects such as:

Fetching data from APIs
Updating browser titles
Subscribing to events
Setting timers
Connecting to WebSockets
Cleaning up resources

Understanding useEffect is essential for building production-ready React applications.

What Are Side Effects?

Before understanding useEffect, we need to understand what a side effect is.

A side effect is any operation that happens outside the normal component rendering process.

Examples:

API Calls

Component Render
        |
        ↓
Call Backend API
        |
        ↓
Receive Data
        |
        ↓
Update State

Browser Interaction

Examples:

Changing document title
Accessing local storage
Manipulating browser APIs

Subscriptions

Examples:

WebSocket connections
Event listeners
Timers

Why Do We Need useEffect?

React components should ideally be pure functions.

Example:

function UserProfile() {
  return <h1>User Profile</h1>;
}

The component receives data and returns UI.

However, real applications need external interactions.

Example:

Render Component
       |
       ↓
Fetch User Data
       |
       ↓
Update UI

React provides useEffect to handle these operations safely.

Basic Syntax of useEffect

useEffect(() => {
  // Side effect logic
}, []);

The Hook accepts two parameters:

useEffect(
    function,
    dependency array
)

First Parameter: Effect Function

This contains the code that should execute.

Example:

useEffect(() => {
  console.log("Component rendered");
});

Second Parameter: Dependency Array

The dependency array controls when the effect runs.

Example:

useEffect(() => {
  console.log("Runs once");
}, []);

The empty array means:

Run this effect only after the initial render.

Understanding useEffect Execution

Consider:

function App() {
  useEffect(() => {
    console.log("Effect executed");
  }, []);

  return <h1>Hello React</h1>;
}

Execution flow:

Component Created
        |
        ↓
Initial Render
        |
        ↓
DOM Updated
        |
        ↓
useEffect Executes

Important:

useEffect runs after the component renders.

useEffect Without Dependency Array

Example:

useEffect(()=>{
  console.log("Runs every render");
});

Execution:

Initial Render
       ↓
Effect Runs

State Update
       ↓
Render
       ↓
Effect Runs Again

This happens after every render.

Use carefully.

useEffect With Empty Dependency Array

Example:

useEffect(()=>{
  console.log("Runs once");
},[]);

Execution:

Component Mount
        |
        ↓
Effect Executes Once

Common use cases:

Initial API calls
Loading configuration
Setting up subscriptions

useEffect With Dependencies

Example:

useEffect(()=>{
  console.log("User changed");
},[userId]);

Now the effect runs when:

userId changes

Example:

setUserId(10);

Flow:

State Update
      |
      ↓
Component Re-render
      |
      ↓
Dependency Changed
      |
      ↓
useEffect Executes

Real-World Example: Fetching API Data

A common React pattern:

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
      });
  }, []);

  return (
    <div>
      {users.map((user) => (
        <h3 key={user.id}>{user.name}</h3>
      ))}
    </div>
  );
}

Flow:

Component Loads
        |
        ↓
useEffect Runs
        |
        ↓
API Request
        |
        ↓
Receive Response
        |
        ↓
Update State
        |
        ↓
Render User List

Cleanup Function in useEffect

Some effects need cleanup.

Examples:

Removing event listeners
Clearing timers
Closing WebSocket connections

Example:

useEffect(() => {
    const timer =
        setInterval(() => {
            console.log("Running");
        }, 1000);

    return () => {
        clearInterval(timer);
    };
}, []);

The function returned from useEffect is called:

Cleanup Function

Component Lifecycle Using useEffect

In class components:

componentDidMount()

componentDidUpdate()

componentWillUnmount()

In functional components:

useEffect handles all lifecycle behavior.

Mounting

Equivalent to:

componentDidMount()

Example:

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

Runs once when component appears.

Updating

Equivalent to:

componentDidUpdate()

Example:

useEffect(()=>{
   searchProducts();
},[searchText]);

Runs whenever searchText changes.

Unmounting

Equivalent to:

componentWillUnmount()

Example:

useEffect(() => {
    return () => {
        disconnect();
    };
}, []);

Runs when component is removed.

Real-World Example: WebSocket Connection

Imagine a live banking notification system.

Component loads:

Open Dashboard
       |
       ↓
Create WebSocket Connection
       |
       ↓
Receive Transaction Alerts

When user leaves:

Navigate Away
       |
       ↓
Close WebSocket

Implementation:

useEffect(() => {
    const socket =
        new WebSocket(
            "wss://bank.com/alerts"
        );
    return () => {
        socket.close();
    };
}, []);

Dependency Array Mistakes

Mistake 1: Missing Dependencies

Example:

useEffect(()=>{
   fetchUser(userId);
},[]);

Problem:

userId is used but not included.

Correct:

useEffect(()=>{
   fetchUser(userId);
},[userId]);

Mistake 2: Infinite Loops

Example:

useEffect(()=>{
  setCount(count+1);
},[count]);

Flow:

count changes
      |
      ↓
Effect runs
      |
      ↓
setCount()
      |
      ↓
count changes again
      |
      ↓
Infinite Loop

useEffect vs Event Handlers

A common confusion:

Should something happen inside:

useEffect?
Button click handler?

Example:

User clicks save button:

<button onClick={saveData}> Save </button>

This belongs in an event handler.

Automatic behavior:

Component Loaded
       |
       ↓
Fetch Data

This belongs in:

useEffect()

useEffect Best Practices

Keep Effects Focused

Avoid:

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

Better:

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


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

Avoid Unnecessary Effects

Do not use effects for simple calculations.

Avoid:

useEffect(()=>{
  setFullName( firstName + lastName);
},[firstName,lastName]);

Instead:

const fullName = firstName + lastName;

Always Cleanup Resources

Cleanup:

Timers
Subscriptions
Event listeners
Connections

Enterprise Example: Banking Dashboard

Consider a retail banking application.

When the dashboard opens:

User Opens Dashboard
          |
          ↓
useEffect Executes
          |
          ↓
Fetch Account Summary API
          |
          ↓
Fetch Transactions API
          |
          ↓
Update State
          |
          ↓
Render Dashboard

When leaving:

User Leaves Page
          |
          ↓
Cleanup Runs
          |
          ↓
Close Connections

This pattern is used in production React applications.

Key Takeaways

Today, we learned:

✅ useEffect handles side effects in React.
✅ Effects run after rendering.
✅ Dependency arrays control execution timing.
✅ Empty dependency arrays run effects once.
✅ Cleanup functions prevent memory leaks.
✅ API calls, subscriptions, and timers commonly use useEffect.

Coming Next 🚀

In Day 14, we will explore:

React Hooks Deep Dive – useRef and useMemo

We will learn:

What useRef is
Accessing DOM elements
Persisting values without re-rendering
useMemo for performance optimization
Expensive calculations
Real-world optimization examples

These Hooks are essential for writing high-performance React applications.

Happy Coding! 🚀

React Mastery Series – Day 12: Forms in React – Building Controlled and Interactive Forms

Siva Samanthapudi — Sat, 01 Aug 2026 18:08:21 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored Rendering Lists in React and learned how to dynamically generate UI using arrays, map(), and the importance of the key prop.

Today, we will explore one of the most important concepts in frontend development:

Forms in React

Forms are everywhere in modern applications:

Login and registration
Search functionality
Payment processing
Profile updates
Banking transactions
Checkout flows
User management systems

A frontend developer spends a significant amount of time building and managing forms.

React provides a powerful approach to handle forms using Controlled Components

How HTML Forms Work Traditionally

In traditional HTML applications, the browser manages form values.

Example:

<form>
  <input type="text" />

  <button>
    Submit
  </button>
</form>

The browser stores the input value internally.

JavaScript retrieves the value when needed.

How React Handles Forms

React follows a different approach.

React keeps form data inside the component state.

The flow becomes:

User Types
     |
     ↓
onChange Event
     |
     ↓
Update React State
     |
     ↓
State Becomes Source of Truth
     |
     ↓
UI Updates

This pattern is called Controlled Component

What is a Controlled Component?

A controlled component is a form element whose value is controlled by React state.

Example:

import { useState } from "react";

function LoginForm() {

  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(event) =>
        setEmail(event.target.value)
      }
    />
  );

}

Here:

Input Value
     |
     ↓
React State
     |
     ↓
Component Controls Input

React becomes the single source of truth.

Understanding value and onChange

A controlled input requires two important properties (i.e value & onChange)

value

Defines what is displayed.

value={email}

onChange

Updates the state whenever the user types.

onChange={(event) =>
  setEmail(event.target.value)
}

Together:

<input
  value={email}
  onChange={handleChange}
/>

create a controlled input.

Handling Multiple Form Fields

Real applications usually contain multiple fields.

Example:

const [formData, setFormData] = useState({
  username: "",
  email: "",
  password: ""
});

Instead of creating separate states:

const [username,setUsername] = useState("");

const [email,setEmail] = useState("");

const [password,setPassword] = useState("");

we can manage related values together.

Updating Multiple Inputs

Example:

function RegisterForm(){

const [formData,setFormData] =
useState({
 username:"",
 email:"",
 password:""
});


function handleChange(event){

setFormData({
 ...formData,
 [event.target.name]:
 event.target.value
});

}


return (

<form>

<input
 name="username"
 value={formData.username}
 onChange={handleChange}
/>


<input
 name="email"
 value={formData.email}
 onChange={handleChange}
/>


<input
 name="password"
 value={formData.password}
 onChange={handleChange}
/>

</form>

);

}

Understanding Computed Property Names

This syntax:

[event.target.name]: event.target.value

is a JavaScript feature called Computed Property Name

Example:

const field = "email";

const user = {
  [field]: "test@example.com"
};

Result:

{
 email:"test@example.com"
}

React forms use this pattern frequently.

Handling Form Submission

A form submission normally refreshes the browser page.

React applications prevent this behavior.

Example:

function LoginForm(){

function handleSubmit(event){
    event.preventDefault();
    console.log("Form Submitted");
}

return (
<form onSubmit={handleSubmit}>
    <button>Login</button>
</form>
);

}

Why use preventDefault()?

Without:

event.preventDefault();

The browser performs a full page refresh.

With React:

Submit Form
      |
      ↓
Prevent Browser Refresh
      |
      ↓
Validate Data
      |
      ↓
Call API
      |
      ↓
Update UI

Form Validation

Validation ensures users enter correct information.

Common validations:

Required fields
Email format
Password rules
Minimum length
Business rules

Example:

if(email === ""){

setError("Email is required");

}

Showing Validation Messages

Example:

{
error &&
<p>
  {error}
</p>
}

This uses conditional rendering that we learned earlier.

Complete Login Form Example

import { useState } from "react";

function LoginForm(){

const [form,setForm] =
useState({
 email:"",
 password:""
});


function handleChange(event){

setForm({
 ...form,
 [event.target.name]:
 event.target.value
});

}


function handleSubmit(event){

event.preventDefault();

console.log(form);

}


return (

<form onSubmit={handleSubmit}>

<input
 name="email"
 type="email"
 value={form.email}
 onChange={handleChange}
/>


<input
 name="password"
 type="password"
 value={form.password}
 onChange={handleChange}
/>


<button>
Login
</button>


</form>

);

}

export default LoginForm;

Handling Checkbox Inputs

Checkboxes work slightly differently.

Example:

const [accepted,setAccepted] = useState(false);

Component:

<input
 type="checkbox"
 checked={accepted}
 onChange={(event)=>
 setAccepted(event.target.checked)
 }
/>

Use:

event.target.checked

instead of:

event.target.value

Handling Select Dropdowns

Example:

const [country,setCountry] = useState("");

Component:

<select
 value={country}
 onChange={(event)=>
 setCountry(event.target.value)
 }
>

<option>
India
</option>

<option>
UAE
</option>

</select>

Controlled vs Uncontrolled Components

React supports two approaches.

Controlled Component

React manages the value.

<input
 value={name}
 onChange={handleChange}
/>

Advantages:

Easy validation
Dynamic UI updates
Predictable behavior
Recommended approach

Uncontrolled Component

The DOM manages the value.

Example:

const inputRef = useRef();

<input ref={inputRef}/>

Value is accessed directly:

inputRef.current.value

Useful for:

Simple forms
File uploads
Integrating with non-React libraries

Forms in Enterprise Applications

Consider a banking application:

Fund Transfer Form

Fields:

From Account
To Account
Amount
Transfer Date
Remarks

React flow:

User Enters Data
        |
        ↓
Update Form State
        |
        ↓
Validate Input
        |
        ↓
Submit Request
        |
        ↓
Call Transfer API
        |
        ↓
Show Success/Error Message

This exact pattern is used in enterprise applications.

Common Form Mistakes

1. Not Providing value

Incorrect:

<input
onChange={handleChange}
/>

The input becomes uncontrolled.

2. Forgetting name Attribute

Incorrect:

<input />

When using a generic handler:

event.target.name

the name attribute is required.

3. Mutating Form State Directly

Incorrect:

form.email = "test@gmail.com";

Correct:

setForm({
 ...form,
 email:"test@gmail.com"
});

4. Too Much Form Logic Inside Component

Large enterprise forms can become difficult to maintain.

Solutions:

Custom hooks
Form libraries
Schema validation

Popular libraries:

React Hook Form
Formik
Zod

Best Practices

Use controlled components for most forms.
Keep form state organized.
Validate before submitting.
Show meaningful error messages.
Separate validation logic from UI.
Reuse common form components.

Key Takeaways

Today, we learned:

✅ React forms are commonly managed using controlled components.
✅ State becomes the single source of truth for form values.
✅ value and onChange work together to control inputs.
✅ preventDefault() prevents browser refresh on submission.
✅ Multiple inputs can be managed using a single state object.
✅ Form validation is an essential part of production applications.

Coming Next 🚀

In Day 13, we will explore:

React Hooks Deep Dive – Understanding useEffect

We will learn:

Why useEffect exists
Component lifecycle with useEffect
Dependency arrays
API calls
Cleanup functions
Common mistakes
Real-world examples

useEffect is one of the most important Hooks in React and is heavily used in production applications.

Happy Coding! 🚀

React Mastery Series – Day 11: Rendering Lists in React – Working with Arrays and Keys

Siva Samanthapudi — Sat, 01 Aug 2026 17:51:20 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored Conditional Rendering in React and learned how to build dynamic interfaces based on different application states.

Today, we will learn another concept that is used in almost every React application:

Rendering Lists

Modern applications are built around collections of data.

Examples:

Banking applications display transaction history.
E-commerce applications display product catalogs.
Social media applications display posts and comments.
Admin dashboards display users and reports.

Instead of manually writing UI elements for every item, React allows us to dynamically generate UI from arrays.

What is List Rendering?

List rendering means creating multiple UI elements by iterating over a collection of data.

Example:

Instead of writing:

<ul>
  <li>React</li>
  <li>Angular</li>
  <li>Vue</li>
</ul>

We can store the data:

const frameworks = [
  "React",
  "Angular",
  "Vue"
];

and generate the UI dynamically.

Rendering Lists Using map()

The most common way to render lists in React is using JavaScript's map() function.

Example:

function FrameworkList() {

  const frameworks = [
    "React",
    "Angular",
    "Vue"
  ];

  return (
    <ul>
      {
        frameworks.map((framework) => (
          <li>
            {framework}
          </li>
        ))
      }
    </ul>
  );

}

Output:

<ul>
  <li>React</li>
  <li>Angular</li>
  <li>Vue</li>
</ul>

The map() function transforms each array item into a React element.

How map() Works

Consider this array:

const users = [
  "Siva",
  "John",
  "Emma"
];

When React executes:

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

The result becomes:

<h2>Siva</h2>
<h2>John</h2>
<h2>Emma</h2>

React then renders these elements into the DOM.

Rendering Lists with Objects

In real applications, data usually comes from APIs as objects.

Example:

const users = [
  {
    id: 1,
    name: "Siva",
    role: "Developer"
  },
  {
    id: 2,
    name: "John",
    role: "Designer"
  }
];

Rendering:

function UserList() {

  return (
    <div>
      {
        users.map((user) => (
          <div>
            <h3>{user.name}</h3>
            <p>{user.role}</p>
          </div>
        ))
      }
    </div>
  );

}

Output:

Siva
Developer

John
Designer

Why Does React Need Keys?

When rendering lists, React requires a special attribute called:

key

Example:

users.map((user) => (
  <div key={user.id}>
    <h3>{user.name}</h3>
  </div>
))

The key helps React identify each item uniquely.

Understanding Keys with an Example

Imagine a shopping cart:

Initial list:

1. Laptop
2. Mobile
3. Headphones

User removes the first item:

1. Mobile
2. Headphones

React needs to understand:

Which item was removed?
Which items moved?
Which elements can be reused?

Keys provide that identity.

What Happens Without Keys?

Example:

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

React shows a warning:

Warning:
Each child in a list should have a unique "key" prop.

The application may still work, but React cannot efficiently track changes.

Best Choice for Keys

The best key is:

Unique
Stable
Related to the data

Good:

<div key={user.id}>

Example:

{
 id:101,
 name:"Siva"
}

Avoid Using Array Index as Key

Example:

users.map((user,index)=>(
  <div key={index}>
    {user.name}
  </div>
))

This works for static lists but can create problems when:

Items are added
Items are removed
Items are reordered

Example:

Before:

Index 0 → Apple
Index 1 → Banana
Index 2 → Mango

After removing Apple:

Index 0 → Banana
Index 1 → Mango

React may think the existing elements are different items.

Real-World Example: Transaction History

A banking application may receive:

const transactions = [
  {
    id:101,
    type:"Deposit",
    amount:5000
  },
  {
    id:102,
    type:"Withdrawal",
    amount:2000
  }
];

Rendering:

function TransactionList(){

return (
<div>
{
transactions.map((transaction)=>( 
  <div key={transaction.id}>
    <h3>{transaction.type}</h3>
    <p>₹{transaction.amount}</p>
  </div>
))
}
</div>
);
}

Each transaction has a unique identity.

Rendering Components from Lists

Usually, we don't write large JSX inside map().

Instead, we create reusable components.

Example:

function ProductCard({product}) {

return (
<div>
<h3>{product.name}</h3>
<p>₹{product.price}</p>
</div>
);
}

Then:

function ProductList(){
return (
<div>
{
products.map((product)=>(
  <ProductCard
    key={product.id}
    product={product}
  />
))
}
</div>
);

}

This keeps components clean and reusable.

Filtering Lists Before Rendering

A common requirement is displaying only matching items.

Example:

const activeUsers =
users.filter(
 user => user.active
);

Then:

activeUsers.map(user => (
  <UserCard
    key={user.id}
    user={user}
  />
))

Common use cases:

Active accounts
Available products
Completed tasks

Sorting Lists Before Rendering

Example:

const sortedUsers =
users.sort(
(a,b)=>a.name.localeCompare(b.name)
);

Then render:

sortedUsers.map(user=>(
<UserCard
 key={user.id}
 user={user}
/>
))

Rendering Empty States

A good application handles empty data.

Example:

function Orders(){

if(orders.length === 0){

return (
  <p>
    No orders found
  </p>
);

}

return (
<OrderList />
);

}

This improves user experience.

Common Mistakes

1. Forgetting Keys

Incorrect:

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

Correct:

items.map(item=>(
  <Item
    key={item.id}
    item={item}
  />
))

2. Using Random Keys

Avoid:

key={Math.random()}

Why?

Every render creates new keys, causing unnecessary DOM updates.

3. Modifying Arrays Directly

Avoid:

items.push(newItem);

Use state updates:

setItems([
  ...items,
  newItem
]);

List Rendering Performance

Large lists require optimization.

Examples:

Virtual scrolling
Pagination
Memoization
Lazy loading

Libraries like:

React Window
React Virtualized

help efficiently render thousands of items.

Real-World Enterprise Example

Consider an online banking portal.

Transaction API response:

GET /transactions

[
 {
   id:1001,
   date:"01-Aug-2026",
   amount:5000
 },
 {
   id:1002,
   date:"02-Aug-2026",
   amount:3000
 }
]

React flow:

API Response
      |
      ↓
Store Data in State
      |
      ↓
map() over Transactions
      |
      ↓
Create Transaction Components
      |
      ↓
Render UI

This pattern is used in almost every enterprise React application.

Best Practices

Always provide stable keys.
Prefer unique IDs from backend data.
Extract repeated UI into components.
Avoid complex logic inside map().
Handle empty states.
Keep list components reusable.

Key Takeaways

Today, we learned:

✅ React uses JavaScript map() for rendering lists.
✅ Keys help React identify list items efficiently.
✅ Unique IDs are the best choice for keys.
✅ Lists are commonly converted into reusable components.
✅ Filtering and sorting data before rendering is a common pattern.

Coming Next 🚀

In Day 12, we will explore:

Forms in React – Building Controlled and Interactive Forms

We will learn:

Controlled components
Handling multiple inputs
Form validation
Managing form state
Submitting forms
Real-world login and registration examples

Forms are one of the most important parts of frontend development, and mastering them is essential for building production React applications.

Happy Coding! 🚀

React Mastery Series – Day 10: Conditional Rendering in React – Building Dynamic User Interfaces

Siva Samanthapudi — Sat, 01 Aug 2026 15:54:55 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored Event Handling in React and learned how applications respond to user interactions such as clicks, typing, and form submissions.

Today, we will learn another core React concept that is used in almost every real-world application:

Conditional Rendering

Modern applications rarely display the same UI to every user.

A banking application may show:

Login page for unauthenticated users
Dashboard for logged-in users
Admin features for administrators
Different screens based on account status

An e-commerce application may show:

Products when data exists
Loading indicators while fetching data
Error messages when API calls fail
Empty states when no results are found

React handles these scenarios using conditional rendering.

What is Conditional Rendering?

Conditional rendering means displaying different UI elements based on certain conditions.

The concept is simple:

Condition is true
        |
        ↓
Render UI A


Condition is false
        |
        ↓
Render UI B

In React, conditions are written using normal JavaScript.

Conditional Rendering Using if/else

The simplest approach is using JavaScript if/else.

Example:

function LoginStatus() {

  const isLoggedIn = true;

  if (isLoggedIn) {
    return <h1>Welcome Back!</h1>;
  }

  return <h1>Please Login</h1>;

}

If:

isLoggedIn = true;

Output:

<h1>Welcome Back!</h1>

If:

isLoggedIn = false;

Output:

<h1>Please Login</h1>

The JSX returned by the component is converted by React into actual DOM elements during rendering.

Conditional Rendering Using Variables

Sometimes, conditions can become more readable by storing the UI in a variable.

Example:

function Dashboard() {

  const isAdmin = true;

  let content;

  if (isAdmin) {
    content = <AdminPanel />;
  } else {
    content = <UserPanel />;
  }

  return (
    <div>
      {content}
    </div>
  );

}

This approach is useful when the UI logic becomes more complex.

Conditional Rendering Using Ternary Operator

The ternary operator is one of the most commonly used patterns in React.

Syntax:

condition ? trueValue : falseValue

Example:

function Profile() {

  const isLoggedIn = true;

  return (
    <h2>
      {
        isLoggedIn
          ? "My Profile"
          : "Login"
      }
    </h2>
  );

}

Output:

My Profile

Real-World Example: Authentication

Most enterprise applications have authentication-based rendering.

Example:

function Header() {

  return (
    <header>
      {
        isAuthenticated
          ? <UserMenu />
          : <LoginButton />
      }
    </header>
  );

}

Flow:

User Logged In
       |
       ↓
Show Profile Menu


User Logged Out
       |
       ↓
Show Login Button

Logical AND (`&&`) Rendering

When you want to render something only when a condition is true, use the logical AND operator.

Example:

function Notifications() {

  const hasNotifications = true;

  return (
    <div>
      {
        hasNotifications &&
        <NotificationList />
      }
    </div>
  );

}

Meaning:

Condition is true
        |
        ↓
Render Component

Condition is false
        |
        ↓
Render Nothing

Handling Loading States

API-driven applications usually have multiple states:

Loading
   |
   ↓
Success
   |
   ↓
Display Data

Example:

function Users() {

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return <UserList />;

}

This pattern is common in:

Dashboards
Banking applications
E-commerce websites
Admin portals

Rendering Error Messages

Applications must handle failures gracefully.

Example:

function PaymentStatus() {

  return (
    <div>
      {
        error
          ? <p>Payment Failed</p>
          : <p>Payment Successful</p>
      }
    </div>
  );

}

Multiple Conditions

Production applications often have multiple UI states.

Example:

function OrderStatus() {

  if (status === "loading") {
    return <Loading />;
  }

  if (status === "success") {
    return <OrderDetails />;
  }

  if (status === "error") {
    return <ErrorMessage />;
  }

}

This is often cleaner than deeply nested ternary operators.

Avoid Complex Nested Ternaries

Example:

{
  isLoggedIn
    ? isAdmin
      ? <Admin />
      : <User />
    : <Login />
}

Although valid, this quickly becomes difficult to maintain.

A cleaner approach:

function ApplicationContent() {

  if (!isLoggedIn) {
    return <Login />;
  }

  if (isAdmin) {
    return <Admin />;
  }

  return <User />;

}

Readable code is easier to debug and maintain.

Conditional Styling

Sometimes we don't change the component, but only its style.

Example:

<button
  className={
    isActive
      ? "active"
      : "inactive"
  }
>
  Save
</button>

Common use cases:

Active navigation links
Selected tabs
Disabled buttons
Validation messages

Conditional Rendering vs CSS Hiding

There is an important difference.

Conditional Rendering

{
  showComponent && <Component />
}

The component is not created when the condition is false.

CSS Hiding

.hidden {
  display: none;
}

The component still exists but is hidden visually.

Choose the approach depending on your requirement.

Real-World Example: Banking Dashboard

Consider a retail banking application:

Check Authentication
          |
          |
          ├── Not Authenticated
          |          |
          |          ↓
          |       Login Page
          |
          └── Authenticated
                     |
                     ↓
              Dashboard
                     |
                     ↓
          Check Account Status
                     |
          ┌──────────┴──────────┐
          ↓                     ↓
    Active Account        Blocked Account
          ↓                     ↓
 Account Details       Contact Support

Conditional rendering controls the entire user experience.

Rendering Empty States

A common production pattern:

function Products() {

  return (
    <div>
      {
        products.length > 0
          ? <ProductList />
          : <EmptyState />
      }
    </div>
  );

}

Used in:

Transaction history
Shopping carts
Search results
Notifications

Common Mistakes

Mistake 1: Incorrect Logical AND Condition

Avoid:

{
  items.length && <List />
}

If the array is empty, React may render:

Better:

{
  items.length > 0 && <List />
}

Mistake 2: Too Much Logic Inside JSX

Avoid writing complex conditions directly inside JSX.

Instead:

const shouldShowAdmin =
  user.role === "ADMIN";

Then:

{
  shouldShowAdmin && <AdminPanel />
}

Mistake 3: Duplicating UI

Avoid:

condition
?
<div>Same Content</div>
:
<div>Same Content</div>

Extract reusable components instead.

Best Practices

Keep conditions simple.
Prefer early returns for complex scenarios.
Avoid deeply nested ternary operators.
Handle loading, error, and empty states explicitly.
Separate business logic from JSX.
Create reusable components for different UI states.

Key Takeaways

Today, we learned:

✅ Conditional rendering allows dynamic UI changes.
✅ React uses normal JavaScript conditions.
✅ if/else, ternary operators, and && are common patterns.
✅ Authentication, loading, and error states rely heavily on conditional rendering.
✅ Clean conditional logic improves maintainability.

Coming Next 🚀

In Day 11, we will explore:

Rendering Lists in React – Working with Arrays and Keys

We will learn:

Rendering arrays using map()
Understanding the key prop
Why keys are important
Common key mistakes
Dynamic tables and lists
Real-world examples

Lists are everywhere in modern applications:

Transaction history
Product catalogs
User management tables
Notifications

Mastering list rendering is essential for every React developer.

Happy Coding! 🚀

React Mastery Series – Day 9: Event Handling in React – Making Applications Interactive

Siva Samanthapudi — Sat, 01 Aug 2026 15:32:28 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored React Rendering and Component Lifecycle.

We learned:

What causes a component to re-render
How React reconciliation works
The difference between rendering and DOM updates
How lifecycle behavior is handled using Hooks

Now let's learn how React applications respond to user interactions.

Every modern application depends on events:

Clicking buttons
Typing into forms
Selecting options
Submitting data
Dragging and dropping elements
Keyboard shortcuts

React provides a powerful event system to handle all these interactions.

What is Event Handling?

Event handling is the process of responding to user actions in an application.

Examples:

User Action
     |
     ↓
Event Triggered
     |
     ↓
Event Handler Executes
     |
     ↓
State Updated
     |
     ↓
UI Re-renders

Example:

A user clicks the "Transfer Money" button:

Click Button
     |
     ↓
Handle Click Event
     |
     ↓
Validate Data
     |
     ↓
Call API
     |
     ↓
Update UI

Events in Traditional JavaScript vs React

Traditional JavaScript

const button =
document.getElementById("save");

button.addEventListener(
  "click",
  saveData
);

You manually:

Find the DOM element
Attach event listeners
Manage updates

React

React attaches events directly inside JSX.

<button onClick={saveData}>
  Save
</button>

React manages the event registration internally.

React Event Syntax

React events use:

camelCase naming
JSX expressions
Function references

HTML:

<button onclick="save()">
Save
</button>

React:

<button onClick={save}>
Save
</button>

Notice:

onclick  ❌
onClick  ✅

Handling Click Events

Example:

function Button() {

  function handleClick() {
    console.log("Button clicked");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

When the user clicks:

Click
 |
 ↓
handleClick()
 |
 ↓
Execute Logic

Passing Functions vs Calling Functions

A very common beginner mistake.

Incorrect

<button onClick={handleClick()}>
  Save
</button>

This executes immediately during rendering.

Correct

<button onClick={handleClick}>
  Save
</button>

React calls the function only when the event occurs.

Passing Arguments to Event Handlers

Sometimes you need to pass additional information.

Example:

function deleteUser(id) {
  console.log(id);
}

Incorrect:

<button onClick={deleteUser(10)}>
Delete
</button>

Correct:

<button
  onClick={() => deleteUser(10)}
>
Delete
</button>

The arrow function delays execution until the click happens.

The Event Object

React automatically provides an event object.

Example:

function handleClick(event) {

  console.log(event);

}

Usage:

<button onClick={handleClick}>
Click
</button>

The event object contains information about:

Target element
Event type
Mouse position
Keyboard details
Form information

Synthetic Events in React

React does not directly use browser events.

Instead, React provides a wrapper called SyntheticEvent

Example:

function handleClick(event) {

 console.log(event.type);

}

Output:

click

Why does React use Synthetic Events?

Benefits:

✅ Cross-browser consistency
✅ Same API across browsers
✅ Better event management
✅ Performance optimizations

Your code behaves consistently across different environments.

Common Mouse Events

React supports many mouse events:

Event	Purpose
onClick	Mouse click
onDoubleClick	Double click
onMouseEnter	Mouse enters element
onMouseLeave	Mouse leaves element
onMouseMove	Mouse movement

Example:

<div
 onMouseEnter={() =>
 console.log("Hovered")
 }
>
 Hover Me
</div>

Keyboard Events

Keyboard interactions are common in search boxes and forms.

Examples:

<input
 onKeyDown={(event) =>
 console.log(event.key)
 }
/>

If user presses:

Enter

Output:

Enter

Common keyboard events:

onKeyDown
onKeyUp

Form Handling in React

Forms are one of the most important parts of frontend development.

Example:

function LoginForm(){

function handleSubmit(event){

 event.preventDefault();

 console.log("Submitted");

}

return (

<form onSubmit={handleSubmit}>

<button>
Login
</button>

</form>

);

}

Preventing Default Behavior

HTML forms refresh the page by default after submission.

React applications usually prevent this.

Example:

event.preventDefault();

This allows React to handle the form submission without refreshing the browser.

Common use cases:

Login forms
Registration forms
Search forms
Payment forms

Controlled Components

React forms usually follow a pattern called Controlled components pattern.

The React state becomes the single source of truth.

Example:

function Login(){

const [email,setEmail] = useState("");

return (

<input
 value={email}
 onChange={(e)=>
 setEmail(e.target.value)}
/>

);

}

Flow:

User Types
    |
    ↓
onChange Event
    |
    ↓
Update State
    |
    ↓
Component Re-renders
    |
    ↓
Updated Value Displayed

Handling Multiple Inputs

Real applications usually contain multiple fields.

Example:

const [form,setForm] =
useState({
 email:"",
 password:""
});

Updating:

setForm({
 ...form,
 email:e.target.value
});

The spread operator preserves existing values.

Event Bubbling

Events can travel from child elements to parent elements.

Example:

<div onClick={parentClick}>

<button onClick={childClick}>
Click
</button>

</div>

Clicking the button triggers:

Button Click
      |
      ↓
Parent Click

This is called:

Event Bubbling

Stopping Event Propagation

Sometimes you don't want the event to reach the parent.

Use:

event.stopPropagation();

Example:

function buttonClick(event){

event.stopPropagation();

}

Real-World Example: Banking Application

Consider a fund transfer screen:

Enter Amount
      |
      ↓
onChange Event
      |
      ↓
Update State
      |
      ↓
Click Transfer Button
      |
      ↓
onClick Event
      |
      ↓
Validate Data
      |
      ↓
Call API
      |
      ↓
Show Success Message

Every user interaction is managed through React events.

Common Mistakes

Calling Functions Immediately

❌

onClick={save()}

✅

onClick={save}

Mutating State Directly

❌

count++;

✅

setCount(count+1);

Forgetting preventDefault()

Forms may refresh unexpectedly.

Creating Too Many Inline Functions

Example:

<button
onClick={() =>
handleDelete(id)
}
>
Delete
</button>

This is acceptable for small cases.

For large lists, consider optimization techniques later in this series.

Best Practices

Keep event handlers meaningful.
Move complex logic into separate functions.
Use controlled components for forms.
Prevent unnecessary re-renders.
Use semantic event names.
Keep components focused.

Key Takeaways

Today, we learned:

✅ React handles events using JSX syntax.
✅ Event names use camelCase.
✅ Functions should be passed, not immediately executed.
✅ React uses Synthetic Events for consistency.
✅ Forms are commonly managed using controlled components.
✅ Event propagation can be controlled using stopPropagation.

Coming Next 🚀

In Day 10, we will explore:

Conditional Rendering in React – Building Dynamic Interfaces

We will learn:

Rendering elements conditionally
if/else patterns
Ternary operators
Logical AND rendering
Conditional components
Authentication-based UI
Real-world dashboard examples

Conditional rendering is one of the most frequently used concepts in production React applications.

Happy Coding! 🚀

React Mastery Series – Day 8: Understanding React Rendering & Component Lifecycle

Siva Samanthapudi — Sat, 01 Aug 2026 15:12:10 +0000

Welcome back to the React Mastery Series!

In the previous article, we learned about State in React and how state changes make our applications interactive.

Today, we will understand one of the most important concepts for every React developer:

How does React render components?

Many developers know how to write React code, but understanding when and why React renders is what separates a beginner from an advanced React developer.

A strong understanding of rendering helps you:

Build faster applications
Avoid unnecessary re-renders
Debug performance issues
Use optimization techniques correctly

Let's dive in.

What is Rendering in React?

Rendering is the process where React:

Takes your component code
Creates a representation of the UI
Updates the browser DOM when necessary

A simple way to visualize it:

Component Code
       |
       ↓
React creates Element Tree
       |
       ↓
Reconciliation Process
       |
       ↓
Browser DOM Update

Rendering does not always mean updating the browser DOM.

React may render a component, compare the result, and decide that no DOM changes are required.

Initial Render

When a React application starts, the first rendering process happens.

Example:

function App() {
  return (
    <h1>
      Hello React
    </h1>
  );
}

The flow:

index.html
    |
    ↓
main.tsx
    |
    ↓
<App />
    |
    ↓
React creates UI
    |
    ↓
Browser displays content

This is called the initial render.

What Causes a Re-render?

A component re-renders when:

1. State Changes

Example:

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

setCount(1);

When state changes:

State Update
     |
     ↓
Component Re-renders
     |
     ↓
UI Updates

2. Props Change

Example:

<User name="Siva" />

If the parent changes:

<User name="John" />

The child component receives new props and re-renders.

3. Parent Component Re-renders

When a parent component renders, React also re-renders its children by default.

Example:

function Parent() {

  return (
    <>
      <Child />
    </>
  );
}

If Parent updates, Child also gets rendered again.

Later, we will learn how React.memo can prevent unnecessary child renders.

4. Context Value Changes

When a component consumes Context:

const user = useContext(UserContext);

If the context value changes, the component re-renders.

Understanding the Render Phase

React rendering happens in two major phases:

Phase 1: Render Phase

React calculates what the UI should look like.

During this phase:

Components execute
JSX is created
Virtual DOM is generated

Example:

function Profile() {

  console.log("Rendering Profile");

  return (
    <h1>
      Profile
    </h1>
  );
}

Every time the component renders, this function executes again.

Phase 2: Commit Phase

React compares the new Virtual DOM with the previous one.

This process is called:

Reconciliation

React identifies:

What changed?
What stayed the same?
What needs updating?

Then React updates the actual DOM.

Virtual DOM and Reconciliation

Example:

Before:

<ul>
  <li>React</li>
  <li>Angular</li>
</ul>

After state update:

<ul>
  <li>React</li>
  <li>Angular</li>
  <li>Vue</li>
</ul>

React compares both trees.

It identifies:

New Item Added:
<li>Vue</li>

Only that part of the DOM is updated.

Functional Components and Lifecycle

Class components had lifecycle methods like:

componentDidMount()

componentDidUpdate()

componentWillUnmount()

Functional components use Hooks to handle lifecycle behavior.

The main Hook for lifecycle operations is:

useEffect()

Example:

useEffect(() => {

  console.log("Component mounted");

}, []);

The empty dependency array means:

"Run this effect only after the first render."

Component Lifecycle Stages

A React component generally has three stages:

Mounting
   |
   ↓
Updating
   |
   ↓
Unmounting

1. Mounting

The component is created and added to the DOM.

Example:

Opening a dashboard page:

Dashboard Component Created
        |
        ↓
API Call
        |
        ↓
Display Data

Common use cases:

Fetch initial data
Subscribe to services
Initialize values

Example:

useEffect(() => {

  fetchUsers();

}, []);

2. Updating

A component updates when:

State changes
Props change
Context changes

Example:

setCount(count + 1);

Flow:

State Change
      |
      ↓
Render
      |
      ↓
DOM Update

3. Unmounting

A component is removed from the DOM.

Example:

User navigates away from a page.

Common cleanup tasks:

Remove event listeners
Cancel subscriptions
Clear timers
Close WebSocket connections

Example:

useEffect(() => {

  const timer = setInterval(() => {
    console.log("Running");
  }, 1000);


  return () => {
    clearInterval(timer);
  };

}, []);

Does Every Render Update the DOM?

No.

This is a common misunderstanding.

Example:

function Counter() {

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

return (
<h1>{count}</h1>
);

}

When state changes:

State Update
      |
      ↓
React Render
      |
      ↓
Compare Virtual DOM
      |
      ↓
Update Only Changed DOM

React avoids unnecessary DOM operations.

Understanding Re-render vs Refresh

These are different concepts.

Browser Refresh

Entire application reloads.

Browser
   |
   ↓
Download JS
   |
   ↓
Start React App Again

React Re-render

Only React components execute again.

State Change
     |
     ↓
Component Function Executes
     |
     ↓
React Updates UI

The browser page does not reload.

Common Rendering Mistakes

Changing State During Rendering

Incorrect:

function App(){

setCount(1);

return <h1>Hello</h1>;

}

This creates an infinite rendering loop.

Creating Unnecessary State

Avoid:

const [fullName,setFullName] =
useState("");

when it can be calculated:

const fullName =
firstName + lastName;

Large Components

Large components create more expensive renders.

Prefer:

Small Components
        +
Composition
        =
Better Performance

Real-World Example: Banking Application

Imagine a transaction dashboard.

User completes a payment:

Payment Completed
        |
        ↓
Update Transaction State
        |
        ↓
Transaction Component Re-renders
        |
        ↓
React Calculates Changes
        |
        ↓
Only Transaction List Updates

The entire application does not reload.

This is why React applications feel fast and responsive.

Key Takeaways

Today, we learned:

✅ Rendering is React's process of creating and updating UI.
✅ State, props, and context changes trigger renders.
✅ Rendering does not always mean DOM updates.
✅ React uses reconciliation to efficiently update the DOM.
✅ Functional components use Hooks for lifecycle behavior.
✅ Understanding rendering is essential for React performance optimization.

Coming Next 🚀

In Day 9, we will learn:

Event Handling in React – Making Applications Interactive

We will cover:

Handling click events
Passing arguments to events
Synthetic events
Forms and controlled components
Preventing default behavior
Event propagation
Real-world examples

By mastering events, you will learn how React applications respond to user actions.

Happy Coding! 🚀

React Mastery Series – Day 7: State in React – Making Components Dynamic

Siva Samanthapudi — Sat, 01 Aug 2026 14:54:29 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored Props, which allow parent components to pass data to child components.

But what happens when the data needs to change over time?

Think about applications you use every day:

A shopping cart where items are added or removed.
A banking app where the account balance updates after a transaction.
A social media app where the number of likes increases instantly.
A to-do app where tasks are marked as completed.

These applications are interactive because they use State.

Today, we'll understand one of the most fundamental concepts in React—State.

What is State?

State is data that belongs to a component and can change over time.

Unlike props, which are passed from a parent component and are read-only, state is owned and managed by the component itself.

When state changes, React automatically re-renders the component to reflect the updated UI.

Think of state as the component's memory.

Why Do We Need State?

Imagine building a counter application.

Without state:

function Counter() {
  let count = 0;

  return (
    <>
      <h2>{count}</h2>
      <button>Increment</button>
    </>
  );
}

Clicking the button won't change the displayed value because React doesn't know that count has changed.

To make the UI reactive, React provides State.

Introducing the `useState` Hook

In functional components, state is managed using the useState Hook.

import { useState } from "react";

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

  return (
    <>
      <h2>{count}</h2>

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

When the button is clicked:

setCount() updates the state.
React schedules a re-render.
The updated value appears on the screen.

No manual DOM manipulation is required.

Understanding `useState`

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

Let's break it down.

count      → Current state value

setCount   → Function used to update state

0          → Initial state value

Every time setCount() is called, React updates the state and re-renders the component.

State Drives the UI

A key React principle is:

The UI is a function of State.

Consider a login screen.

isLoggedIn = false

↓

Show Login Button

After authentication:

isLoggedIn = true

↓

Show Dashboard

The UI changes automatically because the underlying state has changed.

Updating State

Always use the setter function returned by useState.

Correct:

setCount(count + 1);

Incorrect:

count = count + 1;

Directly modifying the state variable does not notify React, so the UI will not update.

Updating State Based on Previous State

Sometimes multiple state updates happen close together.

Instead of:

setCount(count + 1);

Prefer the functional update form:

setCount((previousCount) => previousCount + 1);

Why?

Because React may batch state updates for better performance.

Using the previous state guarantees you're working with the latest value.

State Can Store Any JavaScript Value

State isn't limited to numbers.

String

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

Boolean

const [isLoggedIn, setIsLoggedIn] =
  useState(false);

Array

const [tasks, setTasks] = useState([]);

Object

const [user, setUser] = useState({
  name: "Siva",
  city: "Dubai",
});

Updating Objects in State

Never modify an object directly.

Incorrect:

user.name = "John";

Correct:

setUser({
  ...user,
  name: "John",
});

The spread operator copies the existing object while updating only the required property.

Updating Arrays in State

Similarly, avoid mutating arrays.

Incorrect:

tasks.push("Learn React");

Correct:

setTasks([
  ...tasks,
  "Learn React",
]);

Creating a new array ensures React detects the change.

Multiple State Variables

A component can manage multiple pieces of state.

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [age, setAge] = useState(0);

Each state variable is independent.

This makes components easier to reason about.

A Real-World Example

Imagine a banking dashboard.

Account Balance

₹25,000

After transferring money:

Account Balance

₹18,000

The balance displayed on the screen changes because the component's state has been updated.

React automatically re-renders only the affected parts of the UI.

Common Mistakes

Directly Modifying State

❌

count++;

Always use the setter function.

Mutating Objects or Arrays

Avoid using methods like:

push()
pop()
splice()

Instead, create new objects or arrays using the spread operator or other immutable methods.

Too Much State

Not every value belongs in state.

If a value can be derived from existing state or props, don't duplicate it.

Keeping state minimal reduces bugs and simplifies your code.

State vs Props

Props	State
Passed from parent	Owned by component
Read-only	Can change
External data	Internal data
Cannot be modified by child	Updated using setter functions

Understanding the distinction between props and state is essential for building predictable React applications.

Best Practices

Keep state as small as possible.
Never mutate state directly.
Use functional updates when the next value depends on the previous one.
Store only what truly needs to change.
Split unrelated pieces of state into separate variables.

These practices lead to cleaner, more maintainable components.

Key Takeaways

Today, we learned:

✅ State stores data that changes over time.
✅ Functional components use the useState Hook to manage state.
✅ Updating state triggers a re-render.
✅ State can store any JavaScript value.
✅ Objects and arrays should be updated immutably.
✅ Understanding the difference between props and state is fundamental to React.

Coming Next 🚀

In Day 8, we'll explore one of React's most powerful concepts:

Component Rendering Lifecycle & Re-rendering

We'll answer questions like:

What happens when a React component renders?
What triggers a re-render?
When does React skip rendering?
What is the rendering lifecycle in functional components?
How does React decide what to update?

Understanding the rendering process is the foundation for learning performance optimization techniques such as React.memo, useMemo, and useCallback later in this series.

Happy Coding! 🚀

React Mastery Series – Day 6: Props in React – Passing Data Between Components

Siva Samanthapudi — Sat, 01 Aug 2026 14:46:52 +0000

Welcome back to the React Mastery Series!

So far, we've learned:

What React is
Why React was created
Setting up a React project
Understanding JSX
Building reusable components

In the previous article, we learned that components are the building blocks of every React application.

However, a component that always displays the same content isn't very useful.

Imagine an e-commerce website displaying hundreds of products. Creating a separate component for every product would result in repetitive code that's difficult to maintain.

Instead, React provides Props, allowing us to reuse the same component with different data.

What are Props?

Props (short for Properties) are read-only values passed from a parent component to a child component.

Think of props as function arguments.

Just as a function behaves differently depending on the arguments passed to it, a React component can render different content based on the props it receives.

Example:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <>
      <Welcome name="Siva" />
      <Welcome name="John" />
      <Welcome name="Emma" />
    </>
  );
}

Output:

Hello, Siva!
Hello, John!
Hello, Emma!

The same component is reused three times with different data.

How Props Work

Props create a one-way data flow.

Parent Component
        │
        │ Props
        ▼
Child Component

The parent sends data.

The child receives data.

The child cannot modify the props it receives.

This predictable data flow is one of React's greatest strengths.

Why Do We Need Props?

Imagine building an online shopping application.

Without props:

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />

Each component would display identical information.

With props:

<ProductCard
  name="Wireless Mouse"
  price={799}
/>

<ProductCard
  name="Mechanical Keyboard"
  price={3499}
/>

<ProductCard
  name="Monitor"
  price={12999}
/>

Now one reusable component can display unlimited products.

Passing Different Types of Props

Props can hold almost any JavaScript value.

String

<User name="Siva" />

Number

<Product price={4999} />

Boolean

<Button disabled={true} />

Array

<Skills
  skills={["React", "TypeScript", "Node.js"]}
/>

Object

<User
  user={{
    name: "Siva",
    city: "Dubai"
  }}
/>

Function

Functions are frequently passed as props to allow child components to communicate with their parent.

<Button onClick={handleSave} />

We'll explore this in more detail when discussing event handling.

Destructuring Props

Instead of repeatedly writing props.name, React developers often destructure props.

Instead of:

function User(props) {
  return <h2>{props.name}</h2>;
}

Use:

function User({ name }) {
  return <h2>{name}</h2>;
}

This approach is shorter and easier to read.

Props are Read-Only

One of the most important React rules is:

Never modify props inside a child component.

❌ Incorrect:

function User({ name }) {
  name = "Admin";

  return <h2>{name}</h2>;
}

React expects props to remain immutable.

If data needs to change, the parent component should update it and pass the new value down.

Passing Multiple Props

Components often require more than one piece of information.

Example:

<ProductCard
  name="Laptop"
  brand="Dell"
  price={74999}
  rating={4.8}
/>

Child component:

function ProductCard({
  name,
  brand,
  price,
  rating
}) {
  return (
    <>
      <h2>{name}</h2>
      <p>{brand}</p>
      <p>₹{price}</p>
      <p>{rating} ⭐</p>
    </>
  );
}

The `children` Prop

One of the most powerful features in React is the special children prop.

Anything placed between a component's opening and closing tags becomes its children.

Example:

<Card>
  <h2>Welcome!</h2>
  <p>Learning React is fun.</p>
</Card>

Component:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

This makes components highly flexible and reusable.

Default Props

Sometimes a prop may not be provided.

You can define default values using JavaScript default parameters.

function Welcome({
  name = "Guest"
}) {
  return <h2>Hello, {name}</h2>;
}

Now:

<Welcome />

renders:

Hello, Guest

Real-World Example

Imagine a banking dashboard displaying multiple accounts.

Instead of creating separate components:

<SavingsAccount />
<SalaryAccount />
<BusinessAccount />

Create one reusable component:

<AccountCard
  accountName="Savings"
  balance={15400}
/>

<AccountCard
  accountName="Salary"
  balance={83000}
/>

<AccountCard
  accountName="Business"
  balance={270500}
/>

One component, many use cases.

This is exactly how enterprise React applications are built.

Common Mistakes

Modifying Props

Props should never be changed by the child component.

Passing Too Many Props

If a component receives 15–20 props, consider grouping related data into an object or redesigning the component.

Using Props Instead of State

Props are passed from the parent.

State is owned and managed by the component.

We'll explore state in the next article.

Forgetting Destructuring

Destructuring keeps components cleaner and more readable, especially when several props are involved.

Best Practices

Treat props as immutable.
Keep component APIs simple.
Use descriptive prop names.
Pass only the data a component actually needs.
Use the children prop for flexible layouts.
Prefer composition over creating dozens of specialized components.

Key Takeaways

Today, we learned:

✅ Props allow data to flow from parent to child.
✅ Props are read-only and should never be modified.
✅ Props can hold strings, numbers, objects, arrays, booleans, and functions.
✅ The children prop enables highly reusable layouts.
✅ Designing clean component APIs improves maintainability and scalability.

What's Next? 🚀

In Day 7, we'll cover one of the most fundamental concepts in React:

State in React – Making Components Dynamic

We'll explore:

What state is
Why state exists
The useState Hook
Updating state correctly
State batching
Common pitfalls
Real-world examples

By the end of the next article, you'll understand the difference between Props and State, two concepts that every React developer must master.

Happy Coding! 🚀

React Mastery Series – Day 5: Components in React – Building Reusable User Interfaces

Siva Samanthapudi — Sat, 01 Aug 2026 14:38:42 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored JSX, the syntax that allows us to describe user interfaces in a clean and intuitive way.

Now it's time to learn the heart of React—the concept that makes React applications scalable, maintainable, and reusable:

Components

Everything you build in React is made up of components. Whether it's a button, navigation bar, product card, or an entire dashboard, it's ultimately a composition of components.

Let's understand why.

What is a Component?

A component is an independent, reusable piece of the user interface.

Think of a modern banking application.

Instead of writing the entire page as one large block, we divide it into smaller building blocks.

Bank Dashboard
│
├── Header
├── Sidebar
├── Account Summary
├── Transaction List
├── Quick Transfer
├── Recent Notifications
└── Footer

Each of these sections is a separate React component.

Every component has a single responsibility, making the application easier to understand and maintain.

Why React Uses Components

Imagine an e-commerce application displaying hundreds of products.

Without components, you would repeatedly write the same HTML and JavaScript.

With React, you build a ProductCard once and reuse it throughout the application.

Benefits include:

Reusable code
Easier maintenance
Better organization
Improved readability
Independent testing
Faster development

This is one of the biggest reasons React scales well for enterprise applications.

Functional Components

Modern React applications primarily use functional components.

A functional component is simply a JavaScript function that returns JSX.

Example:

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

You can also write it using an arrow function.

const Welcome = () => {
  return <h1>Welcome to React!</h1>;
};

Both approaches are valid, though arrow functions are commonly used in modern React codebases.

Rendering Components

Once a component is created, it can be used like an HTML element.

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Notice the component name starts with a capital letter.

React treats lowercase tags as HTML elements and uppercase tags as custom components.

Component Composition

One of React's greatest strengths is composition.

Instead of building one huge component, we combine smaller components.

Example:

Dashboard
│
├── Header
├── Sidebar
├── DashboardContent
│      ├── StatisticsCard
│      ├── RevenueChart
│      └── ActivityFeed
└── Footer

Large applications are built by composing dozens—or even hundreds—of small, focused components.

A Real-World Example

Consider a shopping website.

Instead of writing separate HTML for every product, create one reusable component.

function ProductCard() {
  return (
    <div>
      <h3>Wireless Headphones</h3>
      <p>$99</p>
    </div>
  );
}

Now imagine displaying 100 products.

Rather than duplicating the markup 100 times, React allows you to render the same component repeatedly with different data (which we'll learn using props in the next article).

This dramatically reduces duplication and improves maintainability.

Small Components vs Large Components

A common mistake is placing an entire page inside one component.

❌ Difficult to maintain:

Dashboard.jsx
(1200+ lines)

✅ Easier to manage:

Dashboard
│
├── Header
├── Sidebar
├── UserProfile
├── Analytics
├── Charts
├── Notifications
└── Footer

Smaller components are:

Easier to read
Easier to debug
Easier to reuse
Easier to test

Single Responsibility Principle

A component should have one primary responsibility.

Good examples:

SearchBar
LoginForm
Navbar
UserProfile
ProductCard

Poor example:

DashboardComponent

✓ Authentication
✓ API calls
✓ Navigation
✓ Charts
✓ Forms
✓ Notifications
✓ Payments

When a component handles too many responsibilities, it becomes harder to maintain and reuse.

Organizing Components

As applications grow, organizing components becomes increasingly important.

A common folder structure looks like this:

src
│
├── components
│     ├── Button
│     ├── Card
│     ├── Modal
│     └── Navbar
│
├── pages
│
├── layouts
│
├── hooks
│
├── services
│
└── utils

Keeping related files together improves discoverability and collaboration.

Presentational vs Container Components

A useful design pattern is separating components based on their responsibility.

Presentational Components

These focus only on displaying data.

Examples:

Button
Card
Avatar
Badge

They receive data and render UI.

Container Components

These handle application logic.

Responsibilities may include:

Fetching data
Managing state
Calling APIs
Passing data to child components

Separating UI from business logic keeps components cleaner and easier to test.

Naming Components

Choose names that clearly describe the component's purpose.

Good examples:

UserProfile
CheckoutForm
PaymentSummary
OrderHistory
NavigationMenu

Avoid generic names like:

Component1
Data
Temp
TestComponent

Meaningful names improve readability across the codebase.

Component Reusability

A reusable component should:

Solve one problem
Avoid unnecessary dependencies
Be configurable
Be easy to understand
Work in multiple parts of the application

Enterprise applications often rely on reusable component libraries to maintain consistency and speed up development.

Best Practices

When building React components:

Keep components focused on a single responsibility.
Prefer composition over duplication.
Use descriptive names.
Organize components into logical folders.
Avoid creating excessively large components.
Separate UI rendering from business logic where appropriate.

Following these practices leads to code that is easier to scale and maintain.

Key Takeaways

Today, we learned:

✅ Components are the foundation of every React application.
✅ Functional components are the modern standard in React.
✅ Component composition enables scalable application architecture.
✅ Smaller, focused components are easier to maintain and reuse.
✅ Organizing components thoughtfully improves collaboration and code quality.

Coming Next 🚀

In Day 6, we'll explore one of the most important concepts in React:

Props – Passing Data Between Components

You'll learn:

What props are
Why props are immutable
Passing primitive values
Passing objects and arrays
Passing functions as props
Children props
Best practices for designing reusable components

Understanding props is the first step toward building dynamic and interactive React applications.

Happy Coding! 🚀

React Mastery Series – Day 4: Understanding JSX – The Language of React

Siva Samanthapudi — Sat, 01 Aug 2026 14:31:15 +0000

Welcome back to the React Mastery Series!

In the previous article, we set up our React development environment using Vite and explored the project structure.

Today, we'll learn one of the first concepts every React developer encounters: JSX.

At first glance, JSX looks like HTML inside JavaScript—but there's much more happening behind the scenes.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write UI code in a way that closely resembles HTML.

Instead of creating elements using JavaScript APIs, JSX lets you describe your UI in a clean and readable format.

Without JSX:

const element = React.createElement(
  "h1",
  null,
  "Welcome to React!"
);

With JSX:

const element = <h1>Welcome to React!</h1>;

Both snippets produce the same result, but JSX is far more readable and maintainable.

Is JSX HTML?

This is one of the most common misconceptions.

JSX is not HTML.

It looks similar to HTML, but it is actually JavaScript syntax that gets transformed into JavaScript function calls during the build process.

For example:

const heading = <h1>Hello, React!</h1>;

is compiled into something similar to:

const heading = React.createElement(
  "h1",
  null,
  "Hello, React!"
);

With the modern React compiler, this transformation happens automatically, so you rarely need to think about it.

Why Does React Use JSX?

Imagine building a complex dashboard using only React.createElement().

The code would quickly become difficult to read and maintain.

JSX solves this by making your UI resemble its final structure.

Benefits include:

Improved readability
Easier debugging
Better developer experience
Seamless integration of JavaScript expressions
Cleaner component composition

Embedding JavaScript in JSX

One of JSX's greatest strengths is that you can embed JavaScript expressions using curly braces {}.

Example:

const name = "Siva";

function App() {
  return <h1>Welcome, {name}!</h1>;
}

You can also use:

Variables
Function calls
Mathematical expressions
Conditional expressions

Example:

const price = 500;

<p>Total: ₹{price * 2}</p>

React evaluates the JavaScript expression before rendering the UI.

What Can Be Written Inside `{}`?

Valid examples:

{name}

{age + 1}

{isLoggedIn ? "Logout" : "Login"}

{items.length}

{calculateTotal()}

Invalid examples:

if (isLoggedIn) {}

for (...) {}

while (...) {}

Statements are not allowed inside JSX—only expressions.

JSX Requires a Single Parent Element

A React component must return one parent element.

❌ Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome!</p>
);

✅ Correct:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </div>
);

Alternatively, you can use a Fragment.

What is a Fragment?

Sometimes, adding an extra <div> isn't necessary.

React provides Fragments to group elements without creating an additional DOM node.

return (
  <>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </>
);

Fragments help keep the DOM clean while satisfying React's requirement for a single parent element.

JSX Attributes

JSX attributes are similar to HTML attributes but follow JavaScript naming conventions.

For example:

HTML	JSX
class	className
for	htmlFor
onclick	onClick
tabindex	tabIndex

Example:

<button className="primary">
  Save
</button>

React uses camelCase for most DOM properties.

Self-Closing Tags

In JSX, elements without children must always be self-closed.

Correct:

<img src="logo.png" />

<input type="text" />

<br />

Incorrect:

<img>

<input>

<br>

This rule often catches beginners by surprise.

Comments in JSX

You can't use HTML comments inside JSX.

Instead, use JavaScript comments wrapped in curly braces.

return (
  <div>
    {/* User Profile */}
    <Profile />
  </div>
);

Rendering Lists with JSX

JSX makes it easy to render collections using JavaScript methods like map().

const fruits = ["Apple", "Orange", "Mango"];

return (
  <ul>
    {fruits.map((fruit) => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

We'll explore lists and keys in greater detail later in this series.

Conditional Rendering in JSX

Because JSX supports JavaScript expressions, conditional rendering becomes straightforward.

Using the ternary operator:

const isLoggedIn = true;

return (
  <h2>
    {isLoggedIn ? "Welcome Back!" : "Please Login"}
  </h2>
);

Using logical AND:

{isAdmin && <AdminPanel />}

These patterns are used extensively in real-world React applications.

Common Beginner Mistakes

Here are a few mistakes developers often make when starting with JSX:

Using class instead of className
Returning multiple sibling elements without a parent
Forgetting to close self-closing tags
Writing JavaScript statements inside JSX
Forgetting to provide a key when rendering lists

Being aware of these early will save you debugging time.

JSX Best Practices

Keep JSX simple and readable.
Extract complex UI into reusable components.
Avoid deeply nested JSX structures.
Move business logic outside the return statement whenever possible.
Use meaningful component names and descriptive props.

Clean JSX is easier to maintain and review.

Key Takeaways

Today, we learned:

✅ JSX is a syntax extension for JavaScript used to describe UI.
✅ JSX is transformed into JavaScript during the build process.
✅ JavaScript expressions can be embedded using {}.
✅ Components must return a single parent element or a Fragment.
✅ JSX uses camelCase for most attributes.
✅ Self-closing tags and proper syntax are essential for valid JSX.

Coming Next 🚀

In Day 5, we'll explore the building blocks of every React application:

Components in React – Functional Components, Reusability, and Composition

We'll cover:

What components are
Functional components
Component composition
Reusable UI design
Best practices for organizing components
Real-world examples from enterprise applications

By the end of the next article, you'll understand why React applications are built by composing small, reusable pieces into powerful user interfaces.

Happy Coding! 🚀

React Mastery Series – Day 3: Setting Up Your React Development Environment

Siva Samanthapudi — Sat, 01 Aug 2026 14:24:28 +0000

Welcome back to the React Mastery Series!

In the previous article, we explored what React is, why it was created, and how it revolutionized frontend development through components and the Virtual DOM.

Before writing our first React component, let's build a solid development environment. Understanding the tools behind a React application will make you a more confident developer and help you troubleshoot issues when they arise.

What Do We Need?

To build React applications, you'll need:

A code editor
Node.js
npm (or another package manager)
A browser
A React project scaffold

These tools work together to provide a fast and productive development experience.

Step 1: Install Node.js

React applications rely on the Node.js ecosystem for development.

Although React itself runs in the browser, Node.js is used to:

Install dependencies
Run the development server
Build production bundles
Execute development tooling

When you install Node.js, npm (Node Package Manager) is installed automatically.

Verify your installation:

node -v
npm -v

You should see version numbers for both commands.

Step 2: Choose a Code Editor

While many editors support React, Visual Studio Code has become the preferred choice for most developers.

Useful extensions include:

ESLint
Prettier
ES7+ React Snippets
GitLens
Error Lens

These extensions improve code quality, formatting, navigation, and productivity.

Step 3: Create a React Project

For modern React development, Vite is the recommended way to start a new project.

Create a React project with TypeScript:

npm create vite@latest react-mastery -- --template react-ts

Move into the project:

cd react-mastery

Install dependencies:

npm install

Start the development server:

npm run dev

You'll see a local development URL, typically:

http://localhost:5173

Open it in your browser to see your React application running.

Why Vite Instead of Create React App?

For many years, Create React App (CRA) was the standard way to bootstrap React projects.

Today, most developers prefer Vite because it offers:

Faster startup time
Lightning-fast hot module replacement (HMR)
Smaller configuration overhead
Better performance during development
Optimized production builds

If you're starting a new React project, Vite is an excellent choice.

Understanding the Project Structure

A newly created Vite project contains several important files and folders:

react-mastery/
│
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
│
├── package.json
├── vite.config.ts
├── tsconfig.json
└── index.html

Let's understand the most important ones.

The `src` Folder

This is where you'll spend most of your time.

It contains:

Components
Styles
Hooks
Utilities
Business logic

As your application grows, the src folder becomes the heart of your project.

The `main.tsx` File

This is the entry point of the React application.

It creates the React root and renders your application into the browser.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Think of this file as the bridge between your React application and the browser.

The `App.tsx` File

App.tsx is the root component of your application.

Initially, it contains sample content generated by Vite.

As your application grows, this component often becomes the starting point for:

Routing
Global layouts
Theme providers
Authentication providers
Context providers

The `package.json` File

This file manages your project's metadata and dependencies.

A typical package.json includes:

Project name
Version
Scripts
Installed packages
Development dependencies

Example scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

These scripts simplify common development tasks.

Understanding `node_modules`

After running:

npm install

npm downloads all project dependencies into the node_modules directory.

This folder can contain thousands of files and should never be edited manually.

It is usually excluded from version control using .gitignore.

Development Server and Hot Module Replacement

When you run:

npm run dev

Vite starts a development server.

One of its best features is Hot Module Replacement (HMR).

Instead of refreshing the entire page after every code change, Vite updates only the modified modules, preserving application state and making development much faster.

Recommended Folder Structure

As your application grows, organizing your code becomes increasingly important.

A common structure looks like this:

src/
│
├── components/
├── pages/
├── hooks/
├── services/
├── context/
├── store/
├── utils/
├── assets/
├── routes/
└── types/

This organization makes large applications easier to navigate and maintain.

Best Practices

When starting a new React project:

Prefer TypeScript for better type safety.
Keep components small and focused.
Use meaningful folder names.
Configure ESLint and Prettier early.
Commit your code frequently with Git.
Avoid placing all logic inside a single component.

These habits will pay off as your application scales.

Key Takeaways

Today, we learned:

✅ Why Node.js is required for React development
✅ How to create a React project using Vite
✅ The purpose of main.tsx and App.tsx
✅ The role of package.json and node_modules
✅ How the development server and Hot Module Replacement work
✅ A scalable folder structure for React applications

Coming Next 🚀

In Day 4, we'll dive into one of React's most important concepts:

Understanding JSX: Writing HTML Inside JavaScript

We'll explore:

What JSX is
Why React uses JSX
JSX syntax rules
Expressions in JSX
Fragments
Common mistakes
JSX compilation process

Understanding JSX is essential because almost every React component you build will use it.

Happy Coding! 🚀

React Mastery Series – Day 2: What is React and Why Was It Created?

Siva Samanthapudi — Sat, 01 Aug 2026 12:14:21 +0000

Welcome back to the React Mastery Series.

In Day 1, we introduced the roadmap of this series and discussed what we will cover — from React fundamentals to enterprise-level architecture.

Today, we will start with the most important question:

What is React, and why was it created?

What is React?

React is an open-source JavaScript library for building user interfaces, especially single-page applications (SPAs).

It was created by engineers at Meta (Facebook) and was initially released in 2013.

React focuses on one core idea:

Build complex user interfaces by breaking them into small, reusable components.

Instead of creating a complete application as one large piece of code, React encourages developers to divide the UI into independent and manageable components.

Example:

A banking application dashboard can be divided into:

Dashboard
│
├── Header
│
├── AccountSummary
│
├── TransactionList
│
├── TransferMoneyForm
│
└── Notifications

Each part can be developed, tested, and maintained independently.

Why Was React Created?

Before React, developers commonly used traditional JavaScript and libraries like jQuery to update web pages.

For small applications, this approach worked well.

But as applications became larger, several challenges appeared.

1. Managing Complex UI Updates

Imagine a banking application where:

Account balance changes
Transactions are updated
Notifications appear
User profile information changes

With traditional DOM manipulation, developers had to manually find elements and update them.

Example:

document.getElementById("balance").innerHTML = "$5000";

As the application grew, managing thousands of DOM updates became difficult.

React introduced a different approach:

Describe what the UI should look like, and React manages the updates.

The Problem With Direct DOM Manipulation

The browser provides the Document Object Model (DOM), which represents the HTML structure.

Example:

HTML
 |
DOM Tree
 |
Browser Rendering

When we update the DOM frequently:

Browser recalculates layout
Browser repaints elements
Performance can decrease

For large applications, frequent DOM changes can become expensive.

React introduced the concept of the Virtual DOM to solve this problem.

What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM.

React follows this process:

User Action
     |
     ↓
State Change
     |
     ↓
Create New Virtual DOM
     |
     ↓
Compare With Previous Virtual DOM
     |
     ↓
Find Differences
     |
     ↓
Update Only Required DOM Elements

This comparison process is called Reconciliation.

Example:

Before:

User List

John
David
Mike

After adding a user:

User List

John
David
Mike
Sarah

React identifies that only "Sarah" needs to be added instead of rebuilding the entire list.

React Is Declarative

One of the biggest differences between traditional JavaScript and React is:

Imperative Programming

You tell the computer how to do something.

Example:

const button = document.createElement("button");

button.innerHTML = "Save";

document.body.appendChild(button);

You manage every step.

Declarative Programming

You describe what you want, and React handles the process.

Example:

function Button() {
  return (
    <button>
      Save
    </button>
  );
}

React decides how to update the UI.

Component-Based Architecture

React applications are built using components.

A component is a reusable piece of UI.

Example:

function WelcomeMessage() {
  return (
    <h1>
      Welcome to React
    </h1>
  );
}

This component can be reused anywhere.

Benefits:

✅ Reusability
✅ Maintainability
✅ Easier testing
✅ Better team collaboration

Why React Became Popular?

React gained popularity because it provided:

1. Component Reusability

Build once and reuse everywhere.

2. Better Performance

Virtual DOM reduces unnecessary UI updates.

3. Strong Ecosystem

React provides access to:

React Router
Redux
Next.js
React Query
Testing libraries

4. Large Community

Millions of developers and companies use React worldwide.

5. Enterprise Adoption

React is widely used in large-scale applications across industries:

Banking
E-commerce
Healthcare
Social platforms
SaaS products

React vs Traditional JavaScript

Traditional JavaScript	React
Direct DOM manipulation	Virtual DOM
Manual UI updates	Automatic UI updates
Difficult for large applications	Component-based architecture
Less reusable code	Reusable components
Imperative approach	Declarative approach

Key Takeaways

Today we learned:

✅ React is a JavaScript library for building user interfaces
✅ React was created to solve complex UI management problems
✅ Virtual DOM improves UI update efficiency
✅ React follows a declarative programming approach
✅ Components are the foundation of React applications

Coming Next 🚀

Day 3: Setting Up React Development Environment

We will explore:

Creating a React application
React project structure
Understanding package.json
React build process
Development workflow

Stay tuned! 🚀