DEV Community: Rakesh Daniel

useMemo, React.memo, useRef, and Custom Hooks — Real-World React Guide

Rakesh Daniel — Mon, 12 Oct 2026 22:07:55 +0000

useMemo caches an expensive calculation, React.memo skips unnecessary component re-renders, useRef stores values without causing re-renders, and custom hooks let you reuse stateful logic across components. Together, they make React apps cleaner and faster when used correctly.

Quick Difference

Tool	Main Job	Causes Re-render?
useMemo	Cache a calculated value	No
React.memo	Skip re-render if props do not change	No
useRef	Store mutable value or access DOM	No
Custom Hook	Reuse stateful logic	Depends on hooks inside it

useMemo memoizes a value, while React.memo memoizes a component.

useMemo — Cache Expensive Values

useMemo stores the result of a calculation and recalculates it only when its dependencies change. It takes a function and a dependency array.

const totalPrice = useMemo(() => {
  return cartItems.reduce(
    (total, item) => total + item.price * item.quantity,
    0
  );
}, [cartItems]);

Real-Time Use in Your Code

In your useProducts hook, totalPrice is calculated from Redux cart items. Without useMemo, this calculation would run on every render — for example, whenever the user types in the search box.

With useMemo, the total is recalculated only when cartItems changes

More Examples From Your Code

const categories = useMemo(() => {
  return [...new Set(
    products.map((p) => p.category).filter(Boolean)
  )].sort();
}, [products]);

This creates a unique, sorted category list. It is recalculated only when products changes.

const filteredProducts = useMemo(() => {
  // filter + search + sort logic
}, [
  products,
  selectedCategory,
  selectedBrands,
  maxPrice,
  priceCap,
  sortBy,
  query,
]);

This is the best use of useMemo in your code because filtering and sorting a large product list can be expensive. The result is reused until one of these dependencies changes.

When To Use useMemo

Use it when:

The calculation is heavy, such as filtering or sorting thousands of items.
The result is used by another useMemo, useEffect, or child component.
You need a stable reference for arrays or objects passed as props.

Do not use it for simple values like count + 1; memoization itself has a small cost.

React.memo — Avoid Unnecessary Re-renders
React.memo wraps a component and skips its re-render when its props have not changed.

import { memo } from "react";

const ProductCard = memo(function ProductCard({ product, handleCart }) {
  console.log("ProductCard rendered");

  return (
    <div className="product-card">
      <h3>{product.title}</h3>
      <p>₹{product.price}</p>
      <button onClick={() => handleCart(product)}>Add to Cart</button>
    </div>
  );
});

export default ProductCard;

Real-Time Example

Imagine your product page has:

A search input
Category filter
Price filter
100 product cards

When the user types in search, the parent re-renders. Without React.memo, all 100 product cards may re-render. With React.memo, only cards whose product prop changed will re-render.

Important Warning

This can break React.memo:

<ProductCard product={product} handleCart={handleCart} />

If handleCart is created fresh on every render, its reference changes every time. Then React.memo thinks props changed and re-renders the card anyway.

Fix it with useCallback:

const handleCart = useCallback((product) => {
  dispatch(addToCart(product));
  showSuccess(`${product.title} Added To Cart`);
}, [dispatch]);

Now handleCart keeps the same function reference unless dispatch changes.

useRef — Value Without Re-render
useRef creates a mutable value that persists across renders but does not trigger a re-render when changed. It is commonly used for DOM access, timer IDs, previous values, and avoiding stale values inside callbacks.

DOM Reference Example

import { useRef } from "react";

function SearchBar() {
  const inputRef = useRef(null);

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

  return (
    <>
      <input ref={inputRef} placeholder="Search products..." />
      <button onClick={focusSearch}>Focus Search</button>
    </>
  );
}

Timer Example

const timerRef = useRef(null);

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

const stopTimer = () => {
  clearInterval(timerRef.current);
};

Changing timerRef.current does not re-render the component. That is exactly why it is useful for storing an interval ID.

useRef vs useState

Feature	useState	useRef
Triggers re-render	Yes	No
Best for	UI data	DOM, timers, IDs, previous values
Access value	count	ref.current
Value persists	Yes	Yes

Use useState when the value should appear in the UI. Use useRef when React does not need to re-render for that value.

Custom Hooks — Reuse Logic

A custom hook is a JavaScript function whose name starts with use. It can use built-in hooks such as useState, useEffect, useMemo, and useContext, then return values and functions to components.

Your useProducts() is a strong custom hook because it combines:

API fetching
Loading and error state
Filters
Search
Sorting
Redux cart logic
Memoized calculations

export function useProducts() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadProducts = async () => {
      try {
        setLoading(true);
        const data = await fetchData();
        setProducts(data);
      } catch (err) {
        setError("Unable to load products.");
      } finally {
        setLoading(false);
      }
    };

    loadProducts();
  }, []);

  return {
    products,
    loading,
    error,
  };
}

Why Custom Hooks Are Useful

Without a custom hook, product-fetching logic may be copied into multiple pages. With useProducts(), any component can reuse the same logic:

const {
  products,
  loading,
  error,
  handleCart,
  totalPrice,
  clearFilters,
} = useProducts();

This keeps components focused on UI, while the hook handles business logic.

Performance Benefits
These tools improve performance by avoiding repeated work:

useMemo avoids recalculating filtering, sorting, totals, and derived lists.
React.memo avoids re-rendering child components when their props are unchanged.
useRef avoids re-renders for values that do not affect UI.
Custom hooks organize logic, making it easier to apply memoization in one place.

In your code, the biggest performance win is filteredProducts. If there are 1,000 products, filtering and sorting on every keystroke would be costly. useMemo ensures that work happens only when products, query, filters, or sortBy change.

Disadvantages and Mistakes

Tool	Disadvantage / Mistake
useMemo	Adds complexity and memory usage; unnecessary for cheap calculations. react+1
useMemo	Wrong dependencies can return stale values.
React.memo	Does not help if props include new objects, arrays, or functions created during every render. react+1
React.memo	Comparing props also takes time; overusing it can make performance worse.
useRef	Changing ref.current does not update UI, so do not use it for values displayed on screen. react
Custom hooks	Poorly designed hooks can become too large and difficult to maintain.

Best Practices

Use useMemo only for genuinely expensive or reference-sensitive calculations.
Use React.memo for list items and reusable UI components, especially when the parent re-renders often.
Pair React.memo with useCallback for functions passed to child components.
Use useRef for DOM elements, timers, and values that should not trigger renders.
Keep custom hooks focused: one hook for products, one for cart, one for search — rather than one giant hook for everything.
Always include every value used inside useMemo in its dependency array.

Simple Rule

Need to cache a computed value? Use useMemo.
Need to stop a component from re-rendering? Use React.memo.
Need a value that should not cause a re-render? Use useRef.
Need to reuse the same stateful logic in multiple components? Create a custom hook.

useContext in React — Real-World Guide

Rakesh Daniel — Mon, 12 Oct 2026 21:35:21 +0000

useContext lets any component read shared data from a Context Provider without passing props through every parent component. It is mainly used to avoid prop drilling — passing the same props through many components that do not need them.

What Is Context?
Context is React’s built-in way to share data across a component tree. A Provider supplies the value, and any child component can read it using useContext.

Real-World Use Cases

Developers commonly use Context for data needed in many places:

Theme: light/dark mode.
Logged-in user: username, role, profile photo.
Language: English, Tamil, Hindi, etc.
Cart: products, total price, add/remove item.
Search query: shared between a search bar and results page.
Authentication token: stored after login and used by API calls.

Your Theme Context
Your ThemeProvider is a good real-world example. It reads the saved theme from localStorage, checks the user’s system preference, updates the HTML data-theme attribute, and saves the choice.

import React from "react";
import { useState, useEffect, createContext, useContext } from "react";

const ThemeContext = createContext();

const getInitialTheme = () => {
  const saved = localStorage.getItem("theme");
  if (saved) return saved;

  return window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";
};

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(getInitialTheme);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

How It Works

createContext() creates the Context.
ThemeProvider holds the actual theme state.
value={{ theme, toggleTheme }} shares both the current theme and the function to change it.
useTheme() lets any component read or update the theme.

Using It in a Component

import { useTheme } from "./ThemeContext";

function ThemeButton() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

export default ThemeButton;

When toggleTheme() changes theme, React automatically re-renders every component that calls useTheme().

Your Search Context

Your SearchContext is useful when a search input and a results list are in different components.

import { createContext, useContext, useState } from "react";

const SearchContext = createContext(null);

export function SearchProvider({ children }) {
  const [query, setQuery] = useState("");

  return (
    <SearchContext.Provider value={{ query, setQuery }}>
      {children}
    </SearchContext.Provider>
  );
}

export function useSearch() {
  return useContext(SearchContext);
}

Search Input

import { useSearch } from "./SearchContext";

function SearchBar() {
  const { query, setQuery } = useSearch();

  return (
    <input
      type="text"
      placeholder="Search products..."
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

export default SearchBar;

Search Results

import { useSearch } from "./SearchContext";

function SearchResults({ products }) {
  const { query } = useSearch();

  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <ul>
      {filteredProducts.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

export default SearchResults;

Here, SearchBar updates query, and SearchResults reads the same query — without passing props between them.

Wrap Providers in App

import { ThemeProvider } from "./ThemeContext";
import { SearchProvider } from "./SearchContext";
import Navbar from "./Navbar";
import SearchBar from "./SearchBar";
import SearchResults from "./SearchResults";

function App() {
  return (
    <ThemeProvider>
      <SearchProvider>
        <Navbar />
        <SearchBar />
        <SearchResults products={products} />
      </SearchProvider>
    </ThemeProvider>
  );
}

export default App;

Any component inside these providers can use useTheme() or useSearch().

Benefits of useContext

Benefit	Meaning
Avoids prop drilling	No need to pass props through components that do not use them. react+1
Global/shared state	Theme, user, language, and cart data can be accessed anywhere under the Provider. w3schools
Clean components	Child components become simpler because they do not receive unnecessary props.
Built into React	No external library is required for small and medium apps. react
Automatic updates	When context value changes, consumers re-render with fresh data. react+1

Disadvantages of useContext

Disadvantage	Why It Matters
Unnecessary re-renders	When the Provider value changes, every component using that Context re-renders — even if it uses only one small part of the value. react+1
Not a full state manager	Context shares values, but it does not provide selectors, caching, middleware, or advanced state tools like Redux or Zustand. tech-interview
Harder to test	Components depend on a Provider, so tests may need to wrap components with that Provider.
Can become messy	Putting too much data in one Context creates a “mega context” that is difficult to maintain. frontend+1
Not ideal for frequent updates	Fast-changing values such as mouse position, scroll position, or typing text can cause many re-renders. frontend

Important Performance Tip

This line creates a new object on every render:

<ThemeContext.Provider value={{ theme, toggleTheme }}>
Because the object reference changes, all context consumers may re-render more often than needed. You can memoize it:

import { useMemo } from "react";

const value = useMemo(
  () => ({ theme, toggleTheme }),
  [theme]
);

return (
  <ThemeContext.Provider value={value}>
    {children}
  </ThemeContext.Provider>
);

useMemo keeps the same object reference unless theme actually changes.

Best Practices

Create separate contexts for unrelated data: ThemeContext, AuthContext, CartContext.
Do not put everything into one huge global context.
Use Context for low-frequency global data such as theme, user, and language.
For high-frequency updates, keep state close to the component that needs it or use refs/external stores.
Expose a custom hook like useTheme() or useSearch() instead of calling useContext directly everywhere.
For larger apps with complex shared state, consider Redux Toolkit, Zustand, or Jotai.

Simple Rule

Use useContext when many components — especially deeply nested ones — need the same data. Use normal useState when the data is needed only inside one component or a small part of the UI.

useEffect in React

Rakesh Daniel — Mon, 12 Oct 2026 21:16:39 +0000

useEffect is a React Hook used for side effects — things like API calls, timers, event listeners, and updating the document title. Its second argument, the dependency array, controls when the effect runs.

1. Run Only Once

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

Dependency array: .

Why? An empty array tells React that the effect does not depend on any state or prop, so it runs only after the component first appears on screen.

2. Run on Every Render

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

No dependency array is provided.

React runs this effect after every render — on first mount and after every state or prop change.

3. Run When State Changes

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

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

Dependency array: [count].
The effect runs on mount and again whenever count changes.
If you use [] instead, "Count changed" prints only once on mount — not when count updates

4. Two States, One Effect

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

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

Dependency array: [count, name].
The effect runs when either count or name changes.
If only [count] is added, changing name will not run this effect. Also, never omit a value used inside the effect — it can cause stale-value bugs.

Derived Logic

<p>{count % 2 === 0 ? "Even Number" : "Odd Number"}</p>

Put this logic inside render, not inside useEffect.
Why? It is directly calculated from existing state. React can re-render and show the correct value automatically. useEffect is for side effects outside React’s normal rendering flow, such as API calls or DOM listeners.

6. API Call on Mount

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.json())
    .then((data) => setUsers(data));
}, []);

We use [] because users should be fetched only once when the component loads.
If you remove [], the API call runs after every render, causing unnecessary network requests

Infinite Loop Trap

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

This creates an infinite loop.

Why? The effect runs → count changes → React re-renders → dependency count changed → effect runs again → count changes again. This repeats forever

Fix the Infinite Loop

If you want to increment only once:

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

Use an empty dependency array [].
Use the functional update setCount((prev) => prev + 1) so you always update from the latest state value.
Do not put count in the dependency array if the effect itself changes count.

9. Document Title Sync

useEffect(() => {
  document.title = count;
}, [count]);

Put count inside the dependency array.
Why? The effect uses count, and the title should update every time count changes.

10. Cleanup Basic

useEffect(() => {
  window.addEventListener("click", handleClick);
});

Problem
Every render adds another click listener. Old listeners are never removed, which can cause memory leaks and repeated function calls.

Correct Way

useEffect(() => {
  const handleClick = () => {
    console.log("Window clicked");
  };

  window.addEventListener("click", handleClick);

  return () => {
    window.removeEventListener("click", handleClick);
  };
}, []);

The returned function is the cleanup function.
Cleanup runs before the next effect execution and when the component unmounts.

Quick Dependency Table

Dependency array	When effect runs
No array	After every render react
[]	Once after first render / mount react+1
[count]	On mount and when count changes react
[count, name]	On mount and when either changes react

Simple Rule to Remember

Need something once when page loads? Use [].
Need something whenever a value changes? Add that value: [value].
Need something after every render? Omit the array.
Added a listener, timer, or subscription? Always return a cleanup function.

React useState Basics: Build Dynamic UI with Vite

Rakesh Daniel — Thu, 01 Oct 2026 05:46:12 +0000

React apps look like normal HTML pages, but they behave differently. When a user clicks a button, types in an input, selects a checkbox, or changes a dropdown, the UI should update immediately.

That is why we use state in React.

useState stores changing data inside a component. When we call its setter function—for example setCount, setUser, or setForm—React saves the next value, renders the component again, and updates only the required UI parts. State updates are applied for the next render, so logging a state variable immediately after calling its setter may still show the previous value.
What are React and Vite?
React is a JavaScript library for building user interfaces. Instead of manually finding HTML elements and changing them with DOM code, we describe how the UI should look for the current data. When state changes, React updates the screen to match that new state.

Vite is the tool used to create and run the React project quickly. It provides a fast development server and Hot Module Replacement (HMR), so changes in your code appear in the browser very quickly during development. It also creates an optimized production build.

For example, a Vite React project can start with:

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

**
Virtual DOM in Simple Words**
The browser has a real DOM—the actual HTML elements displayed on the page:
<h1>count: 0</h1>

When the count becomes 1, React does not need to reload the complete page manually.

React creates a lightweight JavaScript representation of the UI, often called the Virtual DOM. When state changes:

React creates the next UI representation.

React compares the previous UI with the new UI.

React finds what changed.

React updates the necessary part of the real browser DOM.

For example, in this code:
<h1>count: {count}</h1>

If count changes from 0 to 1, React updates the displayed count. Your header, buttons, form, and other components do not need a full page refresh.

This is why React feels dynamic and fast.

Why useState Is Important

The syntax is:

const [value, setValue] = useState(initialValue);

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

count is the current state value.
setCount updates the value.
0 is the initial value.

When a button calls:
setCount(count + 1);
React stores the next count value and re-renders the component with the updated value. React’s official documentation describes useState as a Hook that adds a state variable to a component; its setter updates the state and triggers a re-render.

Your counter example:

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

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

<button onClick={() => setCount(count - 1)}>
  Decrement
</button>

<button onClick={() => setCount(0)}>
  Reset
</button>

Real-world uses of useState

We use useState whenever data can change because of user actions or application events:

Login form values: email, password, OTP.
Like button: liked / not liked.
Shopping cart quantity.
Search input value.
Dark mode / light mode.
Modal open / close.
Loading spinner: loading / completed.
Selected language, country, state, city.
Todo list items.
API response data.
Error messages and success messages. A normal JavaScript variable can store a value, but it does not tell React to render again. State does.

1. Toggle Button: ON and OFF

const [isOn, setIsOn] = useState(false);
A boolean has only two values:
true
false
That perfectly matches a two-state feature:

UI meaning	Boolean value
OFF	false
ON	true

Example:

import { useState } from "react";

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? "ON" : "OFF"}
      </button>

      <p>The switch is {isOn ? "enabled" : "disabled"}.</p>
    </div>
  );
}

