Hey developers !

Ever wondered how to make API calls cleaner, smarter, and more reliable in your React applications?

Meet Axios — It is used to handling HTTP requests .In this blog , we will explore about basic CRUD operations to interceptors, reusable instances, and request cancellation.

What is Axios ?

Axios is a popular third-party library that lets you make and manage HTTP request more easier than native fetch().

Why we use axios ?

Why everyone turning to axios instead of native fetch() ? There are four key reasons for this .

1. Automatic JSON transformation : In native fetch() , you have to write extra code manually to convert the response into JSON. but Axios automatically transforms responce into JSON .
2. Better Error Handling : In fetch() , Catch block only catches network errors . even if a 404(Not Found) and 500 (Internal Server Error) occurs, the promises is still treated as a successful responce . But axios automatically throws an error to catch block whenever 4xx or 5xx http status code is returned .
3. Interceptor : Axios allows you to intercept and modify HTTP requests before they are sent and intercept responses before they are delivered to your application.
4. Timeout : Axios allows you to set a maximum time to wait for a response. If the request takes longer than the specified time, Axios aborts the request and returns a timeout error.

Basic CRUD Operations :

1. C → Create : Create or add a new data by using POST method .
2. R → Read : Fetch a data from API by using GET method .
3. U → Update : modify data by using PUT / PATCH method.
4. D → Delete : Delete or remove a data by using DELETE method.

Configuration of Axios :

Step 1 : install axios libaray in your app . Install command ,

npm i axios

Step 2 : import axios in your app . Import syntax ,

import axios from 'axios';

Step 3 : Perform CRUD operations by using Axios

1. READ → aixos.get(“ url ”) → Fetch a data from Server :

import axios from 'axios';

async function fetchUsers() {
  try {

    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log("Users Data:", response.data);
    return response.data;
    
  } catch (error) {
    console.error("Error fetching users:", error.message);
  }
}

fetchUsers();

2. CREATE → axios.post(“ url ” , data ) → Create and add a new data :

import axios from 'axios';

async function createNewUser() {
  try {
    const newUser = {
      name: "Arun",
      email: "arun@example.com"
    };

    const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);
    
    console.log("Created User:", response.data);
    return response.data;
    
  } catch (error) {
    console.error("Error creating user:", error.message);
  }
}

createNewUser();

3. UPDATE → axios.put(“ url ” , updated_data) or axios.patch(“ url ” , updated_data) → Modifying data :

import axios from 'axios';

async function updateUserData(userId) {
  try {
    const updatedDetails = {
      name: "Arun Pandi",
      email: "arun.pandi@example.com"
    };

    const response = await axios.put(`https://jsonplaceholder.typicode.com/users/${userId}`, updatedDetails);
    
    console.log("Updated User:", response.data);
    return response.data;
    
  } catch (error) {
    console.error("Error updating user:", error.message);
  }
}

updateUserData(1);

4. DELETE → axios.delete(“ url ”) → Delete a data :

import axios from 'axios';

async function deleteUser(userId) {
  try {
    const response = await axios.delete(`https://jsonplaceholder.typicode.com/users/${userId}`);
    
    console.log(`User with ID ${userId} deleted successfully!`, response.status);
    return true;
    
  } catch (error) {
    console.error("Error deleting user:", error.message);
    return false;
  }
}

deleteUser(1); 

What is an Axios Instance ?

Axios instance is a custom-configured copy of axios where you define your baseURL , default headers, and timeout once. You can then reuse this instance anywhere in your project as needed.

import axios from 'axios';

// Create Instance 
export const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

import React, { useEffect, useState } from 'react';
import { api } from './api';

// use instance anywhere
export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    api.get('/posts').then(res => setPosts(res.data.slice(0, 5)));
  }, []);

  return (
    <div style={{ padding: 20 }}>
      <h2>Axios Instance Example</h2>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

What is Interceptors ?

Interceptors allow you to intercept and modify HTTP requests before they are sent to the server, as well as handle or modify responses as soon as they come back.

Type 1 : Request Interceptor

Instead of manually passing the token in the headers for every API request, you can write it just once inside a request interceptor.

api.interceptors.request.use(

  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config; 
  },
  (error) => {
    return Promise.reject(error);
  }
);

Type 2 : Response Interceptor

If the users token expires the server will send a 401 Unauthorized error. A response interceptor can catch this error and automatically redirect the user to the /login page.

api.interceptors.response.use(
  (response) => response, 
  (error) => {
    if (error.response && error.response.status === 401) {
      
      localStorage.removeItem('token');
      window.location.href = '/login'; 
    }
    return Promise.reject(error);
  }
);

What is AboutController ?

After sending an API request to the server, intercepting and canceling it midway is done using AboutController. Previously, axios used cancelToken .

However, axios now supports the modern JavaScript standard AboutController directly.

Why use AboutController?

It helps prevent unnecessary server load and memory leak warnings by instantly canceling ongoing API requests when users type fast, switch pages, or click cancel.

