Quiz for Portals

Q1: What is the purpose of React Portals?

A. A. To render children into a DOM node outside the parent DOM hierarchy B. B. To style components dynamically C. C. To handle API requests D. D. To manage component state

Q2: How do you create a Portal in React?

A. A. Using ReactDOM.createPortal(children, container) B. B. Using React.createElement() C. C. Using useEffect hook D. D. Using Context API

Q3: What argument does ReactDOM.createPortal require?

A. A. The React child element and the DOM container element B. B. Only the React child element C. C. Only the DOM container element D. D. The component state and props

Q4: Can Portals be used to break out of CSS overflow:hidden?

A. A. Yes, Portals can render outside overflow boundaries B. B. No, Portals are limited by CSS rules C. C. Only with inline styles D. D. Only with Redux

Q5: Which scenario commonly uses Portals?

A. A. Modals, tooltips, and dropdowns B. B. Form validations C. C. API data fetching D. D. Routing

Q6: Do events propagate through React Portals?

A. A. Yes, events propagate up through the React tree B. B. No, events are blocked C. C. Only native DOM events propagate D. D. Events propagate only if stopPropagation is called

Q7: Which React version introduced Portals?

A. A. React 16 B. B. React 15 C. C. React 17 D. D. React 18

Q8: Are Portals limited to rendering inside the root DOM node?

A. A. No, they can render anywhere in the DOM B. B. Yes, only inside the root node C. C. Only inside body tag D. D. Only inside div tags

Q9: What is a key benefit of using Portals for modals?

A. A. They avoid z-index and stacking context issues B. B. They improve component state C. C. They simplify styling D. D. They speed up rendering

Q10: Can you use Portals in class components?

A. A. Yes, Portals can be used in class or functional components B. B. No, only in functional components C. C. Only with hooks D. D. Only with context

Q11: Do Portals impact React component hierarchy?

A. A. No, Portals keep the React component hierarchy intact B. B. Yes, they break the hierarchy C. C. Only for state management D. D. Only for event handling

Q12: How are refs handled with Portals?

A. A. Refs work normally with components rendered via Portals B. B. Refs do not work C. C. Only string refs work D. D. Only callback refs work

Q13: Can Portals be used to implement tooltips?

A. A. Yes, tooltips often use Portals to avoid clipping B. B. No, tooltips cannot use Portals C. C. Only with Redux D. D. Only inside forms

Q14: What does Portals help solve in terms of accessibility?

A. A. Allow better control over focus management B. B. Improve styling only C. C. Handle API calls D. D. State management

Q15: How do Portals affect React DevTools?

A. A. Components rendered via Portals appear in the React tree normally B. B. They are hidden from DevTools C. C. Only functional components show D. D. Only class components show

Q16: Which DOM API is primarily used behind Portals?

A. A. appendChild or insertBefore B. B. createElement C. C. querySelector D. D. removeChild

Q17: Can Portals be nested inside each other?

A. A. Yes, you can nest Portals B. B. No, nesting Portals is prohibited C. C. Only in functional components D. D. Only in class components

Q18: What is a common mistake when using Portals?

A. A. Forgetting to create the DOM container element B. B. Using inline styles C. C. Not using hooks D. D. Using Redux

Q19: Can Portals be used with server-side rendering?

A. A. Yes, but require special handling B. B. No, they only work client-side C. C. Only with React 18 D. D. Only with Next.js

Q20: Which React package exports createPortal?

A. A. react-dom B. B. react C. C. react-router D. D. redux