Set 3: Hard (Advanced Level)

1. What is reconciliation in React?
👉 Reconciliation is the process where React compares the new virtual DOM with the previous one and updates only the parts that have changed.

2. What are error boundaries and when would you use them?
👉 Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

3. What is React Fiber?
👉 React Fiber is the new reconciliation engine in React 16+ that improves rendering by making it incremental and interruptible.

4. What is Concurrent Mode in React?
👉 Concurrent Mode allows React to interrupt long-running tasks and prioritize updates, making apps more responsive.

5. What is the difference between controlled and uncontrolled inputs?
👉 Controlled inputs are managed by React state. Uncontrolled inputs are managed by the DOM itself, accessed via refs.

6. What happens if you update state inside useEffect without a dependency array?
👉 It will cause an infinite loop because the effect runs after every render, and updating state causes a re-render.

7. How does useMemo work?
👉 useMemo memoizes (caches) the result of a function based on dependencies to avoid expensive recalculations on every render.

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

8. What is the purpose of useCallback?
👉 useCallback memoizes functions to avoid re-creating them on every render, which helps when passing callbacks to child components.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

9. Why should keys in React lists be stable and unique?
👉 Stable and unique keys help React accurately match old and new elements, improving performance and preventing bugs.

10. What is code splitting in React?
👉 Code splitting is a technique where your bundle is split into smaller chunks that can be loaded on demand.

11. What is hydration in React?
👉 Hydration is when React takes a server-rendered HTML page and attaches event handlers to make it fully interactive.

12. How do you handle memory leaks in React apps?
👉 Clean up subscriptions and asynchronous tasks inside useEffect using a cleanup function.

useEffect(() => {
  const subscription = someAPI.subscribe();
  return () => subscription.unsubscribe();
}, []);

13. What is the difference between useEffect and useLayoutEffect practically?
👉 useEffect runs after painting, so it doesn’t block visual updates. useLayoutEffect runs before painting, blocking the screen update until it’s done — better for measuring layout and synchronizing with the DOM.

14. What is a render prop in React?
👉 A technique where a component accepts a function as a prop and uses it to know what to render.

<MyComponent render={data => <ChildComponent data={data} />} />

15. What are portals in React?
👉 Portals allow you to render a child component into a different part of the DOM, outside of its parent hierarchy.

ReactDOM.createPortal(child, document.getElementById('modal-root'))

16. How can you optimize a very large list rendering in React?
👉 Use windowing techniques with libraries like react-window or react-virtualized.

17. What is state batching in React?
👉 React groups multiple state updates into a single re-render to improve performance.

18. Why shouldn’t you update state directly in React?
👉 Direct mutation does not trigger re-renders. React needs you to use setState or hooks to know when to update the UI.

19. What is the use of useImperativeHandle hook?
👉 It customizes the instance value that is exposed to parent components when using ref.

20. Explain the lazy loading mechanism for images or components in React.
👉 Lazy loading delays loading a resource (like images or components) until it is needed, improving page speed and performance.

21. What are Suspense boundaries and how do they help in Concurrent Mode?
👉 Suspense boundaries allow you to pause rendering until a part of the app is ready, showing fallback content while waiting.

22. How is Redux different from Context API?
👉 Redux is a full-fledged state management library suitable for large apps with middleware, Context API is a simple way to share state globally without extra libraries.

23. How do you handle authentication (login/logout) in React apps?
👉 Common methods include token-based authentication (JWT) stored in cookies or localStorage, and protecting routes using private routes.

24. How do you make a component generic and reusable?
👉 By passing props (configuration) and using composition (children or render props).

25. What are compound components in React?
👉 Compound components are a design pattern where multiple components work together and share implicit state.

Example:

<Tabs>
  <Tabs.Tab>Tab 1</Tabs.Tab>
  <Tabs.Tab>Tab 2</Tabs.Tab>
</Tabs>