1Core Internals & Reconciliation
How does the React Fiber reconciler differ from the old Stack reconciler?
Fiber allows React to break rendering work into small units and spread it over multiple frames. It enables pausing, resuming, and prioritizing work, which prevents UI blocking during heavy updates.
Explain the difference between Shadow DOM and Virtual DOM.
Shadow DOM is a browser technology for scoping variables and CSS in web components. Virtual DOM is a concept used by React to mirror the real DOM in memory, enabling efficient 'diffing' and reconciliation.
What is 'Concurrent Mode' in React 18?
A set of features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. It includes features like 'startTransition' and 'useDeferredValue'.
2Modern React Hooks
What is the primary purpose of the 'useMemo' hook?
It memoizes the result of a calculation between re-renders. It's used to optimize performance by avoiding expensive computations unless their dependencies change.
Explain the 'Exhaustive Deps' lint rule and why it's critical.
It ensures that all variables from the component scope used inside an effect are included in the dependency array. Skipping them leads to 'stale closures' where the effect uses old values.
When should you use 'useLayoutEffect' instead of 'useEffect'?
Use it when you need to perform DOM measurements or mutations before the browser paints. It runs synchronously after all DOM mutations but before the user sees the changes.
3Server Components & Architecture
What are React Server Components (RSC) and their main benefit?
Components that render only on the server. They never ship their code to the client, significantly reducing bundle size while keeping data fetching close to the source.
Define 'Streaming Hydration' in the context of Next.js.
It allows parts of the page to be sent to the browser and become interactive while others are still being generated or fetched on the server.
Certification of Knowledge
At Kodivio, we believe in free, open sharing of high-quality technical content. Spread the word and help more developers master modern React.