import { useEffect } from 'react';
import axios from 'axios';

function App() {
  useEffect(() => {
    // 1. create Controller 
    const controller = new AbortController();

    // 2. pass the request signal
axios.get('https://jsonplaceholder.typicode.com/posts', {
      signal: controller.signal 
    })
    .then(res => console.log(res.data))
    .catch(err => {
      if (axios.isCancel(err)) {
        console.log('Request cancelled successfully!');
      }
    });

    // 3. abort request during Component unmount 
    return () => {
      controller.abort();
    };
  }, []);

  return <div>Check console (Open/Close component quickly)</div>;
}

export default App;

Hey developers !

Welcome back to Part 2 of the React Router series .

In Part 1 , we covered the basics of React Router and explored different ways to navigate between pages. Now, lets take things a step further .

How do we create nested layouts , work with dynamic URLs and query parameters, manage navigation state , and handle routing errors ?

In this part, we will explore these concepts and learn how to build more flexible, and user-friendly React applications.

What is Params ?

Params (Parameters) is most important concept in react-router . It is used to pass the minimal value from one component to another component via URL.

The Major Two Types of Params :

1)URL Parameter ( Dynamic Route Segment ):

useParams is a react built-in hook . That is used to load specific item or user-profile by using placeholder variable in URL . we can get the value like variable in URL.

Step 1 : Route Setup
Define dynamic segment by using Collon (:)

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

function App() {
  return (
    <BrowserRouter> 
      <Navbar />
      <Routes>
       <Route path="/user/:userName" element={<UserProfile/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 2 : Extracting param in Component :
Exract the value by using useParams() hook .

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

function UserProfile() {
  const { userName } = useParams(); // Extracts 'username' from the URL

  return <h2>Hello, {userName}!</h2>;
}
export default UserProfile;

2.Query Params / Search Params :

These are used to handle or modify data states such as filtering, pagination, and sorting. You can access and manage these values using the useSearchParams () hook.

what is useSearchParams ?

useSearchParams is a React hook used for reading and writing URL queryparameters(such as ?search=react&sort=asc)

How to use in component :
useSearchParams works like useState hook .It will return an array and get() method used to get the values from QueryParams and it updates through the setSearchParam function.

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

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  // Read a parameter (e.g., /search?query=react -> "react")
  const query = searchParams.get("query");

  const updateSearch = () => {
    // Update the query parameter in the URL
    setSearchParams({ query: "javascript" });
  };

  return (
    <div>
      <p>Current Query: {query}</p>
      <button onClick={updateSearch}>Change to JavaScript</button>
    </div>
  );
}

What is useLocation ?

useLocation is a React hook that returns the location object representing the current URL. It allows you to access information about the current page, such as the pathname, search query parameters, hash, and any hidden state passed during navigation .

{
  "pathname": "/products/shoes",
  "search": "?sort=price",
  "hash": "#reviews",
  "state": { "fromDashboard": true },
  "key": "default"
}

How to use useLocation() hook in component :

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

function AnalyticsTracker() {
  const location = useLocation();

  return (
    <div>
      <p>Current Path: {location.pathname}</p>
      <p>Search Query String: {location.search}</p>
    </div>
  );
}

Benifits of useLocation() Hook :
1.Avoiding Extra API call .
2.Post-Login Redirection .

Nested Route & Layout :

Nested route allows you to organize web pages using simple parent-child structure (Hierarchy structure) . By palcing child <Route/> element inside a parent layout route and using the <Outlet/> component as a placeholder , this keeps common elements like navbar visible on the screen , At the same time it updates only the inner content dynamically as you navigate .

Core Attributes :

1.index (Boolean) : Sets a default child route to render inside a parent layout when the parents exact URL path matches.

2. errorElement (jsx) : To display a fallback UI , if a route crashes or fails to load properly.

<Route 
  path="/profile" 
  element={<Profile />} 
  errorElement={<ProfileErrorFallback />} 
/>

3. casesensitive(Boolean) : strictly Match the URL path letter based on their case (Example : recongnize /Admin and /admin not same )

<Routes>
  <Route 
    path="/adminDashboard" 
    element={<AdminPanel />} 
    caseSensitive={true} 
  />
</Routes>

4. context (object) : Pass custom state or data from a parent route to child routes through the <Outlet/> component.

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

function ProfileLayout() {
  const user = { name: "Arun", role: "Frontend Developer" };

  // Pass user object through context
  return (
    <div>
      <h1>Profile Header</h1>
      <Outlet context={user} /> 
    </div>
  );
}

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

export default function ChildProfile() {
  // Extract user and theme directly from the parent's outlet context
  const { user } = useOutletContext();

  return (
    <div>
      <h2>Child Component</h2>
      <p>Logged-in User: {user.name}</p>
      <p>Role: {user.role}</p>
    </div>
  );
}

What is RouterProvider ?

Routerprovider is a core component . That is introduced in react-router v6.4+ . It handle the routes through Configuration object ( JSON structure ).
It accept the router instance via createBrowserRouter and mounts your application . Unlike traditional JSX — based routing , It unlocks modern performance features like loader , action , errorElement , fallbackElement ,etc..

1.RouterProvider Configuration (Setup) :

The router prop is mandatory for the <RouterProvider/> component. To create that required router object , we use the createBrowserRouter() function .

Create Router & Wrap with RouterProvider :

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./RootLayout";
import Home from "./Home";
import About from "./About";
import ErrorPage from "./ErrorPage";

// 1. Create the router configuration object
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />, 
    children: [
      { index: true, element: <Home /> },
      { path: "about", element: <About /> },
    ],
  },
]);

