| Question |
Answer |
| What is focus trapping and where is it used? | Restricts keyboard focus within a UI (e.g. modal)—ensures accessible navigation and prevents users from tabbing out. |
| How do you handle responsive UI in React? | Use media queries with CSS, libraries like Tailwind, or tools like react-responsive. |
| How do you handle i18n (internationalization)? | Use react-i18next or similar libraries to localize text, formats, and layout direction. |
| What are accessible forms in React? | Include labels, error messaging, role attributes, and screen reader support—connect labels using htmlFor. |
| What is role of tabIndex in React? | Controls keyboard navigation order—positive values specify manual ordering, negative values remove elements from tab flow. |
| What is the difference between useImperativeHandle and useRef? | useImperativeHandle customizes the instance value exposed by useRef, useful for controlling child components. |
| How does React handle error boundaries? | Error boundaries catch JavaScript errors in child components during rendering, lifecycle methods, and constructors, preventing app crashes. |
| What is the difference between React.Fragment and ? | React.Fragment groups elements without adding extra DOM nodes, unlike . |
| How do you implement dynamic themes in React? | Use Context API or state management libraries to toggle themes, and CSS variables or styled-components for styling. |
| What is the difference between useEffect and useMemo? | useEffect handles side effects; useMemo memoizes values for performance optimization. |
| How do you optimize React apps for SEO? | Use server-side rendering (SSR) with frameworks like Next.js, and ensure semantic HTML and metadata are included. |
| What is the difference between useCallback and useMemo? | useCallback memoizes functions; useMemo memoizes values. Both prevent unnecessary re-computation. |
| How do you handle authentication in React? | Use libraries like Firebase, Auth0, or custom solutions with JWT tokens, session storage, and protected routes. |
| What are portals in React? | Portals render children into a DOM node outside the parent hierarchy, useful for modals and tooltips. |
| How do you handle race conditions in React? | Use AbortController for API calls, and ensure proper cleanup in useEffect to cancel ongoing tasks. |
