DEV Community: Mahalakshmi C

Python

Mahalakshmi C — Fri, 30 Oct 2026 15:03:40 +0000

What is Python?

Python is a high-level, interpreted, general-purpose programming language. It was created by Guido van Rossum and was first released in 1991.

Python is one of the most popular programming languages because it has simple syntax and is easy to learn and understand. It is widely used in web development, data science, artificial intelligence, machine learning, automation, and many other fields.

Features of Python

Python provides several important features that make it popular among developers.

1. Easy to Learn

Python has simple and readable syntax, making it suitable for beginners.

2. Interpreted Language

Python code is executed by the Python interpreter. It does not require a separate manual compilation step like traditional compiled languages.

3. High-Level Language

Python hides many low-level programming details, allowing developers to focus on solving problems.

4. Object-Oriented Programming

Python supports object-oriented programming concepts such as classes, objects, inheritance, polymorphism, and encapsulation.

5. Dynamically Typed

Python does not require developers to declare the data type of a variable explicitly. The type is determined at runtime.

Example:

name = "Python"
age = 25

print(name)
print(age)

6. Platform Independent

Python programs can run on different operating systems such as Windows, Linux, and macOS, provided the required Python environment is available.

7. Open Source

Python is free to download, use, modify, and distribute.

8. Large Standard Library

Python provides many built-in modules and libraries that help developers perform different tasks without writing everything from scratch.

Applications of Python

Python is used in various areas of software development.

Web Development
Data Science
Artificial Intelligence
Machine Learning
Automation
Game Development

Disadvantages of Python

1. Slower Execution Speed

Python is generally slower than compiled languages like C, C++, and Java because of its execution model and dynamic typing.

2. High Memory Consumption

Python can consume more memory compared to some other programming languages. This can be a disadvantage when developing memory-intensive applications.

3. Not Ideal for Mobile Development

Python is not commonly used for native mobile application development. Languages and frameworks such as Kotlin, Swift, and Flutter are more popular for mobile apps.

4. Runtime Errors

Since Python is dynamically typed, some errors related to data types may only be identified when the program runs.

5. Global Interpreter Lock (GIL)

In standard CPython builds, the GIL limits the execution of multiple threads performing Python bytecode simultaneously. This can affect CPU-intensive multithreaded programs.

Conclusion

Python is a powerful, versatile, and beginner-friendly programming language. Its simple syntax, extensive libraries, and wide range of applications make it an excellent choice for both beginners and experienced developers.

TanStack Query in React

Mahalakshmi C — Tue, 27 Oct 2026 07:27:32 +0000

1. What is TanStack Query?

TanStack Query is a library used to fetch, cache, update, and manage server data in React applications.

It was previously known as React Query.

When we fetch data from an API using Axios or fetch(), we usually need to manage loading, error, and data states ourselves. TanStack Query helps manage these tasks and provides features such as caching and automatic refetching.

2. Why do we use TanStack Query?

Fetching data: Gets data from an API.
Caching: Stores previously fetched data to reduce unnecessary requests.
Loading state: Helps us know when data is loading.
Error handling: Makes it easier to handle API errors.
Automatic refetching: Can fetch updated data when certain events occur.
Mutations: Helps create, update, and delete server data.

3. How to install TanStack Query

Install the package:

npm install @tanstack/react-query

4. Setting up TanStack Query

First, create a QueryClient and wrap the application with QueryClientProvider.

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Explanation:

QueryClient manages caching and query-related operations.
QueryClientProvider makes the query client available to components inside it.

5. What is `useQuery()`?

useQuery() is a hook used to fetch and manage data from a server.

Example using Axios

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