// 2. Pass it to RouterProvider 
function App() {
  return <RouterProvider router={router} />;
}

export default App;

All Attributes / Props :

RouterProvider component accepts only few props. but , each one very important prop.

1. router (Mandatory) : It gets the router instance that was created by createBrowserRouter or createHashRouter function.

<RouterProvider router={router} />

2.fallbackElement : This defines what is displayed on the screen ( such as a loading spinner) while a lazy-loaded component is still being fetched.

<RouterProvider router={router} fallbackElement={<GlobalSpinner />} />

3.hydrateFallbackElement : It handles fallback UI rendering during initial hydration when using server-side rendering or frameworks .

<RouterProvider router={router} hydrateFallbackElement={<SSRSpinner />} />

4.future : This serves as an important safety feature that prevents sudden application crashes during major system upgrades.

<RouterProvider 
  router={router} 
  future={{ v7_startTransition: true }} />

Error Management (errorElement) :

errorElement is built-in property in react router . That act as a safety net .If a component throws any error during rendering or route fails to load properly , react router catch the error and automatically renders the specific fallback component instead of crashing the entire application .

Example :

import { createBrowserRouter, RouterProvider, useRouteError } from "react-router-dom";

// 1. Create a custom error fallback component
function ErrorPage() {
  const error = useRouteError();
  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <h2>Oops! Something went wrong.</h2>
      <p>{error.statusText || error.message}</p>
    </div>
  );
}

// 2. Define your routes and attach errorElement
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
    errorElement: <ErrorPage/>, // Catches errors for this route and its children
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Hey React developers !

Have you ever wondered how a single React application can navigate between multiple pages without reloading the entire website?

Meet React Router — the library that makes navigation smooth, dynamic, and seamless! . In this blog, let’s explore how it works and how we can build better, multi-page experiences with React.

What is Routing ?

Routing is nothing but displaying the different components or webpages based on the Web URL.

For example:

• /→ Home page
• /about→ About page
• /contact → Contact page
• /product → Products page

What is React-Router ?

React router is most popular routing library in React . It allows you to manage and navigate between different components or webpages in react application . It enables the creation of dynamic, single-page applications .

How to Config React-Router ?
Firstly install react-router-dom library , Install command

npm i react-router-dom

secondly import the library and use it

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

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

The Basic Core :

1. <BrowserRouter> : BrowserRouter is an engine that connects react to the browser URL bar . It acts as a parent wrapper that manages and wraps all the routing components in your React application . Which means it gives routing power to whole react app and Tracks browser URL changes .
2. <Routes> : Routes acts as a container that holds all your individual routes together . It ensure only one matching route is rendered at a time based on the current URL.
3. <Route> : Route is the actual mapper . It connects a specific URL path to its corresponding React component . It have lot of properties like path , element , component , index , loder , action , errorElement , caseSensitive , shouldRevalidate , lazy , id . But where only two properties are mandatory . There are ,
   1. path → URL string matcher → example : /profile
   2. element → JSX element to render → <Profile/>

Navigation :

Navigation is nothing but moving from one component to another component . example : move from login page to dashboard page .

What is Link ?

Link is a react component . That is used to change web URL dynamically without page re-load . Generally , an <a> tag is used for page navigation, but it causes a full page refresh.

Core Attributes :

1. to :

value will be String or Object (Mandatory Attribute) .It define Navigation path.
Examples :

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

<Link to={{ path :"/product", search : "?category=laptop&sort=asc" , hash : "#reviews",}} >
product
</Link>

2. replace (Boolean) :

Generally, a new entry is added to the browsers history stack when you click a link, allowing you to click the back button to return to the previous page. When replace = {true} is used, it replaces the current history entry instead of adding a new one. As a result, clicking the back button will skip the current page and redirect the user two steps back.

<Link to="/dashboard" replace={true}>
 Login & Go to Dashboard
 </Link>

3. state (any Data types) :

The state property some custom holds data and passes it to the destination page without showing it in the URL. This data can then be accessed using the useLocation () hook in the destination page or component.

Example :

// Passing state via Link
<Link to="/checkout" state={{ productId: 12, price: 4999 }}>
  Checkout
</Link>

// Receiving state in the destination component
import { useLocation } from "react-router-dom";

