DEV Community: Jayashree

Why React? – Advantages and Disadvantages of React

Jayashree — Sat, 13 Jun 2026 07:28:41 +0000

Introduction

React is one of the most popular JavaScript libraries for building user interfaces, especially Single Page Applications (SPAs). It was developed by Meta Platforms (formerly Facebook) and is widely used by companies such as Netflix, Instagram, and Airbnb.

React helps developers create fast, interactive, and reusable UI components.

Why React?

Before React, developers often manipulated the DOM directly using JavaScript or jQuery, which became difficult to manage as applications grew.

React solves this by:

Using a component-based architecture
Updating the UI efficiently with the Virtual DOM
Providing reusable code
Making applications easier to maintain

Advantages of React

1. Component-Based Architecture

React applications are built using reusable components.

function Header() {
  return <h1>Welcome</h1>;
}

Benefit: Write once and reuse multiple times.

2. Virtual DOM for Better Performance

React uses a Virtual DOM instead of updating the Real DOM directly.

Benefit:

Faster rendering
Better user experience
Improved application performance

3. Reusable Components

Components can be reused across different pages.

Example:

Navbar
Footer
Button
Login Form

Benefit: Less code duplication.

4. Easy Learning Curve

Developers with HTML, CSS, and JavaScript knowledge can learn React quickly.

5. Strong Community Support

React has:

Large community
Extensive documentation
Thousands of libraries and packages

6. One-Way Data Flow

Data flows from parent to child components.

Benefit:

Easier debugging
Predictable behavior

7. SEO Friendly

React supports Server-Side Rendering through frameworks like Next.js.

Benefit:

Better search engine visibility
Faster page loading

8. Rich Ecosystem

Popular libraries include:

React Router
Redux
Axios
Material UI

Disadvantages of React

1. React is Only a UI Library

React focuses only on the view layer.

For routing, state management, and API handling, additional libraries are often required.

2. Frequent Updates

React ecosystem evolves rapidly.

Challenge: Developers need to keep learning new concepts and tools.

3. JSX Can Be Confusing Initially

<h1>Hello React</h1>

Mixing HTML and JavaScript may feel unusual for beginners.

4. More Configuration for Large Projects

Additional setup may be needed for:

Routing
State Management
Authentication

5. State Management Complexity

For large applications, managing state can become challenging without tools like Redux or Context API.

Feature	React	Traditional JavaScript
UI Updates	Automatic	Manual
Reusability	High	Low
Performance	Better (Virtual DOM)	Lower
Maintenance	Easy	Difficult
Scalability	High	Moderate

When Should You Use React?

Use React when:

Building Single Page Applications (SPA)
Creating dynamic user interfaces
Developing large-scale web applications
Requiring reusable components
Needing better performance and maintainability

Conclusion

React has become a preferred choice for modern web development because of its component-based architecture, Virtual DOM, reusability, and strong ecosystem. While it has some disadvantages such as JSX complexity and dependency on additional libraries, its benefits outweigh the drawbacks for most projects.

React Hooks Explained: useMemo, useCallback, and useNavigate

Jayashree — Fri, 12 Jun 2026 08:51:40 +0000

React provides several powerful hooks that help developers optimize performance and manage navigation efficiently. In this blog, we'll explore useMemo, useCallback, and useNavigate with simple examples.

1. useMemo Hook

What is useMemo?

useMemo is a React Hook used to memoize a calculated value. It prevents expensive calculations from running on every render and only recalculates when dependencies change.

Syntax

const memoizedValue = useMemo(() => { return expensiveCalculation(data); }, [data]);

Why use useMemo?

Improves performance
Avoids unnecessary recalculations
Useful for expensive operations

Example

import React, { useState, useMemo } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const squaredValue = useMemo(() => {
    console.log("Calculating...");
    return count * count;
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <h3>Square: {squaredValue}</h3>

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

      <input
        type="text"
        placeholder="Type here"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

export default App;

Output

Calculation runs only when count changes.
Typing in the input field does not trigger recalculation.

2. useCallback Hook

What is useCallback?

useCallback is a React Hook used to memoize a function. It prevents a function from being recreated on every render.

Syntax

const memoizedFunction = useCallback(() => { // function logic }, [dependencies]);

Why use useCallback?

Prevents unnecessary function recreation
Improves performance
Useful when passing functions to child components

Example

Parent Component

import React, { useState, useCallback } from "react";
import Child from "./Child";

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

  const handleClick = useCallback(() => {
    console.log("Button Clicked");
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>

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

      <Child onClick={handleClick} />
    </div>
  );
}

export default App;

Child Component

import React from "react";

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");

  return (
    <button onClick={onClick}>
      Child Button
    </button>
  );
});

export default Child;

Output

Child component re-renders only when the callback changes.
Since useCallback memoizes the function, unnecessary re-renders are avoided.

Difference Between useMemo and useCallback

useMemo	useCallback
Memoizes a value	Memoizes a function
Returns calculated value	Returns function
Used for expensive calculations	Used for function optimization
Improves rendering performance	Prevents unnecessary re-renders

Example

const value = useMemo(() => count * 2, [count]);

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

3. useNavigate Hook

What is useNavigate?

useNavigate is a hook provided by the React Router library. It allows users to navigate between pages programmatically.

Installation

npm install react-router-dom

Syntax

const navigate = useNavigate();

navigate("/about");

Why use useNavigate?

Navigate to different pages
Redirect users after login
Navigate back and forward

Example
App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.jsx

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home Page</h1>

      <button
        onClick={() => navigate("/about")}
      >
        Go to About
      </button>
    </div>
  );
}

