I learned today: Props drilling, UseContext (in Hooks) & discuss about yesterday's interview questions...

Props Drilling:

Props Drilling refers to the process of passing data from a parent component to deeply nested child components by passing it through intermediate components that don't actually need the data, but just pass it down.

Example:

import React from "react";

// Parent component that holds the message and passes it down
function Parent() {
    const message = "Hello from Parent";
    return (
        <div>
            <Child message={message} />
        </div>
    );
}

function Child({ message }) {
    return (
        <div>
            <Grandchild message={message} />
        </div>
    );
}

function Grandchild({ message }) {
    return (
        <div>
            <p>Message: {message}</p>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Parent />
        </div>
    );
}

Here, the user prop is passed from App → Parent → Child → GrandChild, even though only GrandChild uses it.

Output:

Message: Hello from Parent

React Context API:

How to Avoid Prop Drilling Problem?

## Interview Question and Answers:

1.How to Optimize Webpage for Performance?

A website must load fast and smoothly for a good user experience.
To optimize performance, we can compress images (like WebP), minify JS/CSS/HTML, and use lazy loading for images and videos. We can also use a CDN to serve content faster and enable browser caching.

Example: Lazy Loading Image

<img src="image.webp" loading="lazy" alt="Sample Image">

2.How to Handle CORS in JavaScript?

CORS (Cross-Origin Resource Sharing) is a browser rule that blocks access to resources from a different origin (domain) unless the server allows it. If the server allows it, it sends this header:

Access-Control-Allow-Origin:

Example Using fetch:

fetch('https://api.example.com/data', { mode: 'cors' })
  .then(res => res.json())
  .then(data => console.log(data));

3.What is a closure? How does it work?

A closure is a function that remembers variables from its outer scope even after the outer function has returned.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 1
counter(); // 2

4.Explain positions: relative, absolute, fixed?

relative: Positions element relative to its normal position.
absolute: Positions relative to nearest positioned (non-static)ancestor.
fixed: Stays fixed to the viewport, doesn't scroll.

5.What is a media query and how does it work?

Media queries apply styles based on screen/device width, height, etc.

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

6.What is SPA?

SPA = Single Page Application.
Loads a single HTML file and dynamically updates content using JavaScript (React, Angular, Vue).

7.Client-side vs Server-side rendering?

Client-side: Rendering happens in the browser (e.g., React).
Server-side: Server generates HTML before sending it to the browser (e.g., Next.js SSR).

8.Explain about npm and yarn?

npm: Node Package Manager (comes with Node.js).
yarn: Facebook’s package manager, faster and more secure dependency resolution.
Both manage JS packages (npm install, yarn add).

9.Version management and collaboration using Git?

Use git init, git clone, git add, git commit, git push.
Branching (git branch feature-1) for separate tasks.
Pull requests for code reviews.
Version tags (git tag v1.0.0).

10.Build Tools: Webpack and Vite?

Build tools bundle JS, CSS into fewer files to load faster.
Webpack is older, heavy but powerful; Vite is faster with modern features.

Vite Example:

npm create vite@latest

11.Difference Between Development and Production?

Development: Unminified code, full error logs, easy debugging.
Production: Minified, optimized, fast loading, errors hidden from users.

Example:

npm run dev   # Development Mode
npm run build # Production Mode

12.How to Debug Frontend Applications?

Debugging finds and fixes errors.
You can use console.log(), browser DevTools (Elements, Network, Sources), and breakpoints to check code flow.

Example:

console.log("Debugging here");

13.Difference between ID and Class in HTML?

id: Unique, used once per page.
class: Can be reused across multiple elements.

<div id="main"></div>
<div class="box"></div>

14.How to use Box Model in CSS?

Box model = content + padding + border + margin.

div {
  width: 100px;
  padding: 10px;
  border: 1px solid;
  margin: 20px;
}

15.Arrow function vs Traditional function?

Arrow functions don’t have their own this, can’t be used as constructors.

const add = (a, b) => a + b;
function addOld(a, b) {
  return a + b;
}

16.Explain em, rem, px in HTML?

px: Fixed pixel size.
em: Relative to parent’s font size.
rem: Relative to root font size.

17.What are Template Literals in JavaScript?

Template literals (introduced in ES6) are a way to create strings using backticks (`) instead of quotes (' or ").

Example:


const name = "Priya";
const greeting =Hello, ${name}!;
console.log(greeting); // Output: Hello, Priya!


18.Explain var, let, const in JS?

var: Function-scoped, can be redeclared.
let: Block-scoped, can be reassigned.
const: Block-scoped, cannot be reassigned.

19.Synchronous vs Asynchronous?

Synchronous: Tasks run one after another.
Asynchronous: Tasks can run independently (e.g., setTimeout, fetch, promises).

20.How does the event loop work in JavaScript?

JS is single-threaded.
Event loop handles async tasks by moving them from the task queue to the call stack when it's free.
Helps in non-blocking code execution.