function CheckoutPage() {
  const location = useLocation();
  const { price, productId } = location.state ;

  return (
    <div>
      <h2>Checkout</h2>
      <p>Product ID: {productId}</p>
      <p>Price: {price}</p>
    </div>
  );
}

4. realoadDocument (Boolean) :

When set to true, it forces a full-page browser refresh instead of smooth client-side routing, making the link behave like a traditional multi-page website rather than a single-page application (SPA).

// Forces a full-page browser refresh instead of client-side routing
<Link to="/contact" reloadDocument={true}>
  Contact Us (Full Refresh)
</Link>

5. preventScrollReset (Boolean):

By Default , when you navigate to new page in react-router . The scroll position automatically reset to the top (0,0) . To keeps the scroll position where it was instead of resetting , you can use preventScrollReset ( which is especially helpful for nested page )

// Keeps the current scroll position instead of jumping back to the top (0,0)
<Link to="/details" preventScrollReset={true}>
  View Details
</Link>

6. relative ( “route” | “path” ) :

It define how evaluate relative path when we use nested routes.
i)route : Default => hierarchy — Follow .
ii) path : Direct current URL string .

Standard Html Anchor Attributes :

By Default , Link Component internally rendered the output as an <a> tag . Because of this , you can also use standard anchor attributes like className , Style , rel , target , onClick attributes .

what is NavLink ?

NavLink is an enhanced version of Link Component . It is used to navigate menues & highlight the active state .

Example :

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/about" 
     className={({ isActive }) => (isActive ? "active-link" : "normal-link")} >
        About
      </NavLink>
    </nav>
  );
}

Programmatic Navigation :

In react-router useNavigate () hook and <Navigate/> component are most important tools for redirect the web pages in programmatic way .

1. what is useNavigate ?

useNavigate is a react built-in hook . It is used to navigate or redirect the web pages via event or code (programmatic way) .

Example :

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

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

  const handleLogout = () => {
    // navigate or redirect to home page 
    navigate("/home");
  };

  return <button onClick={handleLogout}>Log Out</button>;
}

Options & Parameters :

1. Number Based (History based Navigation ) :

navigate(-1) // represent to previous page (one step backward)
navigate(-2) // represent to 2nd previous page (two step backward)
navigate(+1) // represent to next page (one step Forward)
navigate(+2) // represent to 2nd next page (two step Forward)

2. State :
similar to Link state Attribute . It is used to pass data from one page to another page without showing in URL .

navigate("/profile",{state :{ id:1, role :"admin"}})

3. replace (Boolean) :
similarly Link Component replace attribute .

navigate("/alone",{replace : true } )

2)What is Navigate :

Navigate is a special react component . It is automatically redirect to their path page when it is rendered . Navigate component mostly used in conditional rendering .

Attributes :
same like Link Component such as to , replace , state .

Example : when the user logout immediately redirect to login page .

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

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    // Redirects user to the login page immediately if not authenticated
    return <Navigate to="/login" replace={true} />;
  }

  return children;
}

Hey developers ! Have you ever wondered how to manage state more efficiently in React?

Too many props. Messy state. React chaos? Time to level up!

Meet useReducer and useContext — the dynamic duo that makes state management cleaner, smarter, and more scalable. Let’s break down how they work together and take your React skills to the next level!

what is useReducer?

useReducer is a powerful built-in hook in react . That takes two arguments first one is reducer function and second one is initialState (initial value). It is used to complex state management .

yes , i knew useState hook was enough for simple state updates . but , when it comes to complex state logic , useState was very difficult to manage states . Therefore , the useReducer hook is best choice for complex state management .

Because useReducer hook follows redux architecture pattern concepts like state , Action , Reducer , Dispatch .

useReducer architecture :

Syntax :

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

The Four Pillars :

1. State : Current data or value .
2. Action : an object that describe what operation should happen ( Example : { type : “INCREMENT” } )
3. Reducer : Reducer is a pure function that takes the current state and an action as input and return new state based on the action .
4. Dispatch : Dispatch is a function that is used to trigger an action and send it to the reducer function

Example :

1. Define Initial State & Reducer Function :
   write a reducer function outsidet the component is a best practice.

// Initial State
const initialState = { count: 0 };

// Reducer Function
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'SET_VALUE':
      return { count: action.payload }; 
    case 'RESET':
      return initialState;
    default:
      return state; 
  }
}

2. Use useReducer inside Component :

import React, { useReducer } from 'react';

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <h1>Count: {state.count}</h1>
      
      {/* dispatch an Action */}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'SET_VALUE', payload: 10 })}>Set 10</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

export default Counter;

When should we use useReducer ?

1. Manage Complex Objects, Arrays, Nested State.
2. Complex state transition logic in one place.
3. Manage Multiple related states as a single object.

What is useContext ?

useContext is a built-in hook in react . That allows developers to share and manage state globally without passing props down manually through every level . Simply avoid “ Prop Drilling ”

Define Prop Drilling :