export default Home;

About.jsx

function About() {
  return <h1>About Page</h1>;
}

export default About;

Navigate Back

navigate(-1);

Moves to the previous page.

Navigate Forward

navigate(1);

Moves to the next page.

Replace Current History

navigate("/dashboard", { replace: true });

Prevents the user from returning to the previous page.

Conclusion

React hooks such as useMemo, useCallback, and useNavigate help developers build efficient and user-friendly applications.

useMemo → Memoizes values and avoids expensive recalculations.
useCallback → Memoizes functions and prevents unnecessary re-renders.
useNavigate → Enables programmatic navigation between routes.

Commonly Used Applications and Their Technology Stack

Jayashree — Wed, 10 Jun 2026 09:31:57 +0000

Every day, we use many applications such as WhatsApp, Instagram, YouTube, Netflix, and Amazon. Have you ever wondered what technologies power these applications? Let's explore some popular apps and the technologies behind them.

Popular Applications and Their Technologies

WhatsApp
Frontend: React, Swift
Backend: Erlang, Java
Database: MySQL

Instagram
Frontend: React, JavaScript
Backend: Python (Django)
Database: PostgreSQL

Facebook
Frontend: React.js
Backend: PHP, GraphQL
Database: MySQL

YouTube
Frontend: JavaScript
Backend: Python, C++
Database: MySQL

Netflix
Frontend: React.js
Backend: Java, Spring Boot, Node.js
Database: Cassandra, MySQL
Cloud: AWS

Spotify
Frontend: React.js
Backend: Java, Python
Database: PostgreSQL
Cloud: Google Cloud

Amazon
Frontend: React.js
Backend: Java, Spring Boot
Database: DynamoDB, MySQL
Cloud: AWS

Flipkart
Frontend: React.js
Backend: Java, Spring Boot
Database: MySQL

LinkedIn
Frontend: React.js
Backend: Java, Spring Framework, Kafka
Database: Espresso, MySQL

Uber
Frontend: React.js
Backend: Java, Node.js
Database: MySQL

Swiggy
Frontend: React.js
Backend: Java, Spring Boot
Database: Redis, MySQL

Zomato
Frontend: React.js
Backend: Python, Java
Database: PostgreSQL

Gmail
Frontend: Angular, JavaScript
Backend: Java
Database: Bigtable

X (Twitter)
Frontend: React.js
Backend: Java, Scala
Database: MySQL

PhonePe
Frontend: React.js
Backend: Java, Kotlin
Database: MySQL

Paytm
Frontend: React.js
Backend: Java, Spring Boot
Database: MySQL

ChatGPT
Frontend: React.js
Backend: Python, PyTorch
Database: Vector Database
Infrastructure: Kubernetes

Application	Technologies Used
WhatsApp	Erlang, Java, Swift, React, MySQL
Instagram	Python (Django), React, JavaScript, PostgreSQL
Facebook	PHP, React.js, GraphQL, MySQL
YouTube	Python, JavaScript, C++, MySQL
Netflix	Java, Spring Boot, React.js, Node.js, AWS
Spotify	Java, Python, React.js, Google Cloud
Amazon	Java, Spring Boot, React.js, AWS
Flipkart	Java, Spring Boot, React.js, MySQL
LinkedIn	Java, Spring Framework, React.js, Kafka
Uber	Java, Node.js, React.js, MySQL
Swiggy	Java, Spring Boot, React.js, Redis
Zomato	Python, Java, React.js, PostgreSQL
Gmail	Java, JavaScript, Angular
X (Twitter)	Java, Scala, React.js, MySQL
PhonePe	Java, Kotlin, React.js
Paytm	Java, Spring Boot, React.js
ChatGPT	Python, PyTorch, React.js, Kubernetes

Why Do Most Companies Use Java, Spring Boot, and React?

Frontend Technologies

Frontend is the user interface that users interact with.

HTML
CSS
JavaScript
React.js
Angular

