Forem: yashi srivastava

🧭 React Navigation & Routing

yashi srivastava — Mon, 13 Oct 2025 16:43:56 +0000

🔹 1. Why We Need Routing

In HTML, we can create navigation bars using <a> tags, but every time we click a link, the entire page reloads.
This makes navigation slower because each page loads a new HTML file.

In React, navigation happens inside a single HTML file using JavaScript, so the page doesn’t reload.
👉 It gives a smooth and fast user experience.

🔹 2. Example – Navigation in HTML vs React

HTML Example:

<a href="home.html">Home</a>
<a href="contact.html">Contact</a>

➡ Each click reloads the page.

React Example (Using React Router):

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

➡ No page reload — React updates the view dynamically.

🔹 3. React Router Setup

In React, we use BrowserRouter to define all routes in one place — usually in App.js.

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ Advantage:
We no longer need to add the navigation bar to each page manually — React Router handles everything in one place.

🔹 4. URL Example (Dynamic Navigation)

When we visit a site like Myntra, the URL changes dynamically:

myntra.com/clothes
myntra.com/clothes/tshirts
myntra.com/clothes/jeans

Even though the URL changes, the page doesn’t reload — React just updates the DOM smoothly.

🔹 5. Nested Routes

Nested routing means creating routes inside another route.
Example: /dashboard/clothes, /dashboard/makeup

We define nested routes inside a parent route, and the nested components render inside the parent using an Outlet.

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="clothes">Clothes</Link>
        <Link to="makeup">Makeup</Link>
      </nav>
      <Outlet /> {/* Nested components will render here */}
    </div>
  );
}

function Clothes() {
  return <h3>Clothes Section</h3>;
}

