I knew the event loop stuff but fumbled a bit explaining why JS is single-threaded by design versus just a limitation.
Start by confirming JavaScript's single-threaded nature, then explain the event loop and how it enables concurrency via asynchronous callbacks. Use a concrete example to illustrate how the call stack, task queue, and microtask queue interact.
Pro tip: Emphasize that concurrency in JavaScript is about interleaving tasks, not parallelism, and mention how this affects performance and design decisions. This shows you understand the trade-offs and can apply the model to real-world systems.
State that JavaScript runs on a single thread with one call stack, meaning only one piece of code executes at a time.
Explain that the event loop continuously checks the call stack and moves tasks from queues to the stack when it's empty, enabling non-blocking behavior.
Differentiate between macrotasks (e.g., setTimeout, I/O) and microtasks (e.g., Promises), and explain their priority and execution order.
Walk through a simple code snippet showing how synchronous code, setTimeout, and a Promise callback execute in order.
Discuss how this model handles concurrency without parallelism, and mention implications like avoiding blocking the event loop and using Web Workers for CPU-intensive tasks.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Easier than I expected but I almost over-complicated it.
Start by defining both hooks and their core purposes: useState for managing state that triggers re-renders, and useRef for holding mutable values that persist across renders without causing re-renders. Then, contrast their behaviors and provide concrete scenarios where each is appropriate, emphasizing the trade-offs in performance and reactivity.
Pro tip: Mention that useRef is often used for accessing DOM elements or storing previous values, but avoid overusing it for state that should trigger UI updates—this shows you understand React's rendering model deeply.
Explain that useState is a hook for declaring state variables in functional components. When the state updates, React re-renders the component to reflect the new state.
Explain that useRef returns a mutable ref object whose .current property can hold any value. Mutating it does not trigger a re-render, making it useful for storing values that don't affect the UI.
Highlight the key difference: useState updates cause re-renders, while useRef updates do not. This affects performance and when to use each.
Give examples: useState for form inputs, toggles, or any data that should update the UI; useRef for accessing DOM nodes, storing timer IDs, or keeping previous values without re-rendering.
Emphasize that choosing the wrong hook can lead to unnecessary re-renders or stale UI. Recommend using useState for reactive data and useRef for non-reactive, persistent values.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.