Backend Technologies

Backend handles business logic, APIs, and server-side operations.

Java
Spring Boot
Python
Node.js
.NET

Databases

Databases are used to store and manage application data.

MySQL
PostgreSQL
MongoDB
Redis

Cloud Platforms

Cloud platforms help deploy and scale applications.

AWS
Microsoft Azure
Google Cloud Platform (GCP)

Conclusion

Most modern applications are built using a combination of frontend, backend, database, and cloud technologies. Learning technologies like Java, Spring Boot, React.js, MySQL, Git, and AWS can help aspiring developers build industry-ready applications and improve their career opportunities in software development.

JavaScript Libraries and Frameworks with Examples

Jayashree — Tue, 09 Jun 2026 05:58:19 +0000

What is a Library?

A Library is a collection of pre-written code that helps developers perform specific tasks quickly.

Example:
When riding a bike, you decide where to go and how to ride.

You are in control.

1. React

What is React?

React is a JavaScript library used to build User Interfaces (UI).

Developed by: Meta

Real-World Example

In Instagram:

Navbar
Stories
Posts
Comments

Each section can be created as a separate component.

function Header() {
  return <h1>Instagram</h1>;
}

Why Use React?

Reusable Components
Fast Rendering
Virtual DOM
Easy State Management

Companies Using React

Meta
Netflix
Airbnb

Example Projects

Social Media Apps
E-commerce Websites
Dashboards
Chat Applications

2. jQuery

What is jQuery?

jQuery is a JavaScript library that simplifies DOM manipulation and event handling.

Without jQuery

document.getElementById("btn").style.color = "red";

With jQuery

$("#btn").css("color", "red");

Why Use jQuery?

Less Code
Easy DOM Manipulation
Easy Event Handling
Animations

Example Uses

Button Click Events
Form Validation
Show/Hide Elements
Animations

$("#btn").click(function () {
  alert("Button Clicked");
});

3. Lodash

What is Lodash?

Lodash is a utility library that provides helpful functions for working with arrays, objects, and data.

Example

Remove duplicate values from an array:

const arr = [1, 2, 2, 3, 3];

_.uniq(arr);

Output:

[1, 2, 3];

Common Functions

_.uniq();
_.sortBy();
_.filter();
_.groupBy();
_.find();

Real-World Uses

Data Filtering
Sorting
Searching
Data Transformation

4. Axios

What is Axios?

Axios is a library used to make HTTP requests to APIs.

Example

axios.get("/users")
  .then((response) => {
    console.log(response.data);
  });

Why Use Axios?

It helps the frontend communicate with the backend.

Real-World Example

Login Form
    ↓
  Axios
    ↓
   API
    ↓
Database

Common Methods

axios.get();
axios.post();
axios.put();
axios.delete();

Used In

React
Angular
Vue
Next.js

5. Chart.js

What is Chart.js?

Chart.js is a library used to create charts and graphs.

Example Data

January = 100
February = 200
March = 300

Chart.js converts this data into visual charts.

Chart Types

Bar Chart
Pie Chart
Line Chart
Doughnut Chart

Real-World Uses

Sales Reports
Dashboards
Analytics Systems
Student Result Portals

What is a Framework?

A Framework provides a complete structure and rules for building applications.

Example:

Library = Ingredients

Framework = Complete Recipe + Cooking Rules

6. Angular

What is Angular?

Angular is a full-featured frontend framework.

Developed by: Google

Technologies Used

TypeScript
HTML
CSS

Features

Routing
Forms
API Integration
Dependency Injection
State Management

Project Structure

src
 ├── app
 │    ├── components
 │    ├── services
 │    └── routing

Real-World Uses

Banking Applications
ERP Systems
Enterprise Software

7. Vue.js

What is Vue.js?

Vue.js is a lightweight and easy-to-learn frontend framework.

Example

<p>{{ name }}</p>
data() {
  return {
    name: "John"
  };
}

Output:

John

Why Use Vue?

Easy Learning Curve
Lightweight
Fast Development

Real-World Uses

Dashboards
Admin Panels
Small and Medium Websites

8. Next.js

What is Next.js?

Next.js is a framework built on top of React.

Problem with React

SEO can be challenging in traditional React applications.

Next.js Solution

Server-Side Rendering (SSR)
SEO Optimization
File-Based Routing
API Routes

Routing Example

app/
  about/
    page.js

URL:

/about

Real-World Uses

Blogs
E-commerce Websites
Business Websites
Portfolio Sites

9. Express.js

What is Express.js?

Express.js is a backend framework for Node.js.

Example

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello World");
});

Why Use Express?

Build APIs Quickly
Handle Requests and Responses
Connect Databases
Implement Authentication

Real-World Flow

React
   ↓
