| Question |
Answer |
| React components must always be class-based. | FALSE |
| Hooks like useState and useEffect can only be used inside function components. | TRUE |
| The useRef hook causes a component to re-render when its value changes. | FALSE |
| React’s Suspense and lazy help optimize code splitting for better performance. | TRUE |
| The key prop in lists is optional and does not affect performance. | FALSE |
| What is the purpose of React's useTransition hook? | useTransition is used to manage state transitions and prioritize updates, allowing for smoother UI interactions. |
| How do you handle accessibility in React applications? | Use semantic HTML, ARIA attributes, and tools like react-aria or react-a11y to ensure accessibility. |
| What is the difference between useEffect and useLayoutEffect in terms of execution timing? | useEffect runs after the DOM has been painted, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. |
| How do you implement a custom hook in React? | Create a function that uses built-in hooks and encapsulates reusable logic, e.g., function useCustomHook() { ... }. |
| What is the purpose of React's useDeferredValue hook? | useDeferredValue defers updating a value until the UI is less busy, improving performance for high-priority updates. |
| How do you handle animations in React? | Use libraries like react-spring, framer-motion, or CSS transitions with className toggling. |
| What is the difference between state and props in React? | state is managed within a component and can change over time, while props are passed from parent to child and are immutable. |
| How do you handle errors in asynchronous React code? | Use try-catch blocks, error boundaries, or libraries like react-query to handle errors gracefully. |
| What is the purpose of React's useId hook? | useId generates unique IDs for accessibility attributes like aria-labelledby to avoid collisions in the DOM. |
| How do you optimize React applications for SEO? | Use server-side rendering (SSR) with frameworks like Next.js, and ensure proper meta tags and structured data are included. |