Prop drilling happen , when state need to be passed from root parent component to deeply nested child component by passing props down manually through every intermediate component level .

The Three Core Steps :

1. Create Context : Create data placeholder or pipeline using creatContext hook .

Example :

export const ThemeContext= createContext(null);

2. Provide Context : Passing the data into the pipeline and wrap the target component using provider property .

Example :

<ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
</ThemeContext.Provider>

3. Consume Context : Extract and access data by using the useContext hook or consumer property .

Example : Data access by using useContext hook :

const { theme, toggleTheme } = useContext(ThemeContext);

Data access by using .Consumer property:

<ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <button 
          onClick={toggleTheme}
          style={{
            backgroundColor: theme === 'light' ? '#fff' : '#333',
            color: theme === 'light' ? '#000' : '#fff',
            padding: '10px 20px'
          }}
        >
          Current Theme: {theme.toUpperCase()}
        </button>
      )}
    </ThemeContext.Consumer>

The Best one for access the data :

useContext hook is better than .Consumer property . becaus useContext overcome major three problem had by .Consumer property .

1. Avoids “Pyramid of Doom” (Callback Hell) :
   When a component needs to use multiple contexts (e.g., ThemeContext, UserContext, AuthContext), using <Context.Consumer> forces the code into nested callbacks, resulting in a 'Pyramid of Doom.

Example :

