Phone Screen & Verbal Screening

These questions are designed to be answered verbally without writing code, but understanding the code behind them is crucial. This stage filters candidates before the technical deep dive.

1. General Web Knowledge

Q: What happens when you type a URL into the browser and hit enter?
DNS, IP, Handshake, HTML.
Concept Visualization 
1. DNS Lookup: google.com -> 142.250.190.46
2. TCP Handshake (SYN, SYN-ACK, ACK)
3. HTTP Request (GET /)
4. Server Response (200 OK, HTML)
5. Browser Parsing (DOM Tree, CSSOM)
6. Rendering (Layout, Paint)
Show Verbal Answer

First, the browser checks the cache. If missing, it asks the DNS server for the IP address. It establishes a TCP connection (3-way handshake) with the server. It sends an HTTP GET request. The server responds with HTML. The browser parses the HTML to build the DOM, fetches CSS/JS, builds the Render Tree, calculates layout, and paints pixels to the screen.

Q: Explain the difference between `localStorage`, `sessionStorage`, and `cookies`.
Persistence and Scope.
Basic Usage 
// LocalStorage (Persists forever)
localStorage.setItem('user', 'Emilio');

// SessionStorage (Persists for tab session)
sessionStorage.setItem('tempId', '123');

// Cookies (Sent with requests)
document.cookie = "token=abc; Secure; HttpOnly";
Show Verbal Answer

localStorage: Stores data with no expiration date. Persists even if the browser is closed.
sessionStorage: Stores data for one session. Data is lost when the tab is closed.
Cookies: Small data sent with every HTTP request to the server. Used for authentication/sessions.

2. JavaScript & React Verbal Checks

Q: What is the Event Loop?
Call Stack, Callback Queue.
Concept 
console.log('Start'); // 1. Call Stack
setTimeout(() => {
  console.log('Timeout'); // 3. Callback Queue -> Stack
}, 0);
console.log('End'); // 2. Call Stack

// Output: Start, End, Timeout
Show Verbal Answer

JS is single-threaded. The Event Loop monitors the Call Stack and the Callback Queue. If the Call Stack is empty, it takes the first event from the Queue and pushes it to the Stack. This allows non-blocking async behavior (like setTimeout or fetch) despite having only one thread.

Q: Why can't you update React state directly (e.g., `this.state.count = 5`)?
Immutability and Re-rendering.
Bad vs Good 
// BAD
state.count = 5; // React doesn't know it changed

// GOOD
setState({ count: 5 }); // Triggers reconciliation
Show Verbal Answer

React needs to know when data changes to trigger a re-render and update the DOM. Direct mutation doesn't notify React's reconciliation engine. Using the setter (setState or useState's set function) ensures the component lifecycle runs correctly.