function App() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/users"
      );
      return response.data;
    },
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Something went wrong!</p>;

  return (
    <div>
      <h2>User List</h2>
      {data.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default App;

Important properties

queryKey: A unique key that identifies the query and its cached data.
queryFn: The function that fetches the data.
data: The successfully returned data.
isLoading: Indicates that the query has no data yet and is loading.
isError: Indicates that the query failed.

6. What is `useMutation()`?

useMutation() is used to create, update, or delete data on the server.

For example, adding a new user:

import { useMutation } from "@tanstack/react-query";
import axios from "axios";

function AddUser() {
  const mutation = useMutation({
    mutationFn: (newUser) =>
      axios.post(
        "https://jsonplaceholder.typicode.com/users",
        newUser
      ),
  });

  const handleAdd = () => {
    mutation.mutate({
      name: "Maha",
      email: "maha@example.com",
    });
  };

  return (
    <div>
      <button onClick={handleAdd}>Add User</button>
      {mutation.isPending && <p>Adding user...</p>}
      {mutation.isError && <p>Failed to add user.</p>}
      {mutation.isSuccess && <p>User added successfully!</p>}
    </div>
  );
}

export default AddUser;

This example sends a POST request. The JSONPlaceholder API is a testing API, so the created user is not permanently saved.

7. What is caching?

Caching means keeping previously fetched data so it can be reused instead of requesting the same data unnecessarily.

For example, when a user list is fetched once, TanStack Query can keep that data in its cache. When the same query is used again, the cached data may be available immediately while a background refetch happens when appropriate.

The queryKey helps TanStack Query identify which cached data belongs to which query.

8. TanStack Query vs `useEffect()` and Axios

Feature	`useEffect()` + Axios	TanStack Query
Fetch API data	Yes	Yes
Loading and error state	Manage manually	Built-in query states
Caching	Build it yourself	Built-in
Refetching	Implement manually	Built-in options
Server-data updates	Manage manually	Supports mutations and cache updates

Axios and TanStack Query are not replacements for each other. Axios makes the request; TanStack Query manages the request's server-state lifecycle.

9. How does TanStack Query work?

A component calls useQuery().
TanStack Query checks the query key and cache.
If needed, it runs the queryFn to fetch data.
The component receives loading, error, and data states.
The result is cached and can be reused by matching queries.

React.memo in React

Mahalakshmi C — Thu, 22 Oct 2026 14:49:45 +0000

What is React.memo?

React.memo is a higher-order component in React that helps prevent unnecessary re-renders of a functional component when its props have not changed.

Normally, when a parent component re-renders, its child components may also re-render. React.memo can skip a child component's re-render if its props are unchanged.

Syntax

const MemoizedComponent = React.memo(Component);

Here:

React.memo() receives a component.
It returns a memoized version of that component.
React compares the previous props with the new props using shallow comparison by default.

Why Do We Use React.memo?

We use React.memo to:

Avoid unnecessary child component re-renders.
Improve performance in suitable situations.
Optimize components that render frequently with unchanged props.
Reduce repeated rendering work in large applications.

Example Without React.memo

import { useState } from "react";

function Child() {
    console.log("Child rendered");

    return <h2>Hello from Child</h2>;
}

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

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

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

            <Child />
        </div>
    );
}

export default App;

How does it work?

Whenever the button is clicked, the count state changes and App re-renders.

The Child component also re-renders, even though it does not receive any props and its output has not changed.

Example With React.memo

import { useState, memo } from "react";

const Child = memo(function Child() {
    console.log("Child rendered");

    return <h2>Hello from Child</h2>;
});

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

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

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

            <Child />
        </div>
    );
}

export default App;

How does it work?

Initially, the Child component renders.
Clicking Increase updates the parent's count.
The parent re-renders.
React checks the child's props.
Since the child has no props to compare, React can skip its re-render.

Note: React may still re-render a memoized component when its own state or a context value it uses changes. Memoization is an optimization, not a guarantee.

React.memo vs useMemo

Feature	Purpose
`React.memo`	Memoizes a component based on its props
`useMemo`	Memoizes a calculated value

Conclusion

React.memo is useful for optimizing functional components by skipping re-renders when their props remain unchanged. It is most helpful when a component renders frequently and its rendering work is significant. It should be used when it provides a meaningful performance benefit, rather than automatically wrapping every component.

useCallback, useMemo, and useReducer in React

Mahalakshmi C — Mon, 12 Oct 2026 14:10:33 +0000

React provides several Hooks to manage state, optimize performance, and organize component logic.

1. useCallback Hook

What is useCallback?

useCallback is a React Hook that caches a function definition between renders until its dependencies change.

It is useful when we want to avoid creating a new function reference on every render, especially when passing callbacks to memoized child components.

Syntax

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

Callback function: The function we want to cache.
Dependency array: Values that the function depends on.
When a dependency changes, React returns a new function definition.