The best initial value is usually:
useState(false)
Because most switches begin in the OFF state unless the product requirement says otherwise.

Real-time use cases

Enable/disable notifications.

Dark mode switch.

Show password / hide password.

Turn on location access.

Online / offline availability.

Email subscription toggle.

Open / close mobile menu.

Your theme toggle is a real example:
checked={theme === "dark"} onChange={toggleTheme}

The checkbox is checked only when the current theme is "dark".

2. Input Field Value: Why Use State?

Suppose the user types Vijay, and you want to display:
Hello, Vijay
const [name, setName] = useState("");

<input
  value={name}
  onChange={(e) => setName(e.target.value)}
  placeholder="Enter your name"
/>

<p>Hello, {name}</p>

This is called a controlled input because React state controls the value of the input.

Why not use a normal variable?
This will not work correctly:

let name = "";

function handleChange(e) {
  name = e.target.value;
}

The variable changes in JavaScript memory, but React does not know that it must update the UI. Therefore:
<p>Hello, {name}</p>
will not reliably show the latest name.
A normal variable also gets created again when the component re-renders. It is not a reliable place for UI data that must persist between renders.

The main difference

Normal variable	useState
Value can change in JavaScript	Value can change in React
Does not request a re-render	Triggers a re-render
UI may not update	UI updates with the latest value
Not reliable for interactive UI data	Best for changing UI data

Your password input already follows this idea:

const [user, setUser] = useState("");

<input
  onInput={(e) => setUser(e.target.value)}
  type="password"
/>

<p>hello, {user}</p>

A common React style is to use onChange:
onChange={(e) => setUser(e.target.value)}
Both can work in this case, but onChange is generally the standard choice for React form fields.
Real-time use cases
Search boxes.

Login and registration forms.
Live preview of a profile name.
Chat message typing.
Product filters.
Coupon code input.
Address forms.
Comment boxes.

3. Show / Hide Text

For showing or hiding one element, boolean state is the best choice.

const [showText, setShowText] = useState(false);
Then render the paragraph only when showText is true:

<button onClick={() => setShowText(!showText)}>
  {showText ? "Hide Text" : "Show Text"}
</button>

{showText && <p>This paragraph is visible now.</p>}

React supports conditional rendering using normal JavaScript conditions, including if, ternary operators, and &&
Why boolean is suitable
The question is simple:
Should this item be visible?
There are only two answers:

Yes → true

No → false
So a boolean is cleaner than using strings such as "show" and "hide".

Your password visibility code is the same pattern:

const [showText, setShowText] = useState(false);

const toggle = () => {
  setShowText(!showText);
};

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

When showText is:

false → password is hidden.
true → password is visible.

Real-time use cases

Password visibility.
FAQ accordion.
Sidebar open / close.
Popup modal open / close.
Read more / read less.
Notification panel.
Mobile navigation menu.
Loading screen visibility. **

4. Character Counter

**
For a textarea, store the actual text in state:
const [message, setMessage] = useState("");
Then calculate the length from that text:

<textarea
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  placeholder="Write your message..."
/>

<p>Character count: {message.length}</p>

If you want to ignore spaces at the beginning and end:
<p>Character count: {message.trim().length}</p>
Your code already does this:
<p> character Count: {user.trim().length} </p>
Should text and length both be in state?
Usually, no.

Do this:

const [text, setText] = useState("");
const length = text.length;

Avoid this:
const [text, setText] = useState(""); const [length, setLength] = useState(0);

Why? length can always be calculated from text. It is derived data.

If you store both separately, they can become inconsistent:

text = "Hello"
length = 2

That is incorrect state. Keeping only the text as state avoids this issue.

Real-time use cases

Social media post character limit.
Bio character count.
SMS character limit.
Product review textarea.
Tweet-like post composer.
Job application description.
Comment section.
AI prompt input limit. Example with a limit:

const [bio, setBio] = useState("");
const maxLength = 100;

<textarea
  value={bio}
  maxLength={maxLength}
  onChange={(e) => setBio(e.target.value)}
/>

<p>
  {bio.length} / {maxLength}
</p>

5. Form with Multiple Inputs

For a form with related fields such as name, email, phone, city, and password, one object state is usually clean and scalable.

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

Use one reusable change handler:
`const handleChange = (e) => {
const { name, value } = e.target;

setForm({
...form,
name: value,
});
};`
Input example:

<input
  type="text"
  name="name"
  value={form.name}
  onChange={handleChange}
  placeholder="Enter your name"