Axios
   ↓
Express API
   ↓
Database

Common Uses

REST APIs
CRUD Applications
Authentication Systems

10. NestJS

What is NestJS?

NestJS is a TypeScript-based backend framework.

It provides a structured architecture for large applications.

Architecture

UserModule
UserController
UserService

Request Flow

Request
   ↓
Controller
   ↓
Service
   ↓
Database

Why Use NestJS?

Clean Architecture
TypeScript Support
Scalable Applications
Enterprise-Level Development

Real-World Uses

Banking Systems
Enterprise APIs
Large Backend Applications

Quick Summary

Technology	Purpose
React	Build User Interfaces
jQuery	DOM Manipulation
Lodash	Utility Functions
Axios	API Calls
Chart.js	Charts and Graphs
Angular	Full Frontend Framework
Vue.js	Lightweight Frontend Framework
Next.js	React Framework with SEO
Express.js	Backend API Development
NestJS	Enterprise Backend Development

Easy Memory Trick

Frontend

React
Angular
Vue.js
Next.js

Backend

Express.js
NestJS

Helper Libraries

Axios → API Calls
Lodash → Utility Functions
Chart.js → Charts
jQuery → DOM Manipulation

A common Full Stack flow is:

React / Next.js
       ↓
     Axios
       ↓
 Express / NestJS
       ↓
    Database

Browser Router in React

Jayashree — Sat, 06 Jun 2026 06:03:23 +0000

When building a React application, users move between pages like Home, About, Contact, etc. Instead of reloading the entire page, React uses Browser Router to change pages without refreshing.

What is Browser Router?

BrowserRouter is used to enable routing in React applications.

It allows:

Navigate between pages
Change URL without page refresh
Create Single Page Applications (SPA)

Simply:

BrowserRouter connects URL paths with React components.

Why do we use Browser Router?

Without Browser Router:

Every page change reloads the website
Slower user experience

With Browser Router:

Faster navigation
Better user experience
No full page reload

Install React Router

npm install react-router-dom

Basic Setup

Step 1: Import BrowserRouter

import { BrowserRouter } from "react-router-dom";

Step 2: Wrap App Component

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(

<BrowserRouter>
<App />
</BrowserRouter>

);

Creating Routes

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App(){

return(

<Routes>

<Route path="/" element={<Home/>}/>

<Route path="/about" element={<About/>}/>

</Routes>

)

}

export default App;

Navigation Using Link

Instead of using:

<a href="/about">About</a>

Use:

import { Link } from "react-router-dom";

<Link to="/">Home</Link>

<Link to="/about">About</Link>

Why Link?

Because:

Prevents page refresh
Faster navigation
Keeps SPA behavior

Example Folder Structure

src

├── App.jsx

├── Home.jsx

├── About.jsx

└── main.jsx

Complete Example

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home(){

return <h1>Home Page</h1>

}

function About(){

return <h1>About Page</h1>

}

function App(){

return(

<>

<nav>

<Link to="/">Home</Link>

<Link to="/about">About</Link>

</nav>

<Routes>

<Route path="/" element={<Home/>}/>

<Route path="/about" element={<About/>}/>

</Routes>

</>

)

}

export default App;

Important Components

Component	Purpose
BrowserRouter	Enables routing
Routes	Holds all routes
Route	Creates route path
Link	Navigation between pages

Simply Definition:

BrowserRouter is used for routing in React applications. It enables navigation between pages without refreshing the browser and helps create Single Page Applications.

Conclusion

Browser Router helps React applications:

Navigate between pages
Change URL without reload
Create faster user experience
Build Single Page Applications

Without BrowserRouter -> Full page reload
With BrowserRouter -> Smooth navigation

Learning React useState Through Practical Examples

Jayashree — Wed, 03 Jun 2026 13:00:34 +0000

When starting React, understanding useState only through definitions can feel confusing. The easiest way to learn it is by building small projects.

In simple words:

useState allows React components to store data and update the UI when that data changes.

Syntax:

const [state, setState] = useState(initialValue);

Where:

state → current value
setState → function used to update value
initialValue → starting value

Example 1: Show / Hide Password

A common beginner project is password visibility toggle.

import { useState } from "react";

function App(){

 const [show,setShow]=useState(false);

 return(

 <>

 <input
 type={show ? "text":"password"}
 />

 <button
 onClick={()=>setShow(!show)}
 >

 {show ? "Hide":"Show"}

 </button>

 </>

 )

}

export default App;

How it works

Initially:

show = false

Therefore:

input type = password

Password appears hidden.

When button clicked:

setShow(!show)

If:

show = false

Then:

!show

↓

true

React updates state.

Component re-renders.

Now:

input type = text

Password becomes visible.

Flow:

Button Click

↓

State Change

↓