function Makeup() {
  return <h3>Makeup Section</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="clothes" element={<Clothes />} />
          <Route path="makeup" element={<Makeup />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ Result:

/dashboard → shows Dashboard
/dashboard/clothes → shows Clothes inside Dashboard
/dashboard/makeup → shows Makeup inside Dashboard

💡 In Short:

Concept	HTML	React
Navigation	Reloads full page	Updates single page dynamically
Setup	Separate HTML files	One `BrowserRouter` for all routes
Nested Pages	Not possible	Easy with `Outlet`
Experience	Slow	Fast & smooth

🌱 Understanding Prop Drilling and How to Avoid It in React

yashi srivastava — Mon, 13 Oct 2025 16:24:04 +0000

Have you ever found yourself passing the same data through multiple components just to get it to a deeply nested child?
If yes — then you’ve experienced something called prop drilling.

In this post, let’s explore what prop drilling is, why it can be a problem, and how React’s Context API helps us solve it efficiently.

🧩 What Are Props in React?

In React, props (short for “properties”) are how we pass data from a parent component to its children.
They can be variable values, functions, or even entire components.

For example:

function Child({ message }) {
  return <p>{message}</p>;
}

function Parent() {
  return <Child message="Hello from Parent!" />;
}

Here, the Parent component passes a prop called message to the Child.
That’s simple enough — but what happens when we have many levels of nested components?

🧭 What Is Prop Drilling?

Prop drilling happens when we need to pass props through multiple layers of components to reach a deeply nested one.

Let’s see an example:

function App() {
  const [count, setCount] = React.useState(0);
  return <LevelOne count={count} setCount={setCount} />;
}

function LevelOne({ count, setCount }) {
  return <LevelTwo count={count} setCount={setCount} />;
}

function LevelTwo({ count, setCount }) {
  return <LevelThree count={count} setCount={setCount} />;
}

function LevelThree({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Notice how we had to pass count and setCount through every level, even though only LevelThree actually uses them.
That’s prop drilling — and it can quickly become messy as your app grows.

⚙️ Why Is Prop Drilling a Problem?

It clutters intermediate components with props they don’t even use.

It makes code harder to maintain and refactor.

Adding or removing data often means changing multiple files.

If you’ve ever updated a prop name and had to touch several components — that’s a sign of prop drilling trouble.

🪜 What About State Lifting?

Before we fix prop drilling, it’s important to understand state lifting.

When two or more components need to share data, we can “lift” the state up to their common ancestor.

For example:

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB setCount={setCount} />
    </>
  );
}`

Here, Parent holds the state so both ChildA and ChildB can access it.
This is state lifting, and it’s useful — but it doesn’t always solve prop drilling.

🌐 Avoiding Prop Drilling with Context API

React provides a built-in solution: Context API.
It allows us to share data globally without manually passing props through every level.

Here’s how it works:

Create a context

Provide it to components

Consume it wherever needed

Example:

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

// Step 1: Create Context
const GlobalContext = createContext();

function App() {
const [age, setAge] = useState(25);

return (
// Step 2: Provide context value

);
}

function Profile() {
return ;
}

function UserDetails() {
// Step 3: Consume context
const { age, setAge } = useContext(GlobalContext);
return (

  <p>Age: {age}</p>
  <button onClick={() => setAge(age + 1)}>Increase Age</button>
</div>

);
}

Now, the UserDetails component can access and modify age without any prop drilling. 🎉

🧠 A Quick Recap
Concept Description
Props Data passed from parent to child
Prop Drilling Passing props through multiple intermediate components
State Lifting Moving state up so multiple components can share it
Context API A global way to share state without manual prop passing
⚡ Final Thoughts

Prop drilling isn’t “bad” — it’s part of how React components communicate.
But when your app grows and you need to share data across multiple components, Context API (or tools like Redux, Zustand, or Recoil) can make your life much easier.

In short:

Use props for simple cases.
Use Context for shared global state.

💬 What about you?
Have you run into prop drilling before?
How did you solve it — Context, Redux, or another library?
Share your experience below! 🚀

React Hooks & Performance Concepts

yashi srivastava — Sat, 11 Oct 2025 20:38:55 +0000

1️⃣ Stopwatch Example — Understanding `useRef` with setInterval

Scenario:
I built a simple stopwatch using React to understand useRef and state updates.

Key Concepts:

Problem: Using setState directly in setInterval can lead to stale state issues:

  setTime(time + 1) // Might use old `time` value

Solution: Use the functional updater to access the latest state:

  setTime(prevTime => prevTime + 1)

Why useRef is important:
- Stores the interval ID across re-renders (intervalRef.current).
- Doesn’t trigger re-renders when updated.
- Allows us to clear the interval safely:
```
clearInterval(intervalRef.current)
intervalRef.current = null
```
Important Takeaways:
- useRef = persistent, mutable storage across renders.
- Always clear old intervals before starting a new one to prevent multiple intervals running simultaneously.
- useState triggers UI updates; useRef stores values silently.

2️⃣ `useState` vs `let` vs `useRef`

Scenario:
I experimented with a money variable using let, useState, and useRef to understand state management.

Key Observations:

Using let:

Value changes in memory but does not trigger UI updates.
Resets on re-renders since it’s recreated each time.

Using useState:

Changes trigger re-renders, so updated values reflect in the UI.

Using useRef:

Stores a persistent value across renders without triggering UI updates.
Access using .current.
Perfect for storing values like timers, previous state, or DOM references.

Memory Tip:

State = UI updates
Ref = silent memory storage

3️⃣ Performance Optimization — `useCallback` and `useMemo`

Scenario:
Built a Fibonacci calculator to understand when recalculations happen unnecessarily.

Key Observations:

Problem:

Fibonacci function recalculates on every render, even if only unrelated state changes (count) happen.
Causes unnecessary computation and slows performance.

Solutions:

useCallback:
- Memoizes a function reference.
- Only recreates the function if dependencies change.
- Prevents unnecessary function recreation across re-renders.
useMemo:
- Memoizes the result of a calculation.
- Recalculates only if dependencies change (e.g., input value).
- Avoids unnecessary computation when unrelated state changes.

Memory Tip:

Callback = remembers function
Memo = remembers result

4️⃣ Important Lessons Learned

Re-renders: Functions and variables are recreated, but refs remain stable.
Intervals & Timers: Always store in useRef and clear them to prevent duplicate runs.
State vs Ref: Use state for UI updates; use ref for persistent data without re-renders.
Performance Hooks: useCallback and useMemo prevent unnecessary recalculation and function recreation.
Debugging Tip: Always check console logs to confirm variable updates that don’t reflect in UI (common with let or ref values).

5️⃣ Practical Takeaways for Developers

For timers or intervals, always store the reference in useRef.
Use useState when UI needs to update, useRef when you want to persist values silently.
Use functional updates with setState to avoid stale closures.
Optimize performance with useCallback (functions) and useMemo (values).
Always clear intervals or timeouts to prevent memory leaks and bugs.

6️⃣ Memory Mnemonics

Hook	Purpose	Tip
`useState`	UI reactive value	State = UI updates
`useRef`	Persistent storage across renders	Ref = silent memory
`useCallback`	Memoize function references	Callback = remembers function
`useMemo`	Memoize computed values	Memo = remembers result

JavaScript revision blew my mind today.

yashi srivastava — Tue, 30 Sep 2025 17:01:12 +0000

We can do console.log(Object.prototype) → and it shows the properties and methods that all objects inherit.But try console.log (Object.__proto__) → it gives ƒ () { [native code] }.

Ever wondered why?
Because our initial object is created using a constructor.
And only in constructors we can add properties by using prototype.

Now, who inherits?
It’s like our global Object constructor. The objects created from it inherit through prototype.

That prototype itself has inner things we use—like .create() and .__proto__.
All these are functions living on Object.prototype.

lets deep dive

1 — Quick overview

Every object in JavaScript has a hidden pointer to another object (its prototype). When you ask for a property, JS checks the object first, then follows that pointer up the chain until it finds the property or reaches null.

2 — `Object.create(proto)` example (start here)

const parent = {
  greet() { console.log("Hello from parent!"); }
};

const child = Object.create(parent);
console.log(child);          // shows child as {}
console.log(child.__proto__); // shows the parent object in console
child.greet();               // "Hello from parent!"

What happened (step by step):

child is created as an empty object.
Internally, JS sets child’s hidden slot [[Prototype]] to point to parent. (DevTools shows this as child.__proto__.)
When you call child.greet(), JS doesn’t find greet on child, so it looks at child.__proto__ (the parent) and finds greet there.

ASCII view:

child {} 
   __proto__ → parent { greet: f }
                   __proto__ → Object.prototype
                                      __proto__ → null

3 — Understanding the console output: `{ greet: ƒ } [[Prototype]]: Object`

When the console shows:

{ greet: ƒ }
[[Prototype]]: Object

{ greet: ƒ } = the parent object (it has a greet function).
[[Prototype]]: Object = meaning the parent object itself has a prototype, which is Object.prototype.
The double brackets [[Prototype]] mean this is an internal slot (not a normal enumerable property).

Simple sentence: the console is telling you the parent has its own parent — Object.prototype.

4 — `proto` vs `prototype` (exact difference)

__proto__
- Exists on objects.
- It’s the actual reference (internal slot) to the parent object.
- You can inspect it with obj.__proto__ or Object.getPrototypeOf(obj).
prototype
- Exists on constructor functions (e.g., function Person(){} → Person.prototype).
- It is the object that will become the __proto__ of instances created by that constructor.

Proof code:

function Person(){ }
const p = new Person();
console.log(p.__proto__ === Person.prototype); // true

5 — What `new` does (exact, ordered steps)

When you run const x = new C(args):

Create a new empty object: {}.
Set the object’s internal [[Prototype]] to C.prototype.
Call C with this set to that new object, filling properties on this.
Return the new object (unless constructor explicitly returns another object).

Visual:

x { own properties }
   __proto__ → C.prototype { shared methods }
                   __proto__ → Object.prototype
                                      __proto__ → null

6 — Property lookup algorithm (how JS finds a property)

When you do obj.someProp:

Check obj’s own properties. If found → return it.
Else, set obj = obj.__proto__ and repeat step 1.
Continue until obj becomes null. If not found → undefined.

This is why child.greet() works even though greet is not on child: the lookup finds greet on parent.

7 — Where to put data vs methods (practical rule)

Put per-object data inside the constructor (each instance gets its own copy).

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

Put shared methods on the constructor’s prototype (all instances reuse the same function).

  Person.prototype.sayHi = function(){ console.log(this.name); }

Why: methods on prototype save memory and make behavior consistent for all instances.

8 — The top of the chain: `Object.prototype` → `null`

Most objects eventually point to Object.prototype.
Object.prototype.__proto__ is null. That null is the end — no more lookup beyond that.

Example check:

console.log(Object.getPrototypeOf({}) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null

9 — Function vs Object (short note)

Object itself is a function (typeof Object === 'function').
Functions are objects too: they have their own __proto__ (usually Function.prototype).
So constructors and built-ins follow the same prototype rules (they are objects that link to prototypes).

10 — How to inspect safely (recommended tools)

Object.getPrototypeOf(obj) → preferred way to get prototype (safer than __proto__).
obj.hasOwnProperty('x') → checks own properties only.
console.log(obj.__proto__) or expand object in DevTools → shows [[Prototype]].

11 — Common mistakes & best practices

Don’t rely on __proto__ for setting prototypes in production (it’s slower). Use Object.create(proto) or Object.setPrototypeOf() only when needed.
Don’t mutate shared prototype state carelessly — changing PrototypeObject.sharedArray.push(...) affects all instances.
Use prototype for methods, constructor for instance data.

12 — Short cheat-sheet (memorize this)

Object.create(proto) → create object whose __proto__ is proto.
__proto__ → object’s hidden parent pointer.
prototype → constructor’s blueprint object.
new → links instance __proto__ to constructor’s prototype, then runs constructor.
Object.prototype.__proto__ === null → chain end.

## 📌 Deep Dive into `useState`, Re-renders, and Optimizations in React

yashi srivastava — Mon, 07 Apr 2025 18:00:41 +0000

> learned the whole concept from this simple project

🔄 What does re-render mean in `useState`?

Re-render(means calling function)in React happens when we call the function returned by useState (like setColor) to update the state. A common confusion arises when we use:

const [Color, setColor] = useState("black");

Now, when I click a button and use setColor("green"), the component re-renders.

Got it! Here's your original post with your tone and style kept intact — just added the new part you wanted, cleaned up the logic a bit, and kept it simple:

💭 But how does it work, if it's a `const`?

React makes us feel like this variable is being recreated every time, but here’s the core truth:

const [Color, setColor] = useState("black");

"black" is used only once — when the component mounts for the first time.
After that, React preserves the state between re-renders.
Every time you call setColor(...), React re-renders the component with the preserved state, not the original "black" — means any value which was preserved like red, green etc.

Now even though you write:

const [Color, setColor] = useState("green");

in this re-render, React ignores "green" because the state is already preserved with the latest value (like "green" from previous update).

👉 Here's what’s really going on:

In every render, const [Color, setColor] = useState("black"); runs again — so Color is getting created again because it's a const (you can’t reassign it, but you can recreate it on every function call), and it's stored in the stack.

But when the value of Color doesn’t change, it just takes the value from the preserved state.

However, setColor is created only one time, and its reference is stored in the heap, so it doesn’t get recreated on every render.

🔁 Functions Re-execute, But State Persists

Yes, it's true that every time the component re-renders, the function (like App or Main) runs again and all its variables are freshly created in memory.

But React holds onto the state separately, outside of the function scope — that’s how useState works.

🧠 Re-rendering for Primitive vs Non-Primitive Types

There’s a subtle behavior in useState that’s often overlooked:

For primitive values (string, number, boolean), if you call setState with the same value, React may still re-render, even though the value didn't change.

React doesn’t compare the old vs new primitive deeply — it just assumes change and re-renders.

But for non-primitive types (object, array, function), React compares the reference. If the reference doesn't change, React won’t trigger a re-render.

So yes — it’s kind of ironic: React re-renders even when the primitive value is the same, but avoids re-rendering for same-reference non-primitives like objects,arrays.

✅ Optimization with `useEffect`

To prevent running side effects unnecessarily — like changing the background color — we use useEffect.

useEffect(() => {
  document.body.style.backgroundColor = Color;
}, [Color]);

This means:

React will only update the background color if Color has actually changed.
Even though useState may trigger a re-render with the same primitive value, useEffect won’t run unless the dependency (Color) is different.

So this is where useEffect helps us control unnecessary operations, especially with primitives.

⚠️ What if you don’t provide a dependency array?

useEffect(() => {
  // runs on every render
});

This will cause the effect to run after every render, regardless of what changed.

But if you do:

useEffect(() => {
  // runs only once — on initial render
}, []);

Then it runs only on first mount, just like componentDidMount in class components.

🧩 Component Nesting, Reusability, and the Need for `memo`

Now the advanced bit.

When we render a UI, we often build it using multiple components. That’s how we split UI into reusable parts.

But here’s the issue:

If only one part of the UI is changing, React still re-runs all components used inside the main function — even if they didn't change.

That’s unnecessary, and over time, can slow things down.

🛡️ Enter `React.memo`

React provides a hook called memo which helps with this:

const MemoizedComponent = React.memo(MyComponent);

This makes React:

Render MyComponent only once initially
Then skip re-rendering it on future parent renders — unless props change

So now, if you're rendering multiple UIs like:

<MainUI />
<AnotherUI />

Even if only MainUI needs to update, without memo, both re-render. But with memo, React skips re-rendering AnotherUI if its props haven’t changed. Huge performance win.

⚠️ But yes — there's a tradeoff with `memo`

When you wrap a component with memo, React adds extra comparison logic to check if the props have changed.
That’s some additional overhead.
If your component always receives new props, it will re-render anyway, so memo doesn't help.

✅ So use memo when:

The component is large or expensive to render
It receives stable props that don't change often
The parent re-renders frequently

🎯 Final Conclusion

useState() uses the initial value only once.
React re-renders the component when state changes — but keeps the latest state preserved.
Re-renders recreate the function, but React gives you the last state back.
React doesn’t optimize re-renders for primitives — but you can control side effects using useEffect.
For better performance, use React.memo to skip re-rendering components that don’t need to update.

This session helped me break some long-standing confusion. If you're also learning React, go deep — don't just learn syntax, understand the behavior.

React is not just about rendering UI — it’s about rendering smartly.

✨ If you found this helpful or you're on your own React journey — drop a like, share with a fellow dev, and feel free to comment your thoughts or doubts!
Let's learn together and build better. 💻🚀

ReactJS #WebDev #CodeNewbie #LearnTogether

🚀 I Just Cleared Some 🔥Core React & JavaScript Doubts — and You Should Know These Too!

yashi srivastava — Mon, 07 Apr 2025 17:46:01 +0000

Hey folks! Today was one of those sessions where the lightbulb 💡 really went off — I finally understood some confusing but fundamental stuff in React and JavaScript. Here's a breakdown of what I learned (and trust me, it's gold 👑 for beginners and even intermediates who missed the tiny details):

⚛️ 1. Why JSX Needs Double Curly Braces for Styling

"Wait, I'm passing a JavaScript object, so why can't I just wrap it directly with {} like that?"

<button {style={backgroundColor: "red"}}>Red</button> ❌

But now I know:
Because JSX doesn't allow curly braces around attributes like that. In JSX, attributes must be in the format:
attributeName={jsValue}

<button style={{ backgroundColor: "red" }}>Red</button>

So in incorrect example:

<button {style={...}}> ... </button>

You're trying to put JavaScript inside the HTML tag syntax itself, which breaks JSX rules.
JSX expects props (like style) to be written as:

<tagName propName={jsExpression} />

In our case:

<button style={ { backgroundColor: "red" } }>Red</button>

This is valid because:

style is the prop name
{ ... } is the JSX way of saying “the value of this prop is a JavaScript expression”
And that expression happens to be an object 🔁

🔁 2. Does the Whole Component Re-render on State Change?

I asked:

When I click a button and change color using setColor("pink"), does the whole component re-render? Does React repaint everything?

✅ Answer: Yes, the function re-runs, but React is smart!

The entire JSX is re-evaluated
But React only updates the actual DOM parts that changed (thanks to Virtual DOM and diffing)

So your UI stays efficient and smooth 🧈✨

👀 3. Why Does `console.log()` Run Twice in React?

I dropped a console.log("let's see") inside JSX and freaked out when it printed twice 😅

💡 Reason:

React.StrictMode in development intentionally renders components twice (but ONLY in dev mode) to catch bugs.

✅ Production will render just once. No worries! All part of the dev experience.

🧠 4. JS Return Rule: Why Code After `return` is Ignored

I made this mistake:

return (
  <>
    <h1>Hi</h1>
  </>
);
<App />; // ❌ doesn't work

Lesson learned:
➡️ After return, nothing else inside the function runs.

So if you want to return <App />, include it inside the return (...) block.

📦 5. Do I Have to Use the Same Prop Name?

I was passing state like this:

<App count={count} />

And I wondered: Do I have to call it count in the child?

✅ Nope!

You can rename it however you want when passing:

<App totalClicks={count} />

Just make sure the name matches in the child:

function App({ totalClicks }) {
  return <h2>{totalClicks}</h2>;
}

🔄 Arrays/Objects confusion – Built-in or User-Defined?
Absolute 🔥 of a question:

“Why do we call arrays/objects user-defined if we didn’t define how they work?”

Here’s the truth:

Object and Array types are built-in to JavaScript ✅

But when you create a structure with them, like:

const person = { name: "Aman", age: 22 };
const colors = ["red", "green"];

That structure is user-defined — you decide the keys, values, and layout. You didn’t create the engine, but you decided what’s inside it.

🧠 Built-in container, user-defined content.

Primitive types
These are the basic building blocks — they are predefined and immutable (can't be changed directly).

String

Number

Boolean
These are called primitive because:

They hold single values.

They are not objects.

They are copied by value.

So yes, they are predefined by the language.

💡 TL;DR:

Type	Predefined	User-defined	Stored As
Primitive	✅ Yes	❌ No	By value
Non-primitive	✅ (base) + ✅ you define shape	✅ Yes	By reference

🧩 Topics I Crushed Today:

JSX attribute syntax
React re-render logic ⚛️
StrictMode behavior 👀
JavaScript return rules 🧠
Prop naming and passing 📨

If you're learning React — bookmark this, share it, and remember:

Even your "smallest doubts" are super valid — clear them early and loud! 🙌

Let me know if you want this as a tweet thread, blog intro, or carousel — we can style it however you like! 🎨

Computer Networks-2

yashi srivastava — Mon, 07 Apr 2025 06:56:09 +0000

Transport Layer – End-to-End Delivery

The transport layer ensures end-to-end delivery of data. When a client sends data to another client or requests data from a server, the data is transmitted in the form of packets, which contain two IP addresses:

Sender's IP address
Receiver's IP address

Now, imagine a scenario where a user has multiple tabs open (Google, YouTube, LinkedIn, etc.). When data is received, how does the system know which tab requested it and where to deliver it?

This is determined by the port number, as each tab operates on a unique port. When data is delivered, it comes with a destination port number, ensuring that it reaches the correct application. The port number is 16-bit, meaning there are 2¹⁶ (65,536) possible ports. This is why we say that the transport layer provides port-to-port delivery.

For example, if you are requesting data from YouTube over HTTPS, then the request uses port 443 (which is the default port for HTTPS). When the packet is sent, it includes:

Sender’s IP address
Sender’s port number (tab’s port)
Receiver’s IP address
Receiver’s port number (443 for HTTPS in this case)

When the data reaches the server, it looks at the port number and routes the request accordingly (e.g., to the HTTPS service). The server then sends the response back with these same four details to ensure correct delivery.

Data Flow Through Layers

Application Layer: Data is created.
Transport Layer: Adds port numbers → Now called a segment.
Network Layer: Adds IP addresses → Now called a packet.
Data Link Layer: Adds MAC addresses → Now called a frame.
Physical Layer: Converts frames into bits for transmission.

TCP vs UDP

1. TCP (Transmission Control Protocol) – Reliable Communication

TCP is a connection-oriented protocol. Before sending data, it establishes a connection using a three-way handshake:

Client → Server: "Are you available?" (SYN)
Server → Client: "Yes, I am available!" (SYN-ACK)
Client → Server: "Okay, I am sending data now." (ACK)

Once the connection is established, TCP ensures reliable delivery by keeping track of packets. If a packet is lost, the receiver requests it again.

For example, if 100MB of data is divided into 20 segments, but only 18 arrive, the receiver will request the missing 2 packets before assembling the complete data. This makes TCP reliable for scenarios like emails, file downloads, and web browsing.

2. UDP (User Datagram Protocol) – Faster, but Unreliable

UDP is connectionless, meaning it does not establish a connection before sending data. It simply starts transmitting packets without checking whether they reach the destination.

Since UDP does not retransmit lost packets, it is faster than TCP and is used for real-time applications like:

Live streaming
Online gaming
Video conferencing

In these cases, speed is more important than accuracy. If a few packets are lost during a video call, you might notice a slight glitch, but the conversation continues without delays.

Network Address Translation (NAT) and Private/Public IPs

In a LAN (Local Area Network), each device has a private IP address, but they all share a common public IP address assigned by the router when connecting to the internet.

Why do we need NAT?

When multiple devices in a LAN request data from an external server, the router replaces the private IP address of the sender with the public IP before forwarding the request. However, when the response comes back, the router needs to determine which device in the LAN requested the data.

This is where NAT (Network Address Translation) helps:

When a request goes out, NAT assigns a unique port number to each request.
The router stores a table mapping these unique port numbers to the original private IP addresses.
When the response comes back, NAT checks the port number and forwards the data to the correct private IP.

Example

Device A (192.168.1.10) → Requests data from example.com
- NAT assigns Port 5001
- Sends request: (Public IP, Port 5001) → example.com
Device B (192.168.1.20) → Requests data from example.com
- NAT assigns Port 5002
- Sends request: (Public IP, Port 5002) → example.com

When the server responds, the router looks at the port number and forwards the response to the correct device.

Why Not Use MAC Addresses?

MAC addresses change when data moves across different networks. While MAC addresses work within a local network, they cannot be used for routing data over the internet because routers do not forward MAC addresses beyond a local network. That’s why IP addresses are used for identifying devices across different networks.

Session Layer – Authentication & Authorization

The session layer manages user sessions, authentication, and authorization.

Authentication: Verifies who you are (e.g., logging into Instagram with a username and password).
Authorization: Determines what you can do (e.g., you can view your bank balance, but you cannot modify it unless you have special permissions).

It also handles session checkpoints, which allow downloads to resume from where they stopped instead of restarting from the beginning. Session hijacking can occur if an attacker steals your session ID (from cookies).

Presentation Layer – Data Formatting & Security

The presentation layer ensures data is formatted correctly for different systems.

Encryption/Decryption: Secures communication (e.g., SSL/TLS encrypt HTTPS traffic).
Data Compression: Reduces file sizes for faster transfer.
Data Translation: Converts formats like ASCII to UTF-8 if two systems use different encoding.

Application Layer – User Interaction

The application layer provides network services directly to users.

Common Protocols

HTTP (HyperText Transfer Protocol): Transfers web pages.
HTTPS (Secure HTTP): Encrypted web browsing.
SMTP (Simple Mail Transfer Protocol): Sends emails.
FTP (File Transfer Protocol): Transfers files.

Network Transparency

When users browse the internet, they only see the UI (User Interface) of applications. They do not need to understand the underlying network mechanisms handling requests, data transfer, and delivery.

Computer Network

yashi srivastava — Fri, 04 Apr 2025 08:59:01 +0000

MAC Address (Media Access Control Address)

A MAC address, also known as a physical address, is a unique identifier assigned to a Network Interface Card (NIC). It cannot be changed and is present in all internet-capable devices like computers, phones, printers, Wi-Fi routers, USB ports, and Bluetooth modules.

Each device may have multiple NICs (e.g., Wi-Fi, USB, Bluetooth), meaning it can have multiple MAC addresses.

Structure of a MAC Address

A MAC address has a fixed format of 48 bits (6 bytes), divided into six portions of 8 bits each. It is represented in hexadecimal (base 16):

00:00:00:00:00:00  →  FF:FF:FF:FF:FF:FF

There are 2^48 possible MAC addresses.

MAC Address Distribution

MAC addresses are systematically assigned:

First 24 bits → Assigned to organizations (e.g., Google, Facebook).
Last 24 bits → Assigned by the organization to its products.

For example, Google receives a block of 2^24 MAC addresses and assigns them to its devices.

Data Link Layer (DLL)

The Data Link Layer (DLL) ensures hop-to-hop delivery using MAC addresses.

How Devices Identify Each Other in a LAN

A router assigns private IP addresses to each device in a Local Area Network (LAN).
All devices share the same public IP for external communication.
When Device A wants to send data to Device B, it first needs B’s MAC address.
The Address Resolution Protocol (ARP) is used:
- Device A broadcasts: "Who has this IP address? Send me your MAC address."
- Device B responds with its MAC address.
- Device A sends the data to B.

Why Use MAC Addresses When We Have IP Addresses?

✔ IP addresses can change, but MAC addresses remain fixed.

✔ MAC addresses work at Layer 2 (Data Link Layer), while IP addresses work at Layer 3 (Network Layer).

✔ Within a LAN, data must be delivered to the exact device, requiring MAC addresses.

✔ When sending data outside the LAN, the IP stays the same, but the MAC address changes at each router.

💡 Think of it like parcel delivery:

IP address = Destination city
MAC address = Delivery truck (changes at each stop)

MAC Addresses in Crime Investigation

Since IP addresses can change, but MAC addresses remain fixed, law enforcement can trace devices involved in cybercrimes—even if the IP is altered.

Functions of the Data Link Layer (DLL)

1. Framing

📌 The Network Layer sends data with source & destination IPs.

📌 The DLL adds source & destination MAC addresses, creating a frame.

📌 The receiver detects the data using a specific bit pattern:

It starts with 7-bit synchronization bits (101010...1010).
When it sees 11, it knows real data is coming.

2. Error Detection & Handling

✔ The DLL detects errors (e.g., signal corruption) and prevents faulty data from being forwarded.

3. Flow Control

Problem: A sender may send more data than a router can handle, leading to packet loss.

If a router can handle only 100 packets at a time, sending 1,000 packets at once will result in data loss. 🚨

Solution? ✅ Break it into 10 chunks of 100 packets to ensure smooth delivery! 📦📦📦.

The router then signals: "Send more data, I’m ready."

💡 Real-world example: If you have 100MB storage, but send 500MB, it won’t fit. Instead, send it in chunks.

4. Access Control

Problem: In a bus topology, multiple devices share a network wire. If two devices send data at the same time, collisions occur.

Solution: The DLL ensures only one device sends data at a time, preventing corruption & congestion.

Network Layer (NL)

1. Packet Routing

✔ The Network Layer decides the best path for data.

✔ Routers guide packets from one router to another until they reach their destination.

2. Fragmentation & Reassembly

Problem: Some routers cannot handle large packets.

Example: A 5MB packet arrives at a router that can only handle 2.5MB.

Solution:

The Network Layer splits data into smaller fragments before sending it.
At the destination, fragments are reassembled into the original data.

3. Congestion Control

Problem: Too many devices send data at once, slowing down the network.

Solution: The Network Layer:

✔ Limits the number of packets sent to avoid congestion.

✔ Manages bandwidth (controls data transfer speed).

Conclusion

✔ MAC addresses are fixed, while IP addresses can change.

✔ The Data Link Layer ensures error handling, access control, & framing.

✔ The Network Layer handles routing, fragmentation, & congestion control.

React useState Hook

yashi srivastava — Thu, 03 Apr 2025 20:45:06 +0000

In React, to create a UI with two buttons (Increment and Decrement), we use the onClick event instead of addEventListener in JavaScript. The function can be defined separately or directly inside {} in JSX.

Why Doesn't UI Update Initially?
When clicking the buttons, console.log(count) shows the value changing, but the UI does not update. In vanilla JavaScript, we manually manipulate the DOM to reflect the changes. While we can do the same in React by selecting tags and updating them, React handles DOM manipulation internally, keeping our code clean.

Why Clean Code Matters?
Direct DOM manipulation results in repeated code, especially when updating the same variable across multiple elements.

React simplifies this by introducing hooks, which are just functions.

The most commonly used hook is useState.

Understanding useState
When a variable's value changes, we say its state is changing. The useState hook helps manage state in React.
const [count, setCount] = useState(0);

useState(0) returns an array with two values:

count → initialized with 0.

setCount → a function to update count.

Why a function? Instead of direct manipulation, React says:
"Call my function (setCount(newValue)) whenever you update the variable, and I’ll handle UI updates automatically."

How does React update the UI?

When setCount(count) is called, React rerenders the component.

Any JSX that uses count will automatically show the updated value.

This prevents repetitive code for updating the UI.

Understanding Sorting in JavaScript

let arr = [10, 2, 5, 1];  
arr.sort((a, b) => a - b);  
console.log(arr); // Output: [1, 2, 5, 10]

If a - b is negative, a comes first.

If positive, b comes first.

The useState Twist 🚀
React prevents unnecessary re-renders to optimize performance. Example:

const arr = [8, 5, 9, 7, 4];  
const [temp, setArr] = useState(arr);

temp stores the array and is displayed in the UI.

Suppose we sort it and update state:

temp.sort((a, b) => a - b); setArr(temp);

Issue: UI doesn’t update.

Why?

JavaScript stores primitive values in the stack, but arrays & objects are stored in the heap.

The stack only holds a reference (address) to the heap’s array.

After sorting, the same reference remains, so React sees no change and doesn’t rerender.

Solution? Clone the array!
setArr([...temp]); // Creates a new array with a different address.

Now, React detects the state change and updates the UI.

filter() in JavaScript
Returns a new array based on a condition.

React’s power lies in efficient rendering, avoiding unnecessary DOM updates and keeping performance optimized.

Today's Learning Update: Backend Basics

yashi srivastava — Wed, 02 Apr 2025 22:11:30 +0000

Storing Images in a Database

We don’t store the actual image in the database; instead, we store its link while the image is hosted elsewhere.

Understanding Collections, Schemas & Databases

Collection → Similar to a table in SQL.

Schema → Defines the fields stored in a collection (e.g., id, name, email).

Database (DB) → A container for all collections.

HTTP Methods & Postman

POST → Sends data to the database (used for creating records).

GET → Fetches data from the database.

Postman → A tool to send requests to the backend and check responses.

Backend Function Calls

When we send a POST/GET request from Postman, it's like calling a function.

These functions must be defined in our backend (JS file).

The JS file acts as a medium that queries the database to store or retrieve data.

Postman is like a frontend where we send and request data.

Destructuring & Spread Operator in JavaScript
Destructuring
const obj = { name: "John Doe", email: "john@example.com" }; const { name, email } = obj; console.log(name); // John Doe console.log(email); // john@example.com
Makes it easier to access object properties directly.
Spread Operator (...)
const arr1 = [1, 2, 3, 4]; const arr2 = [5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
Combines multiple arrays/objects into one.

User Registration & Validations
Validations ensure that only correct data enters the database (e.g., email format, age limit).

When updating an entry, we need to explicitly enable validation:
runValidators: true

Timestamps (createdAt, updatedAt)

Track when a user registered and when they last updated their profile.

Platforms like Instagram use this to filter users based on registration date (e.g., last 7 days, 1 month).

Immutable Fields

Some fields cannot be changed after creation (e.g., emailID).

Must be enforced at the schema level.

API-Level Validation
API acts as a middleware between Postman (client) and the database (server).

API validation checks user data before sending it to the database to:

Avoid unnecessary DB calls (reducing cost & improving performance).

Enhance user experience by preventing delays.

My Learning(what is component in react)?

yashi srivastava — Tue, 01 Apr 2025 13:20:05 +0000

I was making a React project—a Myntra clone—so I learned about React components from that.

I created the Header, Body, and Footer components and rendered all of them inside the App component.

Currently, all these components are in a single file named App.js, making the code complex to read and understand.

What I learned: When working in a company, we do not write all code in one file. It is not a good practice. That’s why the concept of modules was introduced.

What is a module? A module is something that you will use repeatedly.

It is just like a function that should be kept in a separate JavaScript file.

This is what we call a component in React.

- What is a component?
In React, a component is simply a function written in a separate file, which is then exported and imported as needed.

For example, create a components folder and move all component files (e.g., Header.js, Footer.js, etc.) into it.

You can name your files as you like, but it is advisable to name them the same as the function name for better readability.

- Exporting Components
There are two ways to export a function in React:

Write export default functionName at the end of the file.

Write export default before defining the function.

export default function Header() { ... }

-** File Extensions**
You can use either .js or .jsx extensions while creating files in React.

It is advisable to use .jsx if you are writing JSX in your code.

Handling Dummy Data Any dummy data (data you are fetching for UI development) should be kept inside a folder named utils.

-** Important Rules I Learned**
Variable Export Rule:

In JavaScript, you cannot write export default before variable declarations like let, const, or var.

Incorrect:export default const arr = [1, 2, 3];
Correct:const arr = [1, 2, 3];
export default arr;

Only One Default Export per File:

A file can have only one export default.

If you need to export multiple items (functions, arrays, objects), use named exports instead.

Example of named export:
export { Header, Footer, arr1, arr2 };

Corresponding import:import { Header, Footer, arr1, arr2 }
If you use export default, you can import it without curly braces
If you use export (without default), you must use curly braces when importing.
You can also rename an imported component using as

Why Use React? React gives developers control over the UI while handling DOM manipulation efficiently. This is why we use ReactDOM.createRoot(), as React takes care of updating the DOM optimally.

2D Arrays

yashi srivastava — Mon, 31 Mar 2025 20:57:15 +0000

Today, I solved the Rotate Image by 90° Clockwise problem. Initially, I attempted to solve it using extra space, but then I tried to optimize it without using additional space. Although I couldn't fully optimize it without space yet, it was a valuable learning experience.

Before this, I had learned about row-major and column-major ordering and how data is stored. While databases typically use column-major order, the actual in-memory storage of a matrix is in a linear form, not organized in row-major or column-major order. This means the matrix is stored as a contiguous block of memory, and we can calculate the corresponding index for an element using its position in this linearized structure.

I also practiced matrix transposition:

First, I transposed the matrix using extra space.

Then, I learned how to transpose a matrix without extra space by swapping elements in place.

Additionally, I learned how to reverse rows in a matrix without using extra space. This was a great exercise in optimizing space complexity while performing matrix manipulations.

Happy coding! 🚀_