What is the primary purpose of using techniques like debouncing and throttling in web development?
They allow us to skip function executions if a function is called too many times over a certain time period.
In the context of a search input, what does debouncing an onChange handler achieve?
It waits until the user stops typing for a specified interval and then sends a single request with the final value.
What is the key difference in behavior between throttle and debounce?
throttle guarantees function execution at regular intervals, while debounce resets its wait timer on every call.
For an auto-save feature in a text editor, which technique is generally safer: debounce or throttle?
throttle is safer because it saves the work periodically, minimizing data loss if an issue occurs.
In React, if you simply wrap an event handler in debounce inside a component with state, why does it fail to work as expected?
State changes cause re-renders, which re-create the debounced function and its internal timer on every keystroke.
When a debounced function is re-created on every render, its behavior changes from debouncing to what?
It behaves like a simple delay function, as each call has its own separate timer.
What is a simple way to make a debounced function work correctly in React, provided it has no dependencies on component state or props?
Move the creation of the debounced function outside of the component body so it is only created once.
To prevent a debounced function from being recreated on every render inside a component, you can wrap its creation in the _____ hook.
useMemo
If a debounced callback needs to access component state, why does simply adding the state variable to useCallback’s dependency array break the debounce?
The callback is recreated whenever the state changes, which in turn causes the useMemo for the debounce call to run again, resetting the timer.
What is the ‘stale closure’ problem when using a naive useRef to store a debounced function in React?
The function stored in the ref is created only on the initial render, so it captures the initial state and props and never sees updated values.
Why is re-creating the debounced function in useEffect on every state change not a valid solution?
It’s no different than re-creating it on render; the internal timer is constantly reset, turning the debounce into a delay.
A potential solution for debouncing involves calling ref.current.cancel() in a useEffect cleanup function. What is the main drawback of this approach?
It does not work for throttling, as the throttled function would be cancelled before it ever had a chance to fire.
To escape the stale closure trap for debouncing, a ref is used to hold the latest version of the _____, which is updated in useEffect.
callback function
In the advanced ref-based debounce pattern, what is the role of the useEffect hook?
It updates ref.current to point to the latest version of the callback function whenever its dependencies (like state) change.
In the advanced ref-based debounce pattern, a stable debounced function is created using useMemo with what dependency array?
An empty dependency array ([]) to ensure the function is created only once on mount.
How does the stable debounced function created with useMemo access the latest state, solving the stale closure problem?
It calls ref.current(), which points to the most up-to-date callback function that has access to the latest state.
What is the primary benefit of abstracting the complex ref-based debouncing logic into a custom useDebounce hook?
It allows for clean, reusable code in components without worrying about implementation details like closures, refs, or memoization chains.
In a controlled input component, why must setValue be called immediately in the onChange handler, rather than inside the debounced function?
If setValue is debounced, the state won’t update on time, and the user’s input will not be reflected in the UI.
A useDebounce custom hook typically accepts a _____ as its argument and returns a memoized, debounced version of it.
callback function
Why are Refs a good tool for storing timer IDs from functions like setInterval or debounce?
Because Refs persist across re-renders without causing them, they can hold mutable values like timer IDs reliably.
-
9. React Refs31
-
10. Closure in React27
-
8. React Context and Performance27
-
6. React Reconciliation35
-
1. Intro to re-renders27
-
3. Configuration concerns with elements24
-
2. Elements, children as props, and re-renders28
-
5. Memoization with useMemo, useCallback and React.memo36
-
7. Higher-order components in modern React24
-
4. Adv config with render props24
-
11. Implementing adv debouncing and throttling with Refs20
-
Interview prep11