/>

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

Your form implementation is already following this correct pattern.
Five separate states:

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [city, setCity] = useState("");
const [password, setPassword] = useState("");

This is valid, but it becomes repetitive as the form grows.
One object is easier for:

Form submission.
Sending data to an API.
Resetting the entire form.
Showing a preview.
Adding more fields later.

For example:
console.log(JSON.stringify(form));
That produces a single object ready to send to a backend API:

{
  "name": "Vijay",
  "email": "vijay@email.com",
  "phone": "9876543210",
  "city": "Chennai",
  "password": "secret123"
}

Common mistake: replacing the full object
This is wrong:
`setForm({

});`
If the user updates only the email field, all other fields disappear.

For example, before:
{ name: "Vijay", email: "", phone: "9876543210" }
Wrong update:
setForm({ email: "vijay@email.com", });

Result:
{ email: "vijay@email.com" }
The name and phone values are lost.

Correct update:

setForm((previousForm) => ({
  ...previousForm,
  [name]: value,
}));

Using the previous-state callback is especially safe when the new state depends on the old state. React also documents that state setters can receive an updater function based on the previous state.

Better version of your handler

const handleChange = (e) => {
  const { name, value } = e.target;

  setForm((previousForm) => ({
    ...previousForm,
    [name]: value,
  }));
};

Also, use this for the phone field:
type="tel"
Not:
type="tell"
Correct version:

<input
  type="tel"
  name="phone"
  value={form.phone}
  placeholder="Enter your phone"
  onChange={handleChange}
/>

Real-time use cases
Registration form.

Checkout and delivery address.
Employee profile form.
Bank account application.
Contact us form.
Resume builder.
School admission form.
Admin dashboard product form.

Checkbox Selection List For multiple selected skills, use an array state. const [skills, setSkills] = useState([]); Why an array? Because a user may select multiple items:

["Reactjs", "Nodejs", "SQL"]`
When a checkbox is checked, add the skill. When unchecked, remove it.
`const handleSkillChange = (e) => {
  const { value, checked } = e.target;

  setSkills((previousSkills) =>
    checked
      ? [...previousSkills, value]
      : previousSkills.filter((skill) => skill !== value)
  );
};

This is the same logic you used:

setSkills(
  checked
    ? [...skills, value]
    : skills.filter((skill) => skill !== value)
);

The callback version is preferred:

setSkills((previousSkills) =>
  checked
    ? [...previousSkills, value]
    : previousSkills.filter((skill) => skill !== value)
);

How it works
If the user selects React:
[]
becomes:
["Reactjs"]
Then selects Node.js:
["Reactjs"]
becomes:
["Reactjs", "nodejs"]
Then unselects React:
["Reactjs", "nodejs"]

becomes:
["nodejs"]

import { useState } from "react";

function Skills() {
  const [skills, setSkills] = useState([]);

  const handleSkillChange = (e) => {
    const { value, checked } = e.target;

    setSkills((previousSkills) =>
      checked
        ? [...previousSkills, value]
        : previousSkills.filter((skill) => skill !== value)
    );
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          value="React"
          onChange={handleSkillChange}
        />
        React
      </label>

      <label>
        <input
          type="checkbox"
          value="Node"
          onChange={handleSkillChange}
        />
        Node
      </label>

      <label>
        <input
          type="checkbox"
          value="Java"
          onChange={handleSkillChange}
        />
        Java
      </label>

      <label>
        <input
          type="checkbox"
          value="SQL"
          onChange={handleSkillChange}
        />
        SQL
      </label>

      <h3>Selected skills</h3>

      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

Notice this important improvement:
<li key={skill}>{skill}</li>
When rendering a list with .map(), React needs a stable key for each item. Since every selected skill is unique here, the skill text can be used as the key.

Real-time use cases

Select technical skills in a job portal.
Product category filters.
Choose food preferences.
Select permissions for users.
Pick multiple courses.
E-commerce filter: size, color, brand.
Multi-select notification settings.
Interests in a dating or social app.

Dependent Dropdown: Country → State → City Dependent dropdown means that the second dropdown depends on the first, and the third depends on the second. Example:

Country → India
State   → Tamil Nadu
City    → Chennai

const locationData = {
  India: {
    "Tamil Nadu": ["Chennai", "Madurai", "Coimbatore"],
    Kerala: ["Kochi", "Trivandrum"],
  },

  USA: {
    California: ["Los Angeles", "San Diego"],
    Texas: ["Houston", "Dallas"],
  },
};

Use three state variables:

const [country, setCountry] = useState("");
const [state, setState] = useState("");
const [city, setCity] = useState("");

This is clear because each selected value has a separate meaning.

When country changes
When the user changes country:

Update the country.
Reset state to an empty string.
Reset city to an empty string.

onChange={(e) => {
  setCountry(e.target.value);
  setState("");
  setCity("");
}}

Why reset them?

Imagine this situation:
Country: India State: Tamil Nadu City: Chennai
Then the user selects:
Country: USA
Now Tamil Nadu and Chennai do not belong to the USA. So we must clear them.

When state changes
When the user selects a new state, reset only the city:
onChange={(e) => { setState(e.target.value); setCity(""); }}
Cleaner controlled dropdown version

<select
  value={country}
  onChange={(e) => {
    setCountry(e.target.value);
    setState("");
    setCity("");
  }}
>
  <option value="">Select country</option>

  {Object.keys(locationData).map((countryName) => (
    <option key={countryName} value={countryName}>
      {countryName}
    </option>
  ))}
</select>

{country && (
  <select
    value={state}
    onChange={(e) => {
      setState(e.target.value);
      setCity("");
    }}
  >
    <option value="">Select state</option>

    {Object.keys(locationData[country]).map((stateName) => (
      <option key={stateName} value={stateName}>
        {stateName}
      </option>
    ))}
  </select>
)}

{state && (
  <select value={city} onChange={(e) => setCity(e.target.value)}>
    <option value="">Select city</option>

    {locationData[country][state].map((cityName) => (
      <option key={cityName} value={cityName}>
        {cityName}
      </option>
    ))}
  </select>
)}

The expressions:
{country && (...)}
and:
{state && (...)}
are conditional rendering. The state dropdown appears only after choosing a country; the city dropdown appears only after choosing a state. React supports this type of conditional UI using normal JavaScript logic.
Real-time use cases

Country → State → City in an address form.
Category → Subcategory → Product.
Company → Department → Employee.
University → Department → Course.
Vehicle brand → Model → Variant.
E-commerce category → type → item.
Travel booking: country → city → hotel.
Admin panel: role → permission → feature.

JavaScript Basics to Intermediate: Everything You Need in One Place

Rakesh Daniel — Wed, 30 Sep 2026 02:49:41 +0000

JavaScript can feel huge. This guide brings the most important topics together: variables, data types, functions, objects, arrays, promises, async/await, DOM events, and more. Each section has short explanations and small examples so you can learn fast and use them in real projects.
1. Variables: var, let, const
Variables store data.

var name = "Arun";   // old way, function-scoped
let age = 20;        // block-scoped, can change
const city = "Chennai"; // block-scoped, cannot reassign

Use let when the value changes.
Use const by default (safer).
Avoid var in new code.

2. Data Types: Primitive vs Non-Primitive
Primitive types (stored by value)

string: "hello"
number: 10, 3.14
boolean: true, false
null: intentional empty value
undefined: variable declared but not assigned
symbol, bigint (advanced)

let a = 10;
let b = a; // b gets a copy of 10
b = 20;
console.log(a); // 10

Non-primitive (reference) types

object: { name: "Arun" }
array: [1, 2, 3]
function: function sayHi() {}

let obj1 = { name: "Arun" };
let obj2 = obj1; // same reference
obj2.name = "Kumar";
console.log(obj1.name); // "Kumar"

3. Memory Management & Garbage Collection
JavaScript automatically allocates memory for variables and objects and frees it when no longer needed. This is called garbage collection.

Primitives are usually stored on the stack.
Objects/arrays/functions are stored on the heap, variables hold references.
If you keep references (e.g., in global variables, closures, or event listeners), memory cannot be freed → memory leak. Good practice: remove unused event listeners, avoid big objects in long-lived closures.

*4. Functions, Constructors, and this
*

Normal function

function add(a, b) {
  return a + b;
}

Arrow function (ES6)

const add = (a, b) => a + b;

Constructor function

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p = new Person("Arun", 20);

new creates a new object and sets this to that object.

5. Arrays: Important Methods

const nums = [1, 2, 3, 4, 5];

forEach

nums.forEach(n => console.log(n));

map (transform)

const doubled = nums.map(n => n * 2); // [2,4,6,8,10]

filter (select)

const evens = nums.filter(n => n % 2 === 0); // [2,4]

find vs filter

find: returns first matching element.
filter: returns array of all matching elements.


const firstEven = nums.find(n => n % 2 === 0); // 2
const allEvens = nums.filter(n => n % 2 === 0); // [2,4]

slice

const part = nums.slice(1, 3); // [2,3] (end not included)

reduce

const sum = nums.reduce((acc, n) => acc + n, 0); // 15

_includes vs indexOf
_

nums.includes(3);        // true
nums.indexOf(3);         // 2 (index) or -1 if not found

Use includes to check existence, indexOf if you need position.

6. Strings: Common Methods

const text = "  Hello World  ";

text.trim();            // "Hello World"
text.toLowerCase();     // "  hello world  "
text.toUpperCase();     // "  HELLO WORLD  "
text.includes("World"); // true
text.slice(0, 5);       // "  Hel"
text.split(" ");        // ["", "", "Hello", "World", "", ""]

7. Objects

const user = {
  name: "Arun",
  age: 20,
  greet() {
    console.log(`Hi, I am ${this.name}`);
  }
};

user.greet(); // Hi, I am Arun

Access:

user.name;      // dot
user["age"];    // bracket

8. Spread vs Rest Operator (...)
Same symbol, different use.

Spread (expand)

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a:1, b:2 }

Rest (collect)

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3); // 6function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3); // 6

