Scenario Based Questions

Definition

Questions that present a real-world problem and ask you to design a React solution from scratch.

Explain Like I'm New

The interviewer will say: 'Design an autocomplete search bar'. They want to see how you handle state, debouncing, API calls, race conditions, and accessibility.

Real World Example

Designing a shopping cart, building a modal system, or implementing infinite scroll.

Common Use Cases

•System Design Interviews

Terminal Output

bash / terminal

// System design requires thinking through the whole stack: // 1. Where does the state live? // 2. What are the edge cases? // 3. How do we make it accessible? // 4. How do we test it?

Interview Questions

basic

How would you build a global notification/toast system?

intermediate

How would you handle a form with 100+ inputs without performance issues?

advanced

How would you design a 'Dark Mode' toggle that doesn't flash bright white on initial page load?

Flash Cards

Question

How to handle a 100+ input form?

Click to reveal answer

Answer

Do not use Controlled Components (useState) for every input, as it will cause the entire form to re-render on every keystroke. Use Uncontrolled Components with `useRef`, or use a library like React Hook Form which handles this internally.

Question

How to prevent Dark Mode flash?

Click to reveal answer

Answer

The flash happens because React hasn't hydrated yet to read the `localStorage` theme. You must inject a blocking `<script>` tag in the `<head>` of your HTML document that reads localStorage and applies a `.dark` class to the `<body>` BEFORE React even loads.