Re-render

↓

Updated UI

This example teaches:

Boolean state
Toggling values
Conditional rendering
Re-rendering

Example 2: Todo App

Todo App is one of the best projects to practice state management.

Features:

Add task
Edit task
Delete task

import { useState } from "react";

function App(){

 const [task,setTask]=useState("");

 const [todos,setTodos]=useState([]);

 const [editIndex,setEditIndex]=useState(null);

 function addTodo(){

 if(task==="") return;

 if(editIndex!==null){

 const updated=[...todos];

 updated[editIndex]=task;

 setTodos(updated);

 setEditIndex(null);

 }

 else{

 setTodos([...todos,task]);

 }

 setTask("");

 }

 function deleteTodo(index){

 const filtered=
 todos.filter((_,i)=>i!==index);

 setTodos(filtered);

 }

 function editTodo(index){

 setTask(todos[index]);

 setEditIndex(index);

 }

 return(

 <>

 <input
 value={task}
 onChange={(e)=>setTask(e.target.value)}
 />

 <button onClick={addTodo}>

 {editIndex!==null ? "Update":"Add"}

 </button>

 <ul>

 {

 todos.map((item,index)=>(

 <li key={index}>

 {item}

 <button
 onClick={()=>editTodo(index)}
 >

 Edit

 </button>

 <button
 onClick={()=>deleteTodo(index)}
 >

 Delete

 </button>

 </li>

 ))

 }

 </ul>

 </>

 )

}

export default App;

Adding Tasks

Suppose:

task = Study React

Click:

Add

This line runs:

setTodos([...todos,task])

React creates:

["Study React"]

UI updates automatically.

Editing Tasks

Click:

Edit

Current value goes into input.

Change text.

Click:

Update

Array value changes.

UI updates again.

Deleting Tasks

This code runs:

todos.filter((_,i)=>i!==index)

Selected task removed.

New array created.

UI updates.

What Did We Learn?

These examples teach an important React rule:

State Changes

↓

Component Re-renders

↓

UI Updates

Simple rule:

If data changes and UI should update, use state.

That is why useState becomes one of the first and most important hooks in React.

Understanding useState in React: Why Re-render Happens

Jayashree — Tue, 02 Jun 2026 06:01:18 +0000

When learning React, one common question is:

“If state changes, does React re-render?”

The answer is yes.

To understand this, first we need to know what useState does.

What is useState?

useState is a React Hook used to store and manage data inside a component.

Example:

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

Here:

count -> stores the current value
setCount -> updates the value
0 -> initial value

Initially:

count = 0

React renders the UI and displays:

What Happens When State Changes?

Consider this counter example:

import { useState } from "react";

function Counter() {

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

 return (

  <>
   <h1>{count}</h1>

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

    Increment

   </button>

  </>

 );

}

export default Counter;

When the button is clicked:

setCount(count + 1)

React updates the state.

Flow:

Button Click

↓

State Changes

↓

Component Re-renders

↓

Updated UI Appears

If count was:

After clicking:

React automatically updates the screen.

What Does Re-render Mean?

Many beginners think re-render means:

Entire website reloads
Page refresh happens

Actually:

Component function runs again
React updates only what changed

Re-render = Component runs again to update UI when data changes.

For example:

function Counter() {

 console.log("Rendering...");

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

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

}

Every state update causes:

Rendering...

because the component executes again.

Why Not Use Normal Variables?

Example:

`let count = 0;

count++;`

The value changes.

But React does not know it changed.

So UI stays the same.

With useState:

setCount(count + 1);

React knows:

“State changed. Update the UI.”

That is why useState is important.

Simple Rule to Remember

If data changes and UI should update, use state.

Short formula:

State Change

↓

Re-render

↓

Updated UI

That is the basic idea behind how React keeps the interface updated automatically.

Understanding useContext in React: A Simple Guide

Jayashree — Mon, 01 Jun 2026 05:21:44 +0000

When building React applications, passing data from one component to another is common. Initially, props work well. But what happens when data needs to travel through multiple nested components?

This is where useContext becomes useful.

What is useContext?

useContext is a React Hook that allows components to access shared data without manually passing props through every level.

Simply put:

useContext = Share data globally inside components without prop drilling

Why do we use useContext?

Imagine this:

App
↓
Header
↓
Navbar
↓
Profile

Suppose Profile needs user data.

Without useContext:

App → Header → Navbar → Profile

You must pass props through every component.

This becomes:

Hard to maintain
Repetitive
Messy in large applications

With useContext:

App
↓
Context Provider

Profile directly accesses data
Much cleaner.

Step 1: Create Context

Create a separate file.

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

Step 2: Provide Data

Wrap components with Provider.

import UserContext from "./UserContext";