Example

import { useState, useCallback } from "react";

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

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

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

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

            <button onClick={showMessage}>
                Show Message
            </button>
        </div>
    );
}

export default App;

How does it work?

useCallback caches the showMessage function.
The empty dependency array means the function reference remains cached across renders, provided the component remains mounted.
Clicking the Increase button changes the state and re-renders the component.
React can reuse the cached function reference.

Important: useCallback does not prevent a component from re-rendering by itself. It is most useful when function identity matters, such as when passing a callback to a child wrapped in React.memo.

Why do we use useCallback?

To preserve function references between renders.
To help optimize memoized child components.
To avoid unnecessary effect re-runs caused by changing function dependencies.

2. useMemo Hook

What is useMemo?

useMemo is a React Hook that caches the result of a calculation between renders until its dependencies change.

It is useful when a calculation is expensive and does not need to be repeated when its inputs remain the same.

Syntax

const cachedValue = useMemo(() => {
    return calculateValue();
}, [dependencies]);

Callback function: Contains the calculation.
Dependency array: Contains the values used by the calculation.
Return value: The calculated result, which React can reuse while the dependencies remain unchanged.

Example

import { useState, useMemo } from "react";

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

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

    return (
        <div>
            <h2>Number: {number}</h2>
            <h2>Square: {square}</h2>
            <h2>Count: {count}</h2>

            <button onClick={() => setNumber(number + 1)}>
                Change Number
            </button>

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

export default App;

How does it work?

Initially, number is 5, so the square is 25.

When the Increase Count button is clicked, count changes, but number remains the same. React can reuse the cached square value instead of recalculating it.

When the number changes, React recalculates the square.

Why do we use useMemo?

To cache expensive calculation results.
To avoid unnecessary recalculations.
To help optimize rendering when calculations are costly.

Important: Do not use useMemo for every calculation. Simple calculations usually do not need it. React treats memoization as an optimization, not a guarantee.

3. useReducer Hook

What is useReducer?

useReducer is a React Hook used to manage state through a reducer function and actions.

It is useful when state logic becomes complex or when several actions need to update the same state.

Syntax

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

useReducer returns an array containing two values:

state — the current state.
dispatch — a function used to send an action to the reducer.

Important Terms

Reducer function: Receives the current state and an action, then returns the next state.

Action: An object that describes what should happen.

Dispatch: Sends an action to the reducer.

Initial state: The starting state value.

Example: Counter

import { useReducer } from "react";

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

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

        case "reset":
            return { count: 0 };

        default:
            return state;
    }
}

function App() {
    const initialState = { count: 0 };

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

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

            <button onClick={() => dispatch({ type: "increase" })}>
                Increase
            </button>

            <button onClick={() => dispatch({ type: "decrease" })}>
                Decrease
            </button>

            <button onClick={() => dispatch({ type: "reset" })}>
                Reset
            </button>
        </div>
    );
}

export default App;

How does it work?

The initial state is { count: 0 }.
Clicking Increase calls dispatch({ type: "increase" }).
The reducer receives the current state and the action.
The reducer returns a new state object.
React updates the state and re-renders the component.

Why do we use useReducer?

To organize complex state logic.
To handle multiple types of state updates.
To keep state transitions in one reducer function.
To manage related state values together.

For example, useReducer can be useful in a shopping cart, form management, or a task management application.

Difference Between useCallback, useMemo, and useReducer

Hook	Main purpose	Returns
`useCallback`	Caches a function definition	Cached function
`useMemo`	Caches a calculation result	Cached value
`useReducer`	Manages state using actions and a reducer	Array containing state and dispatch

Conclusion

useCallback and useMemo help optimize performance when caching is useful. useReducer helps manage state updates through a structured reducer function. Understanding these Hooks makes it easier to build React applications that are organized, maintainable, and efficient.

Lifting State Up in React

Mahalakshmi C — Thu, 08 Oct 2026 15:00:16 +0000

What is Lifting State Up?

Lifting State Up is a React concept where the state is moved from a child component to their common parent component so that multiple child components can share and use the same state.

When two or more child components need to use the same data, move the state to their nearest common parent.

Why Do We Lift State?

Normally, data flows from parent to child using props.