In function parameters or destructuring, ... is rest. In arrays/objects literals or function calls, it’s spread.

## 9. Conditional Operator & switch

Ternary (conditional) operator

const age = 18;
const status = age >= 18 ? "adult" : "minor";

switch

const day = "Mon";

switch (day) {
  case "Mon":
    console.log("Monday");
    break;
  case "Tue":
    console.log("Tuesday");
    break;
  default:
    console.log("Other day");
}

10. Loops: for, break, continue

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // skip 2
  if (i === 4) break;    // stop at 4
  console.log(i);        // 0,1,3
}

break: exit loop.
continue: skip current iteration. Also: for...in (object keys), for...of (iterables).

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

11. == vs ===

0 == "0";   // true (type conversion)
0 === "0";  // false (different types)

Always prefer === and !== to avoid bugs

12. null vs undefined

undefined: variable declared but no value assigned.
null: intentional empty value.

let x;
console.log(x); // undefined

let y = null;
console.log(y); // null

13. Hoisting, Scope, and Closures

Hoisting
Variable declarations (var) and function declarations are moved to the top of their scope before execution.

console.log(a); // undefined (hoisted)
var a = 5;

// But with let/const:
console.log(b); // ReferenceError
let b = 10;

Functions are fully hoisted:

sayHi(); // works
function sayHi() {
  console.log("Hi");
}

Scope

var: function scope.
let, const: block scope ({}).

{
  let x = 1;
}
// x is not accessible here

Closure

A function that remembers variables from its outer scope.

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

count is “closed over” by the inner function.

14. Promises: then, catch, resolve, reject

Promise = value that may come later (e.g., API response).
const p = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Done");
  } else {
    reject("Error");
  }
});

p
  .then(res => console.log(res))
  .catch(err => console.error(err));

resolve(value): success.
reject(error): failure.
then: handle success.
catch: handle error

async / await and try / catch async/await makes promises look like normal code.

async function fetchData() {
  try {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("Fetch failed", err);
  }
}

async function always returns a promise.
await waits for a promise inside async.
Use try/catch for errors.

16. Axios (API calls)

Axios is a popular HTTP client.

npm install axios


import axios from "axios";

async function getUsers() {
  try {
    const res = await axios.get("https://api.example.com/users");
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
}

Sync vs async:

Normal function calls are sync (run line by line).
API calls with fetch/axios are async (don’t block UI).

17. setTimeout, setInterval, and Cleanup


// Run once after 1 second
const timerId = setTimeout(() => {
  console.log("One time");
}, 1000);

// Run every 2 seconds
const intervalId = setInterval(() => {
  console.log("Repeated");
}, 2000);

// Cleanup
clearTimeout(timerId);
clearInterval(intervalId);

Always clear intervals/timeouts in useEffect cleanup (React) or when component unmounts to avoid memory leaks

18. Event Loop (How JS Runs Async Code)

JavaScript is single-threaded but handles async tasks using:
Call stack: where functions run.

Web APIs (browser): setTimeout, fetch, DOM events.
Callback queue: ready callbacks.
Event loop: moves callbacks from queue to stack when stack is empty.
This is why setTimeout doesn’t block other code.

19. DOM Events: onclick, onchange, oninput, addEventListener

HTML:

<button id="btn">Click</button>
<input id="name" />

JS:

const btn = document.getElementById("btn");
const input = document.getElementById("name");

// Old style
btn.onclick = () => {
  console.log("Clicked");
};

// Better: addEventListener
btn.addEventListener("click", () => {
  console.log("Clicked with listener");
});

input.addEventListener("change", e => {
  console.log("Changed", e.target.value);
});

input.addEventListener("input", e => {
  console.log("Typing...", e.target.value);
});

Common events: click, change, input, submit, keydown, etc.

Callbacks, forEach, for...in

Callback
Function passed into another function.

function doSomething(callback) {
  callback();
}

doSomething(() => console.log("Done"));

forEach with callback

[1, 2, 3].forEach((n, index) => {
  console.log(index, n);
});

for...in (object keys)

const user = { name: "Arun", age: 20 };
for (const key in user) {
  console.log(key, user[key]);
}

21. Map vs forEach vs filter

map: returns new array (transform).
forEach: no return, just loop (side effects).
filter: returns new array (subset).

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2);      // [2,4,6]
const evens = nums.filter(n => n % 2 === 0); // [2]

nums.forEach(n => console.log(n));         // logs 1,2,3

Use map when you need a new array, forEach only for logging or side effects

22. flatMap

flatMap = map + flat (one level).


const arr = [[1], [2, 3], [4]];
const flat = arr.flatMap(x => x); // [1,2,3,4]

Useful when mapping to arrays and you want them flattened.