function App() {

 const user = "Jayashree";

 return(

<UserContext.Provider value={user}>

<Home />

</UserContext.Provider>

 );

}

Step 3: Consume Data using useContext

import { useContext } from "react";
import UserContext from "./UserContext";

function Profile(){

 const user = useContext(UserContext);

 return <h1>{user}</h1>;

}

Output:

Jayashree

Real World Example

Common use cases:

Theme switching (Dark / Light)
Authentication data
Logged-in user details
Language settings
Shopping cart data

Props vs useContext

Props	useContext
Pass data from component to component	Share data globally
Causes prop drilling	Avoids prop drilling
Good for small data sharing	Better for common shared data

When NOT to use useContext

Avoid using useContext for:

Frequently changing large state
Complex state logic
Huge applications with many updates

In such cases:

useReducer
State management libraries

may be better choices.

Simple Formula

Create Context -> Provide Data -> Consume using useContext

Final Thoughts

useContext makes React applications cleaner by reducing unnecessary prop passing.

Think of it like:

"Instead of sending information through every room in a building, place it in a common notice board where everyone can read it."

That is essentially what useContext does.

Understanding useReducer and useRef in React

Jayashree — Fri, 29 May 2026 09:52:11 +0000

React gives developers many hooks to manage state and behavior inside components. Two hooks that often confuse beginners are useReducer and useRef. They solve different problems, and understanding when to use them makes React development much easier.

What is useReducer?

useReducer is a hook used for complex state management.

Normally we use useState:

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

But when state logic becomes larger — multiple actions, multiple state values, many updates — useReducer becomes useful.

Think of it like this:

Current State + Action → New State

Basic Syntax

const [state, dispatch] = useReducer(reducer, initialState);

state - current data
dispatch() - sends actions
reducer - function deciding how state changes

Example

import { useReducer } from "react";

function reducer(state, action) {
  switch(action.type) {
    case "increment":
      return { count: state.count + 1 };

    case "decrement":
      return { count: state.count - 1 };

    default:
      return state;
  }
}

function Counter() {

 const [state, dispatch] =
 useReducer(reducer,{count:0});

 return (
  <>
   <h1>{state.count}</h1>

   <button
    onClick={() =>
     dispatch({type:"increment"})}
   >
    +
   </button>

   <button
    onClick={() =>
     dispatch({type:"decrement"})}
   >
    -
   </button>

  </>
 );
}

Why use useReducer?

Use it when:

State logic becomes complex
Multiple related states exist
Many updates depend on previous state
Large forms or complex UI logic

Simple idea:

useReducer = State management with actions

What is useRef?

useRef creates a value that stays the same between renders without causing re-rendering.

It is commonly used for:

Accessing DOM elements
Storing values without re-render
Keeping previous values

Syntax

const ref = useRef(initialValue);

Example 1: Access DOM Element

import { useRef } from "react";

function App() {

 const inputRef = useRef();

 function focusInput(){
  inputRef.current.focus();
 }

 return(
  <>
   <input ref={inputRef}/>

   <button onClick={focusInput}>
    Focus
   </button>
  </>
 );
}

When button clicked -> input automatically focused.

Example 2: Store Value Without Re-render

function App(){

 const count = useRef(0);

 function increase(){

  count.current++;

  console.log(count.current);

 }

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

}

This updates value, but component does not re-render.

Why useRef?

Use when:

Need DOM access
Store mutable values
Prevent unnecessary re-renders
Save previous values

Simple idea:

useRef = Store something without re-rendering

Hook	Purpose
useState	Simple state management
useReducer	Complex state logic and multiple state updates
useRef	Store values without causing re-render

Final Thoughts

useState is enough for many situations.

When state logic grows bigger -> use useReducer.

When you need to remember something without re-rendering or access DOM elements -> use useRef.

Learning these hooks helps you build larger React applications more cleanly and efficiently.

Understanding useState and useEffect in React: A Simple Guide for Beginners

Jayashree — Thu, 28 May 2026 10:00:57 +0000

When people start learning React, two terms appear everywhere: useState and useEffect. At first, they might feel confusing because they look different from normal JavaScript functions. But once you understand what problem they solve, they become much easier.

This blog explains them in a simple way.

What is useState?

Imagine you have a counter application.

When someone clicks a button, the number should increase.

The question is:

How does React remember the updated value?

This is where useState comes in.

useState allows React components to store and update data.

Without State

function Counter() {

 let count = 0;

 function increase() {
   count++;
   console.log(count);
 }

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

   <button onClick={increase}>
      Increase
   </button>
   </>
 )

}

You may expect this to work.

But it doesn't.

Why?

Because React re-renders components, and when it does, count becomes 0 again.

Using useState

import { useState } from "react";

function Counter() {

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

 return (

  <>

  <h1>{count}</h1>

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

  </>

 )

}