// Pyramid of Doom - Callback Hell.
function UserDashboard() {
  return (
    <ThemeContext.Consumer>
      {(theme) => (
        <UserContext.Consumer>
          {(user) => (
            <AuthContext.Consumer>
              {(auth) => (
                <div className={theme}>
                  <h1>Hello, {user.name}</h1>
                  <p>Role: {auth.role}</p>
                </div>
              )}
            </AuthContext.Consumer>
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

// Flat, clean, and readable 
function UserDashboard() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  const auth = useContext(AuthContext);

  return (
    <div className={theme}>
      <h1>Hello, {user.name}</h1>
      <p>Role: {auth.role}</p>
    </div>
  );
}

2. No Render Props Boilerplate Required :
Using <Context.Consumer> requires passing a render function inside the component, which introduces extra boilerplate code.

With useContext , function wrappers are unnecessary, allowing you to access variables directly ( eg : const theme = useContext(ThemeContext) ).

3. Better Integration with Custom Hooks :
The biggest power of useContext is that we can create custom hooks to wrap the context logic, making it fully reusable.

For example, we can create a custom hook to manage the authentication state

function useAuth() {
  return useContext(AuthContext);
}

// Use it anywhere in a single line:
const { user, login, logout } = useAuth();

Hey friends ! Welcome back. Today in our blog, we are going to dive deep into those five essential utilities that often slow down React apps. Whether you are a beginner or an experienced developer, understanding the hidden behaviors and tricks behind these hooks is super important. Let’s dive right in!

what is useEffect ?
useEffect is a react built-in hook . That takes two arguments , the first one is callback function and second one is optional dependency array. It takecares of side effects inside the component.

Syntax :

import { useEffect } from 'react';

useEffect(() => {
  // 1. Setup / Effect code (Executes after render)

  return () => {
    // 2. Cleanup function (Executes before unmount or before re-running effect)
  };
}, [/* 3. Dependency Array */]);

various behavior of useEffect hook:
1.Infinite loop
2.on Mount
3.on Unmount
4.on Change of a state or props

1. Infinite Loop :(Initial Render + Every Re-render)
   If you want to execute anything infinitely inside a component, you write a useEffect hook without a dependency array.

Example :

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log("Component rendering! Count value:", count);
  }); 

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

2.On Mount :
Mounting is nothing but adding an HTML element as a node in the real DOM. If you want to execute anything once while mounting a component, you write a useEffect hook with an empty dependency array.

Example:

import { useState, useEffect } from 'react';

function SimpleMountDemo() {
  useEffect(() => {
    console.log("Component mount successfully!");
  }, []);

  return <h2>Hello React Learners!</h2>;
}

3.On unmount :
Unmounting is simply the process of removing a specific and existing HTML node from the real DOM. If you want to execute code once when a component unmounts, you write a useEffect hook with an empty dependency array and return a cleanup function.

Example :

import { useState, useEffect } from 'react';

function SimpleUnmountDemo() {
  useEffect(() => {
    console.log("Component Mounted");
 
    return () => {
      console.log("Component Unmounted");
    };
  }, []);

  return <h2>Check your console while unmounting!</h2>;
}

4.On Change of a state or props :
If you want to execute anything once on initial mount and re-triggers only if one or more dependent variables change . you write a useEffect hook with specific Dependencies( dependent variables).Dependencies must be state or props.

Example:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count variable: ${count}`);
  }, [count]);

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

What is UseRef ?
useRef is a react built-in hook . That return mutable object with .current property . It is used to store data and doest not trigger component re-render when it is changed.

Syntax :

const myRef = useRef(initialValue);

Mutable Object return by the UseRef for reference :

{
  current: initialValue
}

we can read and mutate the .current property in this object whenever we need.

Example :

import React, { useEffect, useRef } from 'react'

const AutoFocusInput = () => {
    const inputRef=useRef(null);
 
    useEffect(()=>{
    inputRef.current.focus();
    },[])

  return (
    <>
      <input type='text' ref={inputRef}/>
    </>
  )
}

export default AutoFocusInput;

what is useMemo?

useMemo is a react built-in hook . It takes two arguments first one is Function and second one is dependency array.react calls this function on initial render and re-runs it only when one of the dependencies changes . It return only last momized value . useMemo memoizes a Single value that was result of expensive calculation .

syntax :

const cachedValue = useMemo(() => {
  // Perform an expensive calculation and return the value
  return computeExpensiveValue(a, b);
}, [a, b]);

If we want to perform an expensive calculation only on the initial render, we use useMemo with an empty dependency array.

Example:

import { useState, useMemo } from 'react';

function ProductList({ items }) {
  const [search, setSearch] = useState('');
  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(search));
  }, [items, search]);

  return (
    <div>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      {filteredItems.map(item => <p key={item.id}>{item.name}</p>)}
    </div>
  );
}

What is useCallback ?

useCallBack is a react built-in hook . That memoizes a function reference between re-renders to prevent child component from re-rendering unnecessarily.

Syntax :

const cachedFn = useCallback(() => {
  // Function logic goes here
  doSomething(a, b);
}, [a, b]);

Example:

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const handleDelete = useCallback(() => {
    console.log("Item deleted");
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <ChildComponent onDelete={handleDelete} />
    </div>
  );
}

what is Memo ?

Memo is also react buil-in hook . It similar to useMemo and useCallback hooks but it memoizes an entire Component .

Syntax :

import { memo } from 'react';

const MemoizedComponent = memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

export default MemoizedComponent;

hooks like useMemo , useCallback and memo are becoming less necessary. Starting with React 19 , the new React Compiler handles this optimization automatically, so developers no longer need to do it manually.

What is useImperativeHandle?

In react, data normally flows only from Parent to Child using props. A parent component cannot directly call functions or control things inside a child component.

Sometimes, you need the parent to directly control a child component (like focusing an input box or scrolling to an element). This is where useImperativeHandle comes in.

It is a React Hook that lets a child component give a custom set of functions (methods) to its parent component through a ref.

Syntax :

useImperativeHandle(ref, createHandle, dependencies?)

• ref : The ref coming from the parent component.
• createHandle : A function that returns an object containing the methods you want to give to the parent.
• dependencies : Optional array of values

Child Component (Myinput.js)

import { useRef, useImperativeHandle } from 'react';

function MyInput({ ref }) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current.focus();
    }
  }), []);

  return <input ref={inputRef} placeholder="Type something..." />;
}

export default MyInput;

Parent Component (App.js)

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function App() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the Input</button>
    </div>
  );
}

what is React?
React is a javascript library for building user interface in web application . Component based architecture .
and it is mainly used for Building a Single page Application . It was developed by Facebook(Meta).

In this blog ,we will learn about basic react concept one by one .

Definition Of Library:
Library is a collection pre-written reusable code (utilities collection) that used to build application faster. If you build application by using library then the application flow controlled by developer.

Example : React.js, Axios , Lodash.

definition Framework:
Framework provides a Complete architecture for build application . where application flow control by framework . Because Framework works based on “Inversion of control” mechanism which means i give the control ,the framework decides to when to call my code . developer must follow the rules and folder structure that instructed by framework.

Example : Angular, Next.js , Django.

what is JSX?
Jsx means javascript XML that allows you to write a Html within a javascript .

import React from 'react';

const Greeting = () => {
  const name = "Arun";
  return <h1>Hello, {name}</h1>;
};

export default Greeting;

Rendering & Conditional Rendering :
Rendering is nothing but display the content in UI. Conditional rendering refers to display the content in UI based on the condition.
Example :

import React, { useState } from 'react';

//Using Ternary Operator.
const Status = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? <p>Welcome Back</p> : <p>Please Login</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Logout' : 'Login'}
      </button>
    </>
  );
};

export default Status;


//Using && Operator.
const Notification = () => {
  const [hasNewMessage, setHasNewMessage] = useState(true);

  return (
    <>
      {hasNewMessage && <p>You have a new message!</p>}
      
      <button onClick={() => setHasNewMessage(!hasNewMessage)}>
        Toggle Message
      </button>
    </>
  );
};

export default Notification;

What is Component?
Component means reusable and independent piece of code that represent part of UI . Component name must be PascalCase.

Example:

Function ProductCard() { 
return <h1>product card </h1>
}

Avoid this ,

Function productCard() { 
return <h1>product card </h1>
}

Becase,if you use camelcase react assume as that is html attribute instead of component .

How Browser Understand React :
React can not directly understand by browser . Browser only understand html,css,js.Browser understand the react with the help of babel Compiler .The Babel complier convert your react code into js object.

What is Fragments?
Fragments is a type of wrapper element that used to group ,multiple react elements.
Examples:

function UserProfile() {
  return (
    <>
      <h2>Arun Kumar</h2>
      <p>Frontend Developer</p>
    </>
  );
}

export default UserProfile;

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

The last one used when we need key prop or we use List / Mapping.

why we use fragements?
React component return only one element . if we need to return multiple element then we should be any wrapper element or container element.generally developer use <div> element for wrapping multiple element . but , where the problem was additionaly add one node in DOM structure .it leads to CSS conflict .

Example:

<div clssName:"container">
    <div>
        <h1>hi</h1>
        <p>hello</p>
    </div>
</div>

.container { 
display :flex; 
}

Reconsilation :
Reconsilations is a mechanism used to improve the application performence by minimize the DOM updates.
Work-Flow:
React create new virtual DOM when state or props change .After that react compare the current virtual DOM with previous virtual DOM and find the exact changes. Finally , make only that specific changes in real DOM.

SPA:
SPA means Single Page application. Where load only one html page (index.html).It is used to move or navigate from one web page to another web page without page reload.

In this blog , we will break down how to manage component data, pass props effectively, and write clean, reusable logic with simple code examples .

What is state?
State managed within a component that holds data that can change over time .state fully controlled by component . The component to re-render when update.

How to use State?
In react , state was handled by useState hook.

Syntax:

// 1. Text Input
const [text, setText] = useState('Arun');

// 2. Number Input (Initial value: 0 or empty string)
const [number, setNumber] = useState(0);

// 3. Checkbox (Initial value: false)
const [isChecked, setIsChecked] = useState(false);

// 4. Select Dropdown (Initial value: default option string)
const [selectedOption, setSelectedOption] = useState('Option1');

// 5. Radio Button (Initial value: default selected value)
const [radioValue, setRadioValue] = useState('Male');

For Syntax Clarification :
const → container;
text → variable that hold value;
setText → Function used to update state value;
Arun → Initial value;

What is Hooks?
Hooks are special functions that allows functional component to use react features like state and lifecycle-related behaviour. That return something like variable , Function , object ,etc…
Example : useState , useEffect , useContext , useRef , usememo , useCallback.

What is Props :
Props is an object that is used to pass data from parent component to child component .props was read-only. we can’t directly change the props data in child component.props data or value accessed via two methods

By using Dot Notation :

import React from 'react';

// Parent Component
function App() {
  return <UserCard name="Arun" age={25} />;
}

// Child Component
function UserCard(props) {
  return (
    <div>
      <h3>Name: {props.name}</h3>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default App;

By using Destructuring Method :

import React from 'react';

// Parent Component
function App() {
  return <UserCard name="Arun" age={25} />;
}

// Child Component (Destructuring in parameters)
function UserCard({ name, age }) {
  return (
    <div>
      <h3>Name: {name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}
export default App;

Utility Function :
Utility function means reusable helper function for perform specific task .that return any value .Usually, this function is written in a .js or .ts file within the utils folder.

export function formatPrice(price) {
  return `${price.toFixed(2)}`;
}

Primitive Data Types :
Primitive data types are predefined data types provided by JavaScript .It will be immutable and single values.

Types :

1. Number :
   Number data type hold both positive and negative values also decimal & non-decimal values and NaN.

let Age = 24;                 // Integer
let Price = 199.99;           // Decimal
let Calculation = "abc" / 2;  // NaN 

2.String :
String data type refers to sequence of characters. It hold any values which enclosed by single , double or back tic quotes.

let name = "Vijay";
let greeting = 'Hello, ' + vijayName;
let templateString = `Welcome back, ${name}!`; // Using backticks

3.boolean :
Boolean data type hold only true or false.

let kishoreIsOnline = true;
let taskCompleted = false;

4.Null :
Null data type hold only one value which is null . Null means Empty value.It is provided by the developer

let kalaiCurrentProject = null; // Empty

5.Undefined :
Undefined data type similar to null data type .It represent variable has been declared but has not been assigned any value. undefined is provided by the JavaScript.

let sanjayScore; 
console.log(sanjayScore); // Output: undefined

6.BigInt :
BigInt is a numeric primitive type formed by appending an “n” to the tail of an integer literal.

let BigId = 9007199254740991n;

Non-Primitive Data Types :
Non-primitive data types are objects and derived data types . They can store collections of values . The two key non-primitive data types in JavaScript

There are
1.Objects. 2.Array.

1.Objects :
Objects is nothing but is a thing .It is a collection of key-value pairs where keys map to values and its properties store references (memory addresses) pointing to where those values are located in memory.

let arunProfile = {
  name: "Arun",
  role: "Frontend Developer Engineer",
  isActive: true
};

2. Array :
Array is collection values accessed by their index. Array is indices based (zero-indexed). index is nothing but position value of actual value .

let arunFriends = ["Vijay", "Kishore", "Kalai", "Sanjay", "Praveen"];

console.log(arunFriends[0]); // Output: "Vijay" (at index 0)
console.log(arunFriends[2]); // Output: "Kalai" (at index 2)

What is mean by Group ?
A Group means number of people or things located in one place (same place) without unified , interdependent goal.

Example : Passengers travel together on a bus but each passenger has own reason for travelling

What is mean by Team ?
A Team means group of people work together to achive specific , common goal. Every individuals work for same final outcome. Team need shared goal , co-operation and helps to each other.

Example : Cricket Team → 11 Players playing together to win the Trophy or Championship

Components :

To build a strong software team, you need more than just technical skills you need solid team dynamics. Here are the seven core components that help developers work together seamlessly as one unit.

1.Communication

In a Software team communication is not about sitting endless status meeting. It’s about sharing complex technical context as simply and clearly to team complex will be slack messages or pull request comments, the goal is to gives your teammates pure clarity without any noise

2.Task & cohesion

Cohesion means the team operate as single unit rather than the group of isolated developers . When deadline gets tight, production break, teammates step into unlock ( helps ) to each other instead of escape from problem. If sprint fails they focus ok fixing the problem instead of pointing or blaming others

3.Unspoken Rules → who are you ?

A high-performing team requires a Thinker, a Doer, a Supporter, and a Checker. To be an effective team player, which of these people would you be ?

1. Thinker : The person who generate ideas , prepare the plan and solve the complex and tough problems.

“ What to do? how to do ?”

2. Doer : The person who takes Actions , Steps and work hard ( Being Both Smart and hard worker ).
example : gives full potential for complete their project within deadline.

“ Takes Actions & Executing Quickly ”

3. Supporter : The person who helps to team , keeps people happy and cheers everyone.

“ Team Work & Encourage to everyone”

4. Checker : The person who checks and verify the work of team members , find the mistakes and ensure everything is perfect.

“ Details & Quality ”

4.Conflict Resolution

Technical disagreements will happen, but they should never become personal. a great team attack the problem together by asking how to fix the code, not the person who made the mistake. This approach builds trust and helps the team solve complex challenges faster.

“ Attack the problem, never the person ”

5.Leadership

Engineering leadership is not about micromanaging screen time or demanding constant updates from engineers.
It’s about act as shield → filtering our unnecessary noise, removing technical blockers , create a safe environment

6.Goal Alignment

Developer should not copy & paste requirements from jira-tickets without knowing why?
When the entire team understand the business context and how to their code impact real users.
It helps team make better and smarter instead of rushing to complete the task

7.Adaptability

In software, things change constantly → plan shift, bugs popup and code breaks . A greater team doesn’t panic when something goes wrong they stay calm, adjust to new situation and work together to final solution

Mind Set Shifts :

1. Shift from “ I ” to “ WE ” : During the presentation , Describe projects Success “ Our Team Achived…… ” rather than “ I did Everything ”

2. Constructive Feedback : Turn negative comments and feedback into positive ones. Instead of Saying “ That is wrong ” , Say “ That was Nice try Lets see how we can make it better ”

3. Psychological Safety : Create a workplace , where everyone feel okey and asking question and make mistakes without being judged.

“ Great things in business are never done by one person , They are done by a team of people ”
 — Steve Jobs

One day, me and my friends went to the airport . Before entering into airport my friends raise a question the question is thousand of people visit airport daily .so whoever can travel in Flight or easy to Hijack flight right?
i replayed to them you are totally wrong because look around safety guards standing with guns in all entrance and every Luggage scanned via X-ray scanner and also everyone allows only via metal detector, some places cannot accessed without fingerprint or staff id .Totally the whole airport secured by various security mechanism.
security is not only one method or technique it is multiple mechanism work together for protect anything
And then we go to Check-in Counter where verification officer asked passport & boarding pass to me . after verifying my passport & Boarding pass the officer told to me you are permitted and you go. This process called authentication
“ Authentication is responsible for Determine who you are? ”
After that my friends tried to enter in Cockpit(Flight deck) of the aircraft but the officer block them and said pilot & Crew members are only allowed to enter inside cockpit you are not permitted this is called authorization
“ authorization is what are you allowed to do? ”

The same thing happens in websites like Gmail, Instagram, Netflix, and Amazon. When you try to log in the website first checks who you are by verifying your email by your username & password. This process is called authentication. After that the website decides what you are allowed to do. For example, an admin can manage all users and settings while a regular user can only access and manage their own account. This process is called authorization. Even though all of them have successfully proved their identity through authentication, they have different levels of access. This difference in access is called authorization.

Technical Definitions

• Security: Security is the practice of protecting people, systems, data, and resources from unauthorized access, attacks, damage, or misuse.
• Authentication: Authentication is the process of verifying the identity of a user, device, or system before granting access.
• Authorization: Authorization is the process of determining what resources or actions an authenticated user is permitted to access or perform.