JSON, Parameters vs Arguments

JSON


const obj = { name: "Arun", age: 20 };
const jsonStr = JSON.stringify(obj); // to string
const parsed = JSON.parse(jsonStr);  // back to object

Parameters vs Arguments

function add(a, b) { // a, b are parameters
  return a + b;
}

add(2, 3); // 2, 3 are arguments

Real-Time Example: Putting It All Together

Imagine a simple “User Search” feature:

Input box for name.
Button to search.
Show list of users from an API.

<input id="search" placeholder="Search user" />
<button id="searchBtn">Search</button>
<ul id="list"></ul>

import axios from "axios";

const input = document.getElementById("search");
const btn = document.getElementById("searchBtn");
const list = document.getElementById("list");

let intervalId = null;

// Debounce with setInterval (simple example)
input.addEventListener("input", () => {
  if (intervalId) clearInterval(intervalId);
  intervalId = setInterval(async () => {
    clearInterval(intervalId);
    const query = input.value.trim();
    if (!query) return;

    try {
      const res = await axios.get(
        `https://api.example.com/users?q=${query}`
      );
      const users = res.data; // assume array

      list.innerHTML = "";
      users.forEach(user => {
        const li = document.createElement("li");
        li.textContent = user.name;
        list.appendChild(li);
      });
    } catch (err) {
      console.error(err);
    }
  }, 500);
});

btn.addEventListener("click", async () => {
  const query = input.value.trim();
  if (!query) return;

  try {
    const res = await axios.get(
      `https://api.example.com/users?q=${query}`
    );
    const users = res.data;

    list.innerHTML = "";
    users
      .filter(u => u.active)
      .map(u => u.name)
      .forEach(name => {
        const li = document.createElement("li");
        li.textContent = name;
        list.appendChild(li);
      });
  } catch (err) {
    console.error(err);
  }
});

This example uses:

Variables (let, const)
Arrow functions
DOM events (input, click)
async/await, try/catch
Axios
map, filter, forEach
setInterval + cleanup

Quick Comparison Cheat Sheet

var vs let vs const: scope & reassignment rules.
== vs ===: type conversion vs strict.
includes vs indexOf: boolean vs index.
find vs filter: one item vs array.
map vs forEach: returns array vs no return.
map vs filter: transform vs select.
Spread vs Rest: expand vs collect

The Ultimate Guide to JavaScript String Methods: Use Cases, Execution, and Gotchas

Rakesh Daniel — Mon, 07 Sep 2026 13:26:07 +0000

String.length
What it does: Returns the total number of characters in a string.Real-time Usage: Checking if user inputs (like passwords) meet security requirements before database entry.

1.How it Executes:

let userName = "rakesh57"; 
console.log(userName.length); // ➡️ OUTPUT: 8 (Executes by counting characters)

if (userName.length < 8) { 
    console.log("Username must be at least 8 characters!"); 
}

Drawback ⚠️: It counts empty spaces and punctuation. Crucially, it counts complex emojis as 2 characters instead of 1 (e.g., "👋".length outputs 2), which can easily break front-end UI character counters!

2.String.charAt()

What it does: Grabs the character character at a specific index position (starting from index 0).Real-time Usage: Checking formatting rules, like ensuring a custom system tag starts with a

specific prefix letter.How it Executes:
let username = "rakesh";
let firstChar = username.charAt(0); 

console.log(firstChar); // ➡️ OUTPUT: "r" (Executes by pulling the character located at position 0)

Drawback ⚠️:

If you pass an index that doesn't exist (like 100), it returns an empty string "" instead of throwing an error or returning undefined, making debugging silent errors difficult. It also corrupts multi-unit emojis.

String.charCodeAt()

What it does: Returns an integer between 0 and 65535 representing the UTF-16 code unit of the character at the given index.Real-time Usage: Data obfuscation, custom sorting rules, or checking if a user keypress falls inside uppercase ASCII bounds (A is 65, Z is 90)

let text = "ABC";
let code = text.charCodeAt(0); 

console.log(code); // ➡️ OUTPUT: 65 (Executes by looking up the UTF-16 decimal code for "A")

Drawback ⚠️:

It cannot natively parse characters outside the basic UTF-16 plane (like modern emojis). If used on a rocket emoji 🚀, it only reads the first half code unit, returning an incomplete value.

4. String.codePointAt()

What it does: Returns the complete, non-negative integer Unicode code point value of a character. Fully supports emojis!Real-time Usage: Building modern global chat applications or text entry fields where users frequently paste emojis and special mathematical symbols.

let emoji = "🚀";
let code = emoji.codePointAt(0); 

console.log(code); // ➡️ OUTPUT: 128640 (Executes by resolving the true, full Unicode map value)

Drawback ⚠️:

It is marginally slower in massive performance loops than charCodeAt(), and if you accidentally pass the second index position of a 2-unit surrogate pair, it returns an incorrect fragment.

5. String.concat()

What it does: Combines text parameters together and spits out a completely new string.Real-time Usage: Assembling data strings or constructing absolute URL paths dynamically.

let firstName = "Rakesh ";
let lastName = "Daniel";
let fullName = firstName.concat(lastName); 

console.log(fullName); // ➡️ OUTPUT: "Rakesh Daniel" (Executes by linking string chains together)

Drawback ⚠️:

Practically obsolete! Modern developers prefer template literals (${firstName} ${lastName}) or the standard arithmetic + operator because they are much more readable.

6. String.at()

What it does: Takes an integer index and returns the character at that spot. Allows negative integers to count backward from the end!Real-time Usage: Pulling dynamic values from the absolute end of a string structure without calculating length equations.


let url = "https://example.com"; 
let lastChar = url.at(-1); 

console.log(lastChar); // ➡️ OUTPUT: "m" (Executes by counting 1 step backward from the absolute end)

Fix Note: If your URL string ends in .com, at(-1) correctly evaluates to "m". If it has a trailing slash like https://example.com, then at(-1) evaluates to "/".**

Drawback ⚠️:

Introduced in ES2022. Running this natively in ancient corporate browsers or outdated Node.js legacy backends will instantly throw fatal runtime errors if you aren't compiling down via Babel.

7. String Bracket Notation [ ]

What it does: Treats a standard string just like a readable index-based array.Real-time Usage: Quick syntax shorthand to grab initials or code letters on the fly.

let name = "Akm";
let initial = name[0]; 

console.log(initial); // ➡️ OUTPUT: "A" (Executes direct index offset scanning memory)

Drawback ⚠️: If an index does not exist, it evaluates to undefined (unlike charAt() which yields ""). Also, strings in JavaScript are immutable, meaning executing name[0] = "X" will silently fail without warning—the original string stays exactly the same!

8. String.slice()

What it does: Extracts a section of text between index bounds and returns a fresh string without mutating the original. It accepts negative index ranges.Real-time Usage: Truncating text layouts or masking sensitive banking details where you only want to reveal the trailing numbers.

let cardNumber = "4532789012345678";
let lastFourDigits = cardNumber.slice(-4); 

console.log(lastFourDigits); // ➡️ OUTPUT: "5678" (Executes by grabbing only the final 4 characters)

Drawback ⚠️: If your start parameters accidentally cross over or exceed the end parameters chronologically, it will silently return a blank string "" instead of raising an error alert.

9. String.substring()

What it does: Extracts a string section strictly between two positive index coordinates.Real-time Usage: Pulling components out of structural text schemas where index bounds are fixed and positive.