But sometimes two child components need to access or update the same data.

For example:

          App
        /     \
    Input     Display

Suppose Input changes a value and Display needs to show that value.

If the state is inside Input, Display cannot directly access it.

So, we move the state to the parent:

          App
       state
        /   \
       ↓     ↓
    Input   Display

Now both child components can communicate through the parent.

Example

Suppose we want to enter a name in one component and display it in another component.

Parent Component

import { useState } from "react";

function App() {

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

    return (
        <div>
            <InputBox name={name} setName={setName} />

            <Display name={name} />
        </div>
    );
}

export default App;

Here, the state:

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

is stored in the parent component App.

Child Component 1 – InputBox

function InputBox({ name, setName }) {

    return (
        <input
            value={name}
            onChange={(e) => setName(e.target.value)}
        />
    );
}

The InputBox receives:

name
setName

through props.

When the user types something, setName() updates the state in the parent.

Child Component 2 – Display

function Display({ name }) {

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

The Display component receives the updated name through props and displays it.

How Does It Work?

The flow of data is:

             App
        name + setName
          /        \
         ↓          ↓
    InputBox      Display
         |
         ↓
     setName()
         |
         ↓
    App state updates
         |
         ↓
     App re-renders
         |
         ↓
    Updated name
         ↓
      Display

The important point is that the state belongs to the parent, while the child components receive the state and setter function through props.

Lifting State Up vs Props

Props are the method used to pass the state and setter function from the parent to the child.

Lifting State Up
       ↓
Move state to common parent
       ↓
Pass state using props
       ↓
Child components share the data

Conclusion

Lifting State Up is a technique used to share state between sibling components. The state is moved to their nearest common parent, and the parent passes the state and setter function to the children through props. This keeps data flow predictable and makes components easier to manage.

React Router DOM

Mahalakshmi C — Wed, 07 Oct 2026 13:31:14 +0000

What is React Router DOM?

React Router DOM is a library used in React applications to handle routing and navigation.

Routing means displaying different components or pages based on the URL.

For example, a blog application may have:

/              → Home
/about         → About
/blog          → Blog
/contact       → Contact

React Router allows users to move between these pages without completely reloading the browser page.

Why Do We Use React Router?

React applications are often Single Page Applications (SPAs). This means the application can display different content without loading a completely new HTML page from the server for every navigation.

React Router helps us:

Create different routes
Navigate between pages
Display different components for different URLs
Create dynamic routes
Handle nested routes
Navigate programmatically

Installing React Router DOM

First, install the package:

npm install react-router-dom

Then we can use it in our React application.

Important Components

Some commonly used React Router features are:

BrowserRouter
Routes
Route
Link
NavLink
useNavigate
useParams

Basic Example

Suppose we have a simple blog with three pages:

Home
Blog
About

App.jsx

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

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

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

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

function App() {
    return (
        <BrowserRouter>

            <nav>
                <Link to="/">Home</Link>
                <Link to="/blog">Blog</Link>
                <Link to="/about">About</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/blog" element={<Blog />} />
                <Route path="/about" element={<About />} />
            </Routes>

        </BrowserRouter>
    );
}

export default App;

How Does This Code Work?

1. BrowserRouter

<BrowserRouter>

BrowserRouter enables routing in the React application and uses the browser's URL to manage navigation.

2. Routes

<Routes>

Routes contains all the routes defined in the application.

3. Route

<Route path="/blog" element={<Blog />} />

A Route connects a URL path with a React component.

Here:

/blog → Blog component

When the browser URL becomes /blog, React Router displays the Blog component.

4. Link

<Link to="/blog">Blog</Link>

Link is used to navigate between routes.

When the user clicks Blog, React Router changes the URL and displays the Blog component without performing a full page reload.

Dynamic Routing

React Router can also create dynamic routes.

For example, a blog may have different posts:

/blog/1
/blog/2
/blog/3

We can create a dynamic route using:

<Route path="/blog/:id" element={<BlogPost />} />

Here, :id is a dynamic parameter.

We can access it using useParams().

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

function BlogPost() {

    const { id } = useParams();

    return <h1>Blog Post ID: {id}</h1>;
}

If the URL is:

/blog/10

the output will be:

Blog Post ID: 10

useNavigate

useNavigate is used when we want to navigate to another route using JavaScript.

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

function Login() {

    const navigate = useNavigate();

    function handleLogin() {
        navigate("/home");
    }

    return (
        <button onClick={handleLogin}>
            Login
        </button>
    );
}

After clicking the button, the user is navigated to /home.

React Router Flow

User clicks a Link
       ↓
URL changes
       ↓
React Router checks the URL
       ↓
Matching Route is found
       ↓
Corresponding Component is rendered
       ↓
UI is updated

Important Points

BrowserRouter enables routing.
Routes contains the application's routes.
Route connects a URL path with a component.
Link is used for navigation.
useParams accesses dynamic URL parameters.
useNavigate allows navigation using JavaScript.
React Router allows navigation without a full page reload.

Conclusion

React Router DOM provides a simple way to implement navigation and routing in React applications. It is especially useful for applications with multiple views, such as blogs, dashboards, shopping websites, and portfolio applications.

useContext Hook in React

Mahalakshmi C — Mon, 05 Oct 2026 13:10:12 +0000

useContext

useContext is a React Hook used to access shared data from a Context without passing props manually through every component.

It is useful when the same data needs to be accessed by multiple components.

Examples of data that can be shared using Context include:

User information
Theme
Language
Login status
Application settings

Why Do We Use useContext?

Normally, data is passed from a parent component to a child component using props.

For example:

App
 ↓
Navbar
 ↓
Profile

If Profile needs some data from App, we may have to pass that data through Navbar even if Navbar does not need it.

This is called prop drilling.

App
 ↓ props
Navbar
 ↓ props
Profile

useContext helps avoid this problem.

With Context, the data can be shared directly:

        Context
       ↙       ↘
   Navbar     Profile

How Does useContext Work?

There are three main steps:

Create a Context
Provide a value using Provider
Access the value using useContext

Example

Suppose we want to share a username between components.

Step 1: Create Context

import { createContext } from "react";

const UserContext = createContext();

createContext() creates a Context object.

Step 2: Provide the Value

function App() {

    return (
        <UserContext.Provider value="Maha">
            <Profile />
        </UserContext.Provider>
    );
}

Here:

value="Maha"

is the data we want to share.

The Profile component is placed inside the Provider, so it can access the value.

Step 3: Access the Value Using useContext

import { useContext } from "react";

function Profile() {

    const user = useContext(UserContext);

    return <h2>Hello {user}</h2>;
}

Here:

const user = useContext(UserContext);

gets the value provided by:

<UserContext.Provider value="Maha">

The output will be:

Hello Maha

So the data flow is:

createContext()
      ↓
Context Provider
      ↓
value="Maha"
      ↓
useContext()
      ↓
Profile Component

useContext vs Props

Props	useContext
Data is passed from parent to child	Data can be shared through Context
Useful for direct parent-child communication	Useful when many components need the same data
Can cause prop drilling	Helps avoid prop drilling
Data is passed through component props	Data is accessed using `useContext()`

Conclusion

useContext makes it easier to share data across multiple React components without passing props through every level of the component tree. It is especially useful for application-wide or shared data such as themes, user information, and settings.

useRef Hook in React

Mahalakshmi C — Thu, 01 Oct 2026 13:10:30 +0000

useRef is a React Hook that is used to store a value that persists between renders without causing the component to re-render when the value changes.

It is also commonly used to access and interact with DOM elements directly.

Syntax

const reference = useRef(initialValue);

For example:

const count = useRef(0);

What Does useRef Return?

useRef() returns an object containing a property called current.

const count = useRef(0);

console.log(count);

The result is similar to:

{
    current: 0
}

The value can be accessed or changed using:

count.current

For example:

count.current = count.current + 1;

Why Do We Use useRef?

useRef is commonly used for:

Accessing DOM elements
Storing values between renders
Keeping a previous value
Storing values without causing a re-render

Example 1: Accessing a DOM Element

One of the most common uses of useRef is focusing an input element.

import { useRef } from "react";

function App() {

    const inputRef = useRef();

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

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

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

export default App;

How does it work?

First, we create a ref:

const inputRef = useRef();

Then we attach it to the input:

<input ref={inputRef} />

React stores the input DOM element inside:

inputRef.current

When the button is clicked:

inputRef.current.focus();

the input receives focus.

Example 2: useRef Does Not Cause Re-render

Consider:

const count = useRef(0);

We can change the value:

count.current = count.current + 1;

But changing count.current does not cause the component to re-render.

This is an important difference between useRef and useState.

useState	useRef
Stores state	Stores a mutable reference
Updating state causes re-render	Updating `.current` does not cause re-render
Uses a setter function	Uses `.current`
Used when UI needs to update	Useful when UI does not need to update

useRef for Storing Previous Values

useRef can also be used to remember a value from the previous render.

import { useEffect, useRef, useState } from "react";

function App() {

    const [name, setName] = useState("Maha");
    const previousName = useRef("");

    useEffect(() => {
        previousName.current = name;
    }, [name]);

    return (
        <div>
            <h2>Current Name: {name}</h2>
            <h2>Previous Name: {previousName.current}</h2>

            <button onClick={() => setName("Lakshmi")}>
                Change Name
            </button>
        </div>
    );
}

export default App;

Here, previousName.current can store a value that persists between renders.

useRef vs useState

Suppose we have:

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

When we write:

setCount(count + 1);

React updates the state and re-renders the component.

But with:

const count = useRef(0);

when we write:

count.current = count.current + 1;

the value changes, but React does not re-render the component just because the ref changed.

Simple Flow

useState

State changes
     ↓
React re-renders
     ↓
UI updates

useRef

ref.current changes
     ↓
No automatic re-render
     ↓
Component UI does not automatically update

Conclusion

useRef is useful when a value needs to persist between renders without triggering a re-render. It is especially useful for accessing DOM elements, storing previous values, and keeping mutable values that do not directly control the UI.

useState and useEffect in React

Mahalakshmi C — Wed, 30 Sep 2026 15:22:47 +0000

useState

useState is a React Hook used to create and manage state in a functional component.

State is a value that can change during the execution of a component. When the state changes, React re-renders the component and updates the UI.

Syntax

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

Here:

state → stores the current value
setState → updates the value
initialValue → initial value of the state

What does useState return?

useState() returns an array containing two values:

[
    current state value,
    setter function
]

For example:

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

Here:

count → current state value
setCount → setter function used to update the state
0 → initial value

The array returned by useState() is commonly destructured into two variables.

Example

import { useState } from "react";

function Counter() {

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

    function increase() {
        setCount(count + 1);
    }

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

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

export default Counter;

When the button is clicked, setCount() updates the state.

setCount(count + 1);

React then re-renders the component with the new value.

Setter Function

The second value returned by useState() is called the setter function.

For example:

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

Here:

name     → current value
setName  → setter function

We should use the setter function to update state:

setName("Lakshmi");

Instead of directly changing the state:

name = "Lakshmi";   // ❌

The setter function tells React that the state has changed and the component needs to be rendered again.

useEffect

useEffect is a React Hook used to perform side effects in a functional component.

A side effect is an operation that happens outside the normal process of calculating and displaying the UI.

Common examples include:

Fetching data from an API
Updating localStorage
Setting a timer
Adding event listeners
Working with external systems

Syntax

useEffect(() => {
    // side effect code
}, [dependencies]);

The first argument is a callback function.

The second argument is called the dependency array.

Example

import { useEffect, useState } from "react";

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

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

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

export default Counter;

Here, useEffect depends on count:

[count]

Whenever count changes, the effect runs.

Dependency Array

The dependency array controls when the effect runs.

No dependency array

useEffect(() => {
    console.log("Effect runs");
});

The effect runs after every render.

Empty dependency array

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

An empty dependency array means the effect does not depend on changing state or props. It runs after the initial render.

With dependencies

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

The effect runs after the initial render and again when count changes.

Difference Between useState and useEffect

useState	useEffect
Manages state	Performs side effects
Stores changing data	Runs code after rendering
Updating state causes a re-render	Responds to rendering/dependency changes
Example: counter value	Example: API call or localStorage

Complete Example Using useState and useEffect

import { useState, useEffect } from "react";

function Counter() {

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

    function increase() {
        setCount((previousCount) => previousCount + 1);
    }

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

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

export default Counter;

How this code works

First:

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

creates a state variable called count with an initial value of 0.

When the button is clicked:

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

the setter function updates the state.

After the state changes, React renders the component again.

Then:

useEffect(() => {
    console.log("Count changed:", count);
}, [count]);

runs because count has changed.

Simple Flow

useState
   ↓
Creates state + setter function
   ↓
User clicks button
   ↓
Setter function updates state
   ↓
Component re-renders
   ↓
useEffect checks dependency
   ↓
Effect callback runs

Hooks in React

Mahalakshmi C — Tue, 29 Sep 2026 13:13:05 +0000

What are Hooks?

Hooks are special(Built-in) functions provided by React that allow functional components to use React features such as state, side effects, context, and references.

Hooks were introduced in React 16.8.

Before Hooks, features such as state and lifecycle methods were mainly used with class components. Hooks made it possible to use these features in functional components.

Some commonly used Hooks are:

useState
useEffect
useContext
useRef
useMemo
useCallback

Why Do We Use Hooks?

Hooks are used to:

Manage state in functional components
Perform side effects
Access context data
Store references to DOM elements
Optimize certain calculations and functions
Reuse stateful logic

Rules of Hooks

React has some important rules for using Hooks.

Rule 1: Call Hooks at the Top Level

Do not call Hooks inside:

if statements
for loops
while loops
Nested functions

Correct:

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

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

Incorrect:

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

Rule 2: Call Hooks from React Functions

Hooks should be called from:

React functional components
Custom Hooks

1. useState

useState is used to create and manage state in a functional component.

Example

import { useState } from "react";

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

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

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

export default Counter;

Here:

count → current state value
setCount → function used to update the state
0 → initial value

When setCount changes the value, React re-renders the component.

2. useEffect

useEffect is used to perform side effects in a component.

Examples of side effects include:

Fetching data from an API
Updating localStorage
Setting timers
Adding event listeners

Example

import { useEffect, useState } from "react";

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

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

export default Counter;

Whenever count changes, the effect runs.

3. useRef

useRef is used to store a value that persists between renders without causing a re-render when the value changes.

It is also commonly used to access a DOM element.

Example

import { useRef } from "react";

function InputBox() {
    const inputRef = useRef();

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

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

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

export default InputBox;

Here, useRef is used to access the input element.

Conclusion

Hooks make functional components more powerful by allowing them to use React features such as state, effects, context, and references. Among them, useState and useEffect are two of the most commonly used Hooks when learning React.

Child Components and Props in React

Mahalakshmi C — Sun, 27 Sep 2026 13:32:31 +0000

React applications are built using components. Components can be connected to each other, and one component can pass data to another component.

What is a Child Component?

A child component is a component that is rendered inside another component.
The component that contains the child is called the parent component.

For example:

function BlogPost() {
    return <h2>Introduction to React</h2>;
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>
            <BlogPost />
        </div>
    );
}

Here:

App is the parent component.
BlogPost is the child component.
<BlogPost /> is used inside App.

The relationship is:

App (Parent)
    ↓
BlogPost (Child)

What are Props?

Props stands for Properties.

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

Props are passed using attributes.

Example

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

function App() {
    return (
        <div>
            <BlogPost title="Introduction to React" />
        </div>
    );
}

Here:

<BlogPost title="Introduction to React" />

The parent component App passes the value:

Introduction to React

to the child component BlogPost.

The child receives this data through:

props.title

So the flow is:

Parent Component
       |
       |  title="Introduction to React"
       ↓
Child Component
       |
       ↓
props.title

Why Do We Use Props?

Props are mainly used to make components reusable.

For example, instead of creating a separate component for every blog post, we can create one BlogPost component and pass different data to it.

function BlogPost(props) {
    return (
        <article>
            <h2>{props.title}</h2>
            <p>{props.description}</p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost
                title="Introduction to React"
                description="React is a JavaScript library for building user interfaces."
            />

            <BlogPost
                title="Understanding JavaScript"
                description="JavaScript is used to create interactive web applications."
            />
        </div>
    );
}

export default App;

Here, the same BlogPost component is reused twice with different data.

Output

My Blog

Introduction to React
React is a JavaScript library for building user interfaces.

Understanding JavaScript
JavaScript is used to create interactive web applications.

The component remains the same, but the data changes through props.

Props are read-only.

A child component should not directly change the props it receives from its parent.

For example:

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

Props Can Contain Different Types of Data

<BlogPost
    title="React"
    views={100}
    isPublished={true}
/>

Here:

title → String
views → Number
isPublished → Boolean

Props can also pass arrays, objects, and even functions.

Conclusion

A child component is a component rendered inside a parent component. Props provide a way for the parent component to send data to its child component.

The basic flow is:

Parent Component
       ↓
      Props
       ↓
Child Component
       ↓
    Display Data

Props make React components reusable, flexible, and easier to manage.

Components in React

Mahalakshmi C — Fri, 25 Sep 2026 14:32:57 +0000

A component is a reusable and independent part of a user interface in React.
Components help divide a large application into smaller and manageable parts.

For example, a website can be divided into components such as:

Navbar
Header
Home
Product
Footer
Login Form

Each component can have its own structure and behavior.

Why Are Components Used?

Components provide several benefits:

Reusability
Easy Maintenance
Separation of UI
Passing Data - Props are used to pass data from one component to another.

Types of Components

React components are mainly written as functional components in modern React.

Functional Component

A functional component is a JavaScript function that returns JSX.

function App() {
    return (
        <div>
            <Welcome />
            <p>This is my React application.</p>
        </div>
    );
}

App is the main component, and Welcome is used inside App.

Class Components

Class components are an older way of creating React components.

class Welcome extends React.Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

Class components were commonly used before Hooks were introduced.

Example for components

function BlogPost() {
    return (
        <article>
            <h2>Introduction to React</h2>
            <p>
                React is a JavaScript library used to build
                user interfaces.
            </p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost />
            <BlogPost />
        </div>
    );
}

export default App;

How Does This Work?

The BlogPost component contains the UI for one blog post.

Inside the App component:

<BlogPost /> <BlogPost />

the same component is used twice.

Therefore, React displays two blog posts without writing the same HTML/JSX code again.

My Blog

Introduction to React
React is a JavaScript library used to build user interfaces.

Introduction to React
React is a JavaScript library used to build user interfaces.

Conclusion

Components are a fundamental part of React. They allow an application to be divided into small, reusable, and manageable pieces. By combining different components, a complete React application can be created.

DEV Community: Mahalakshmi C

Python

What is Python?

Features of Python

1. Easy to Learn

2. Interpreted Language

3. High-Level Language

4. Object-Oriented Programming

5. Dynamically Typed

6. Platform Independent

7. Open Source

8. Large Standard Library

Applications of Python

Disadvantages of Python

1. Slower Execution Speed

2. High Memory Consumption

3. Not Ideal for Mobile Development

4. Runtime Errors

5. Global Interpreter Lock (GIL)

Conclusion

TanStack Query in React

1. What is TanStack Query?

2. Why do we use TanStack Query?

3. How to install TanStack Query

4. Setting up TanStack Query

5. What is useQuery()?

Example using Axios

Important properties

6. What is useMutation()?

7. What is caching?

8. TanStack Query vs useEffect() and Axios

9. How does TanStack Query work?

React.memo in React

What is React.memo?

Syntax

Why Do We Use React.memo?

Example Without React.memo

How does it work?

Example With React.memo

How does it work?

React.memo vs useMemo

Conclusion

useCallback, useMemo, and useReducer in React

1. useCallback Hook

What is useCallback?

Syntax

Example

How does it work?

Why do we use useCallback?

2. useMemo Hook

What is useMemo?

Syntax

Example

How does it work?

Why do we use useMemo?

3. useReducer Hook

What is useReducer?

Syntax

Important Terms

Example: Counter

How does it work?

Why do we use useReducer?

Difference Between useCallback, useMemo, and useReducer

Conclusion

Lifting State Up in React

What is Lifting State Up?

Why Do We Lift State?

Example

Parent Component

Child Component 1 – InputBox

Child Component 2 – Display

How Does It Work?

Lifting State Up vs Props

Conclusion

React Router DOM

What is React Router DOM?

Why Do We Use React Router?

Installing React Router DOM

Important Components

Basic Example

5. What is `useQuery()`?

6. What is `useMutation()`?

8. TanStack Query vs `useEffect()` and Axios