FEE Prep Sheet
React.memo vs useMemo vs useCallback
| Feature | React.memo | useMemo
| useCallback |
|----------------|----------------------------------------------|---------------------------------
-----------------|--------------------------------------------------|
| What it is | HOC (Higher Order Component) | React Hook
| React Hook |
| Used for | Preventing unnecessary re-renders of components | Memoizing computed values
| Memoizing callback functions |
| Returns | A memoized version of the component | A memoized value
| A memoized version of a function |
| When to use | When a component renders the same output for the same props | When value
computation is expensive and should not re-run | When a function is passed as a prop and shouldn't
re-create |
| Common mistake | Wrapping all components blindly | Using it for simple calculations
(overkill) | Using without considering dependencies carefully |
| Example | React.memo(MyComponent) | useMemo(() =>
computeExpensive(), [deps]) | useCallback(() => handleClick(), [deps]) |
Promise.all vs allSettled vs any vs race
| Method | Description | Resolves
When | Rejects When | Use Case
|
|------------------------|--------------------------------------------------------------|---------
------------------|--------------------------|----------------------------------------------------
-----|
| Promise.all | Waits for all to fulfill or rejects on any failure | All
resolve | Any reject | All results needed and fail-fast on error
|
| Promise.allSettled | Waits for all to settle (fulfill or reject) | After all
settle | Never | When results of all are needed regardless of success
|
| Promise.any | Resolves with the first fulfilled | First
success | All reject | When any success is sufficient
|
| Promise.race | Resolves/rejects with the first settled promise | First to
settle | First to settle | When fastest result (success/failure) is preferred
|
Reconciliation vs Virtual DOM
| Concept | Virtual DOM | Reconciliation
|
|------------------|------------------------------------------------------|-----------------------
------------------------------------|
FEE Prep Sheet
| What it is | Lightweight JS object representation of real DOM | Process React uses to
update DOM based on changes |
| When it happens | On every render (new virtual DOM is created) | When comparing new vs
old virtual DOM |
| Purpose | Avoids direct DOM manipulation for performance | Finds minimal set of
DOM operations needed |
| Core technique | Tree diffing | Heuristic-based diffing
(e.g., keys) |
| Interview tip | Virtual DOM = representation, Reconciliation = diffing algorithm |
Web Worker vs setTimeout
| Feature | Web Worker | setTimeout /
setInterval |
|------------------|------------------------------------------------------|-----------------------
-----------------------------|
| Purpose | Run JS code in a separate thread | Delay code execution in
main thread |
| Threading | Background thread (non-blocking) | Single-threaded (blocks
if CPU-heavy) |
| Use case | Heavy tasks (e.g., parsing, calculations) | Timed/delayed tasks
(e.g., animation, polling) |
| Communication | Uses postMessage to talk to main thread | No inter-thread
communication |
| Limitations | No access to DOM | Not multi-threaded
|