let email = "rakesh@gmail.com";
let domain = email.substring(7); 

console.log(domain); // ➡️ OUTPUT: "gmail.com" (Executes by cutting from index 7 to the end)

Drawback ⚠️: It does not support negative values. Passing a negative value converts it straight to 0. Furthermore, if your start position is numerically larger than the end position, it automatically swaps them behind the scenes, creating unexpected software behavior.

10. String.substr()

What it does: Extracts a segment starting at a distinct index for a specified character length count.Real-time Usage: Extracting fixed-length serial markers or prefix identifier components out of database tracking codes.


let serial = "ID-99482-XYZ";
let idNumber = serial.substr(3, 5); 

console.log(idNumber);

// ➡️ OUTPUT: "99482" (Executes by starting at index 3 and counting 5 steps right)
Use code with caution.

Drawback ⚠️: Legacy Deprecated! It has been officially removed from the core standard guidelines. Avoid writing this in modern production platforms, as browser engine updates can drop support for it entirely. Use .slice() instead.

11. String.toUpperCase()

What it does: Forces all alphabetic characters inside a string to switch to capital letters.Real-time Usage: Case-insensitive string parsing—standardizing e-commerce discount codes entered by users.


let inputCode = "save50";
let upperCode = inputCode.toUpperCase();

console.log(upperCode);

// ➡️ OUTPUT: "SAVE50" (Executes by scaling lower Unicode points to upper)
Use code with caution.

Drawback ⚠️: It fails internationalization mapping rules for specific non-Latin character sets (such as Turkish scripts where lowercase i maps to a distinct uppercase İ), introducing sneaky validation bugs across international borders.

12. String.toLowerCase()

What it does: Forces all alphabetic characters inside a string to shift to lowercase letters.Real-time Usage: Cleaning up signup emails before saving to a database so accounts don't duplicate on case variations.

let emailInput = "RakeshDaniel@Gmail.com";
let cleanEmail = emailInput.toLowerCase(); 

console.log(cleanEmail);

// ➡️ OUTPUT: "rakeshdaniel@gmail.com" (Executes by flattening letters to lowercase)
Use code with caution.

**Drawback ⚠️: **Just like toUpperCase(), it runs into formatting conflicts when managing localized structural words or accents belonging to international languages.

13. String.trim()

What it does: Vacates all white spaces, tabs, and newline line breaks from both outer edges of a string block.Real-time Usage: Sanitizing basic user field form submissions where users unintentionally hit the spacebar at the end of their input text.

let input = "   rakesh@example.com   ";
let cleanInput = input.trim(); 

console.log(cleanInput); // ➡️ OUTPUT: "rakesh@example.com" (Executes by stripping outer edge padding)
Use code with caution.

**Drawback ⚠️: **It only strips the extreme left and extreme right boundaries. Any massive spacing errors occurring right inside the middle of the text block stay completely untouched (e.g., "John Doe".trim() remains "John Doe").

14. String.trimStart()

What it does: Trims out whitespace structures exclusively from the commencement (left side) of a target string.Real-time Usage: Aligning text document data arrays or normalizing custom code snippet formatting systems.

let codeLine = "   let x = 10;";
let cleanStart = codeLine.trimStart();

console.log(cleanStart);


 // ➡️ OUTPUT: "let x = 10;"

(Executes by dropping white spacing on the left side)
Use code with caution.

Drawback ⚠️: It leaves the entire right side of the text untouched. Any stray trailing space or newline character remains stuck at the end.

15. String.trimEnd()

What it does: Removes empty spacing blocks exclusively from the conclusion (right side) of a text string.Real-time Usage: Cleansing paragraphs of trailing return line errors before passing inputs into Markdown render platforms.

`let message = "Hello World! ";
let cleanEnd = message.trimEnd();

console.log(cleanEnd);`

// ➡️ OUTPUT: "Hello World!" (Executes by slicing away blank space on the right side)
Use code with caution.

Drawback ⚠️:

It leaves any accidental starting spaces on the left side intact.16. String.prototype.padStart()What it does: Fills out the beginning of a string using a filler string pattern until the text hits a target character length limit. This visually pushes your original text to the right.Real-time Usage: Padding numeric strings to ensure uniform structural presentation, like building digital stopwatch loops or masking financial credit card logs


let accountLastDigits = "5678";
let maskedCard = accountLastDigits.padStart(16, "*"); 

console.log(maskedCard); // ➡️ OUTPUT: "************5678" (Executes by appending padding to the left)
Use code with caution.

Drawback ⚠️: If your original text length is already larger than or perfectly equal to the target size value parameter, it passes your string back exactly as it was, without throwing any errors or adding padding.

17. String.padEnd()

**
What it does: Fills out the termination of a string with character padding until it spans the exact target scale. This visually pushes your original text to the left.Real-time Usage: Aligning complex receipt layouts, generating data columns inside text log printouts, or appending fixed trailing zeroes to raw decimals.

let basePrice = "45";
let paddedPrice = basePrice.padEnd(5, "0"); 

console.log(paddedPrice); // ➡️ OUTPUT: "45000" (Executes by appending padding to the right side)
Use code with caution.

Drawback ⚠️: Just like padStart(), it will do absolutely nothing if your string size already equals or exceeds the target count parameter.

18. String.repeat()

What it does: Copies a string code structure over and over again for a distinct multiplier count and bridges them into one new string.Real-time Usage: Generating responsive aesthetic terminal separator bars or staging rapid layout mock assets during development.


let divider = "-".repeat(15); 
console.log(divider); // ➡️ OUTPUT: "---------------" (Executes by duplicating the character 15 times)
Use code with caution.

*Drawback ⚠️: * You must specify a non-negative number that is less than Infinity. Passing a negative integer or Infinity into the argument causes a fatal RangeError crash.

19. String.replace()

What it does: Finds the very first matching occurrence of a search term or Regex profile and replaces it with an updated substring value.Real-time Usage: Substituting discrete single templates placeholders or localized keyword modifications.


let msg = "Welcome admin! Please log in admin.";
let clearMsg = msg.replace("admin", "Rakesh"); 

console.log(clearMsg); // ➡️ OUTPUT: "Welcome Rakesh! Please log in admin." (Executes by changing only the first match)
Use code with caution.

Drawback ⚠️: It only impacts the absolute first match it identifies. Subsequent identical terms remain completely unchanged unless you explicitly pass an advanced Regular Expression using global flags (/admin/g).

20. String.replaceAll()

What it does: Searches through a string and switches every single instance of a target keyword match with a fresh replacement substring.Real-time Usage: Censoring bad vocabulary strings globally across open application chat rooms or applying global bulk macro changes.


let bio = "JavaScript is cool because JavaScript is fast.";
let updatedBio = bio.replaceAll("JavaScript", "JS"); 

console.log(updatedBio); // ➡️ OUTPUT: "JS is cool because JS is fast." (Executes by replacing every match)
Use code with caution.

Drawback ⚠️: If you decide to look up values using a Regular Expression (RegExp) inside replaceAll(), the expression must contain the global "g" flag, otherwise JavaScript will crash with an unhandled exception error.

21. String.split()

What it does: Slices a string array structure apart wherever it detects a specific delimiter character, placing the separated pieces inside a clean JavaScript array.Real-time Usage: Parsing raw CSV spreadsheets, splitting text into word matrices, or extracting categories from URL path strings.