Now it works.

Why?

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

This line creates two things:

count → stores the value
setCount → updates the value

0 is the initial value.

Whenever setCount() runs:

State updates
Component re-renders
Updated value appears on screen

Why Do We Need State?

State is useful whenever data changes.

Examples:

Counter applications
Form inputs
Dark mode toggle
Shopping cart items
API data

If data changes and UI should update:

You probably need state.

What is useEffect?

Now imagine something should happen after the component renders.

Examples:

Calling an API
Updating document title
Running timers
Listening to events

React provides useEffect for this.

Think of it like:

"Run this code after rendering."

Basic Example


import { useEffect } from "react";

function App(){

 useEffect(() => {

   console.log("Component rendered");

 });

 return <h1>Hello</h1>

}

This runs after every render.
Running Effect Only Once
Sometimes you only want code to run once.

Example:

`useEffect(()=>{

console.log("Run only once");

},[])
`
The empty array means:

Render component
|
Run effect once
|
Never run again

Usually used for:

API calls
Initial setup
Fetching data
Running Effect When Value Changes

`useEffect(()=>{

console.log("Count changed");

},[count])`

Now effect runs only when count changes.

Example:

function Counter(){

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

useEffect(()=>{

 console.log("Count Updated");

},[count])

return(

<>
<h1>{count}</h1>

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

Increase

</button>

</>

)

}

Whenever button clicks:

count changes
|
component re-renders
|
effect runs

Cleanup Function

Some things must be cleaned when component disappears.

Example:

useEffect(()=>{

 const timer=setInterval(()=>{

 console.log("running");

 },1000);

 return ()=>{

 clearInterval(timer);

 }

},[])

Why cleanup?

Without cleanup:

Timers continue running
Event listeners remain
Memory leaks happen
Cleanup prevents this.

A Simple Way to Remember

useState

"I want React to remember something."

useEffect

"I want React to do something after rendering."

Final Thoughts

Most beginner React applications are built using these two hooks.

If you understand:

How state updates UI
When components re-render
When effects execute

React becomes much easier.

You do not learn React by memorizing hooks.

You learn React by understanding:

"When data changes, what should happen?"

That is where useState and useEffect become useful.

Understanding React: Components, JSX, Virtual DOM, and More

Jayashree — Wed, 27 May 2026 05:57:32 +0000

Modern web applications are expected to be fast, interactive, and user-friendly. React has become one of the most popular JavaScript libraries because it helps developers build dynamic user interfaces efficiently. Whether you're creating a simple website or a large-scale application, React provides tools that make development easier and more organized.

What is React?

React is an open-source JavaScript library developed by Meta for building user interfaces. It focuses on creating reusable UI components, allowing developers to break complex interfaces into smaller, manageable pieces.

One of React's biggest advantages is its ability to update only the necessary parts of a webpage instead of reloading the entire page, resulting in a smoother user experience.

Components: The Building Blocks of React

Components are the heart of every React application. A component is a reusable piece of code that represents a part of the user interface.

For example, a social media application may have separate components for:

Navigation Bar
User Profile
Posts
Comments
Footer

Instead of writing the same code repeatedly, developers can create a component once and reuse it wherever needed.

Types of Components

Functional Components

Written as JavaScript functions.
Easier to understand and maintain.
Commonly used in modern React applications.

Class Components

Written using JavaScript classes.
Used more frequently before React Hooks were introduced.
Still found in older projects.

JSX: JavaScript Meets HTML

JSX stands for JavaScript XML. It allows developers to write HTML-like code inside JavaScript.

Instead of creating UI elements using lengthy JavaScript syntax, JSX provides a cleaner and more readable approach.

Example:

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

Although it looks like HTML, browsers cannot understand JSX directly. This is where Babel comes into play.

Babel: The Translator

Browsers understand JavaScript but not JSX. Babel acts as a compiler that converts JSX into regular JavaScript code that browsers can execute.

Without Babel, JSX code would result in errors because the browser wouldn't know how to interpret it.

Virtual DOM: React's Secret Weapon

One of React's most powerful features is the Virtual DOM.

What is DOM?

DOM (Document Object Model) is a tree-like representation of a webpage. Whenever a webpage changes, the browser updates the DOM.

Updating the real DOM repeatedly can become slow for large applications.

How Virtual DOM Works

React creates a lightweight copy of the real DOM called the Virtual DOM.

When data changes:

React creates a new Virtual DOM.
It compares the new version with the previous one.
It identifies exactly what changed.
Only the changed elements are updated in the real DOM.

This process is known as Diffing and Reconciliation.

Because React updates only the necessary parts, applications become faster and more efficient.

Props: Passing Data Between Components

Props (Properties) are used to pass data from a parent component to a child component.