let tagString = "html,css,javascript";
let tagArray = tagString.split(","); 

console.log(tagArray); // ➡️ OUTPUT: ["html", "css", "javascript"] (Executes by breaking strings at commas)
Use code with caution.

Drawback ⚠️:
If you attempt to isolate individual characters by passing a blank delimiter string (split("")), it splits apart the surrogate pairs of modern complex emojis, resulting in corrupted characters inside your array list.

ConclusionUnderstanding how these string tools work under the hood keeps your data clean, your UI responsive, and your code bug-free.

What is your favorite JavaScript string method? Let me know in the comments below!

How I Built a Full Flipkart Page Clone From Scratch Using My Own Code 🛒🔥

Rakesh Daniel — Tue, 01 Sep 2026 14:00:15 +0000

Building real-world user interfaces is the ultimate way to level up your frontend skills. Recently, I challenged myself to build a complete Flipkart Homepage Clone entirely using my own code!
🔗 Live Demo: (https://flipkart-rakesh.vercel.app/)

The Tech Stack HTML5 & CSS3 &js – Built using clean semantic layouts, Flexbox, and CSS Grid.
Vercel – Used for fast, seamless production deployment.
The Core Architecture
I broke the massive Flipkart UI down into three essential parts:
The Global Navigation Bar
This section handles the brand identity, dynamic delivery location, and user actions.

<header class="flipkart-navbar">
  <div class="nav-container">
    <div class="logo-section">Flipkart</div>

    <!-- Delivery Location Selector -->
    <div class="location-selector">
      <span>Location not set</span>
      <button>Select Delivery Location ></button>
    </div>

    <div class="nav-actions">
      <button class="login-btn">Login</button>
      <span>More</span>
      <div class="cart-icon">Cart</div>
    </div>
  </div>
</header>`
**The Interactive Promo Sliders**
E-commerce websites rely heavily on ads. I structured the banner spaces using clean carousel wrappers.
<section class="promo-slider">
  <div class="slider-wrapper">
    <div class="slide">Slide 1 (Main Banners)</div>
    <div class="slide">Slide 2 (Bank Offers)</div>
    <div class="slide">Slide 3 (Product Deals)</div>
  </div>
</section>
**Dynamic Product Grids & Loading States**
To simulate real-world data fetching, I included a fallback text element that displays while items load into the grid.
`<main class="products-showcase">
  <!-- Top Products -->
  <section class="product-group">
    <h2># Top Products</h2>
    <div class="product-grid">
      <div class="card">Air Conditioner</div>
      <div class="card">Electronics</div>
    </div>
  </section>

  <!-- Trending Products with Loading State -->
  <section class="product-group">
    <h2># Trending Products</h2>
    <div class="loading-state">
      <p>loading Produts.......</p>
    </div>
  </section>
</main>

Building this clone taught me how to handle complex navigation menus, manage ad banner grids, and structure real-time loading fallbacks.Drop a comment below and let me know what you think of the design! 👨‍💻🔥

How I Cloned My College Website (Sri Sankara Bhagavathi Arts & Science College) from Scratch!

Rakesh Daniel — Sun, 30 Aug 2026 11:28:32 +0000

Original site vs உங்க clone site: I recreated my college website (https://ssbcollege.edu.in/) to improve my frontend & responsive design skills. Here is my live project (https://college-website-clone-4t25.onrender.com/).

Tech Stack Used
HTML5, CSS3
javascprit
Render (Hosting)

Key Features Built
Mobile & Desktop Responsive Navbar: Header with logo, contact info, and navigation menu.

Our Education Process Section: Redesigned UI card section with dynamic content blocks.

Footer & Useful Links: Integrated links for UGC, MS University, and campus contact details.

Challenges & What You Learned

Handling responsiveness across desktop vs mobile viewports.
** my own coding buit2learn**
Structuring layouts to match original design elements accurately.

**
Live Demo: Render Link**

Original Site: https://ssbcollege.edu.in/

GitLab Repository: https://gitlab.com/payilagam-group8990334/college_website_clone.git

# How I Made My First Open-Source Contribution in 3 Hours at Build2Learn Chennai

Rakesh Daniel — Sat, 29 Aug 2026 12:33:58 +0000

On August 29, 2026, I attended the Build2Learn hackathon/collab event held at Grootan Technologies in Perungudi, Chennai, from 9:00 AM to 2:00 PM. I walked in with no big idea of my own.
What is Build2Learn?
Build2Learn isn't a regular seminar. It's not about theory — it's a high-energy space where people actually build software and learn by doing. The crowd included many senior professionals with 5 to 20 years of experience across IT companies.
Watching how these senior engineers think, two things became clear to me:

Fast Product Delivery* — They don't waste months planning. They identify the core value, build a working prototype, and get it into users' hands right away.
Real-Time Problem Solving* — No matter how big or difficult a task looks, they break it into small parts and solve it quickly using modern tools.
Suresh Anna and His "Noolagam" Project
While looking around for someone to help, I met Suresh. He was building "Noolagam" — a digital library/book platform project. His tech stack was quite modern:

Frontend: Flutter
Backend: Hono.js

My own background was a bit different — I know Node.js, Express, and MySQL reasonably well, and I'm currently learning backend development with TypeScript, Drizzle ORM, and SQLite.

Even though our tech backgrounds didn't fully match, Suresh's project needed a Book Review System. I saw this as my chance and offered: "I'll get the backend schema ready for the review feature for you." He agreed. The clock started — I had exactly 2 hours.

** Technical Implementation**
The login page wasn't fully ready yet. So instead of waiting for it, I thought like an agile developer and planned to run the review feature using a guest-user system (as Suresh suggested).

Here's the code I wrote using TypeScript and Drizzle ORM for the SQLite database:

import { sqliteTable, integer, text } from 'drizzle-orm/sqlite-core';
import { books } from './books'; 
export const reviews = sqliteTable('reviews', {

  reviewId: integer('id').primaryKey({ autoIncrement: true }),
  bookId: integer('book_id')
    .notNull()
    .references(() => books.id, { onDelete: 'cascade' }),
  username: text('username').notNull(),
  reviewText: text('review_text').notNull(),
  rating: integer('rating').notNull(),
  isHidden: integer('is_hidden', { mode: 'boolean' }).default(false).notNull(),
  createdAt: text('created_at').default(new Date().toISOString()).notNull()
});

Breakdown of the design decisions
bookId constraint* — .references(() => books.id, { onDelete: 'cascade' }). This was new to me, and I asked Gemini to explain what it does and learned it from there. It means that if a book is deleted from the Noolagam app, all its associated reviews get cleaned up automatically from the database — keeping the database from filling up with orphaned data.

username fallback — Since there's no login system yet, taking it directly as a text string was useful, letting the frontend team connect their UI to our backend quickly for testing.
isHidden state — Important for handling unwanted spam comments: instead of deleting them outright, they can be hidden from the app while still being kept in the database.

A senior developer (Gokul anna) taught me how to use Claude AI as a pairing partner — how to prompt it correctly to structure code, quickly debug TypeScript type-definition errors, and design with UX in mind. That day, I truly understood how modern developers multiply their working speed using AI.

Finally, I created a new feature branch (feature/book-reviews) in Suresh's project repository, wrote and tested the code, finalized the schema, and successfully pushed it to the repo to be integrated with their Hono.js/SQLite ecosystem.