Example:

`jsx
function Welcome(props) {
return

Hello, {props.name}

;
}

Output:

`text Hello, John `

Props make components reusable and flexible.

State: Managing Dynamic Data

State is used to store data that can change during the lifetime of a component.

Examples:

Counter values
Form inputs
User information
Shopping cart items

React provides the useState Hook to manage state in functional components.

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

Whenever the state changes, React automatically re-renders the component.

Hooks: Adding Power to Functional Components

Hooks were introduced to make functional components more powerful.

Popular Hooks include:

useState

Used for managing state.

useEffect

Used for handling side effects such as:

API calls
Timers
Event listeners

useContext

Used for sharing data across multiple components without passing props manually.

useRef

Used to directly access DOM elements and store mutable values.

One-Way Data Binding

React follows one-way data binding.

Data flows from:
Parent Component → Child Component

This makes applications easier to debug and maintain because the data flow is predictable.

Event Handling

React handles user interactions such as:

Button clicks
Form submissions
Keyboard events
Mouse events

Example:

`jsx <button onClick={handleClick}> Click Me </button> `

Event handling helps create interactive applications.

Conditional Rendering

React allows components to display different content based on conditions.

Example:

`jsx { isLoggedIn ? <Dashboard /> : <Login /> } `

This makes it easy to create dynamic user experiences.

Lists and Keys

When displaying multiple items, React uses the map() method.

`jsx
const fruits = ["Apple", "Mango"];

fruits.map((fruit) =>

{fruit}

);
`

React also uses unique keys to identify each item efficiently.

`jsx <li key={id}>{fruit}</li> `

Keys improve performance during updates.

React Fragment

Sometimes a component needs to return multiple elements without adding unnecessary HTML tags.

React Fragments solve this problem.

`jsx <> <h1>Title</h1> <p>Description</p> </> `

Fragments keep the DOM cleaner.

Why Developers Love React

React has gained massive popularity because it offers:

Reusable components
Faster rendering with Virtual DOM
Strong community support
Easy state management
Better code organization
High performance
Scalability for large applications

Conclusion

React has transformed the way developers build modern web applications. Concepts like Components, JSX, Virtual DOM, Props, State, Hooks, and One-Way Data Binding make development more efficient and maintainable. By breaking user interfaces into reusable components and updating only the necessary parts of a webpage, React delivers both excellent developer experience and high application performance.

For anyone starting their front-end development journey, learning React is a valuable step toward building modern, responsive, and scalable web applications.

React: The Modern Way to Build User Interfaces

Jayashree — Tue, 26 May 2026 06:08:32 +0000

In today's web development world, users expect websites to be fast, interactive, and responsive. Building such applications with plain JavaScript can become difficult as the project grows. This is where React comes in.

React is a popular JavaScript library developed by Meta for building user interfaces. It helps developers create modern web applications using reusable components, making development faster and more organized.

Why React?

Imagine building a website with many buttons, forms, menus, and dynamic content. Managing all these elements manually using JavaScript can be complex and time-consuming.

React simplifies this process by allowing developers to break the UI into small, reusable pieces called components. Each component handles a specific part of the interface, making the code easier to understand and maintain.

Key Features of React

Component-Based Architecture

React applications are built using components. Instead of writing the same code repeatedly, developers can create a component once and reuse it wherever needed.
For example, a navigation bar component can be used across multiple pages without rewriting the code.

JSX

React uses JSX (JavaScript XML), which allows developers to write HTML-like syntax inside JavaScript.

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

JSX makes the code more readable and easier to understand.

Virtual DOM

One of React's biggest advantages is the Virtual DOM.
When data changes, React first updates a lightweight copy of the DOM called the Virtual DOM. It then compares the new version with the previous one and updates only the necessary parts of the actual DOM.
This process improves performance and provides a smoother user experience.

One-Way Data Flow

React follows a one-way data flow model, where data moves from parent components to child components. This makes applications more predictable and easier to debug.

Hooks

Hooks allow functional components to manage state and perform side effects.

Some commonly used hooks are:

useState
useEffect
useRef
useContext

Hooks make React development cleaner and reduce the need for class components.

Advantages of React
Easy to learn and use
Reusable components
Better performance through Virtual DOM
Strong community support
Scalable for large applications
Widely used in the industry
Real-World Usage
Many popular applications and websites use React because of its flexibility and performance. It is commonly used for building dashboards, e-commerce platforms, social media applications, and enterprise-level web applications.

Conclusion

React has become one of the most widely used technologies for front-end development. Its component-based architecture, Virtual DOM, JSX, and powerful ecosystem help developers build modern web applications efficiently.

Whether you're a beginner learning web development or an experienced developer building large-scale applications, React is a valuable skill that can significantly improve the way you create user interfaces.