Loading... Login Loading... Register

React Portals and Refs Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

How do you create a portal in a React application?

const modalRoot = document.getElementById('modal-root');

function Modal({ children }) {
  return ReactDOM.createPortal(
    children,
    modalRoot
  );
}

Select your answer

Use the 'Portal' component provided by React.

Use 'React.Fragment' to manage elements outside the DOM.

Use the 'createPortal' method from 'ReactDOM' to render elements outside the parent hierarchy.

Use 'React.createElement' to specify a different DOM node.

Question 2/15

Should refs be used to expose component functions as a public API?

Select your answer

No, using context is better for exposing public APIs.

No, refs should only manage DOM nodes and not functions.

Yes, but only in class components.

Yes, refs are the best way to expose public API functions safely.

Question 3/15

What is required for a child functional component to handle a forwarded ref?

Select your answer

The parent must clone the element using React.cloneElement.

The child must return null at render.

The child component must use forwardRef.

The child component must be wrapped in a class.

Question 4/15

What is the main difference between React.createRef and React.useRef?

Select your answer

React.createRef is immutable, while React.useRef allows changes over rerenders.

Both are equivalent, but only differ in naming.

React.useRef must be used outside the component, while React.createRef should be used inside the component.

React.createRef can only be used in class components, while React.useRef can be used in both functional and class components.

Question 5/15

How does React handle cleanup for refs during unmounting of the component?

Select your answer

No cleanup is necessary as refs are automatically garbage collected after unmount.

Refs cleanup is handled within the useRef hook.

Refs are automatically reset to null during unmount.

Refs must be manually cleaned up using componentWillUnmount.

Question 6/15

What is a common limitation of React portals?

Select your answer

They cannot render primitive values like strings or numbers.

They cannot contain stateful components.

Portals do not support re-rendering.

Event bubbling works differently, i.e., events will bubble up to ancestors of the parent component.

Question 7/15

Can a React component be mounted into multiple portals simultaneously?

Select your answer

Yes, React supports multiple portal mounts.

No, components can only be mounted into one portal at a time.

Only if portals are synchronized.

Yes, but it requires event delegation.

Question 8/15

What is a primary use case of React portals?

Select your answer

To allow components to communicate with each other via context.

To create components that do not re-render when their state changes.

To allow components to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

To make state management more efficient in large applications.

Question 9/15

Why might you use the useImperativeHandle hook with forwardRef?

Select your answer

To initialize ref values to null before render.

To transfer state management between components.

To ensure the ref cannot be mutated by the parent.

To modify the instance value that is exposed for parent components to control via refs.

Question 10/15

How do portals handle propagation of parent CSS styles?

Select your answer

Portals copy styles only at the time of creation.

Portals are styled independently and don't inherit parent styles automatically.

Styles need to be passed using the 'style' prop.

Portals automatically adopt parent CSS styles via direct styling.

Question 11/15

What is a scenario where using refs is preferred over component state?

Select your answer

Controlling component lifecycle transitions.

Passing data between sibling components.

Managing form input values for rendering.

Accessing and modifying a DOM element, e.g., for animations.

Question 12/15

When using useImperativeHandle, what is passed to the hook to expose methods to the parent component?

Select your answer

A closure that initializes component state.

An empty array outlining dependencies.

Raw JSX elements or components.

A function returning an object with properties assigned.

Question 13/15

Can a functional component use multiple refs for different purposes?

Select your answer

Yes, a functional component can have multiple refs.

Yes, but they need to be combined into a single ref object.

No, only one ref is allowed per component.

No, refs are only allowed in class components.

Question 14/15

Which DOM event does not automatically propagate through React portals?

Select your answer

onWheel

onClick

onMouseEnter

onFocus

Question 15/15

Which of the following statements about React refs is true?

Select your answer

Refs can replace state management entirely.

Refs can only be used in functional components.

Refs should be used for storing mutable data and preventing re-renders.

Refs are useful for creating controlled components.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

🙁 Your answer was incorrect

How do you create a portal in a React application?

const modalRoot = document.getElementById('modal-root');

function Modal({ children }) {
  return ReactDOM.createPortal(
    children,
    modalRoot
  );
}

Available answers

Use the 'Portal' component provided by React.

Use 'React.Fragment' to manage elements outside the DOM.

Use the 'createPortal' method from 'ReactDOM' to render elements outside the parent hierarchy.

Use 'React.createElement' to specify a different DOM node.

In React, you can create a portal by using the

ReactDOM.createPortal

method, which takes two arguments: the JSX you want to render and the DOM element to render it into.

Question 2/15

🙁 Your answer was incorrect

Should refs be used to expose component functions as a public API?

Available answers

No, using context is better for exposing public APIs.

No, refs should only manage DOM nodes and not functions.

Yes, but only in class components.

Yes, refs are the best way to expose public API functions safely.

Refs can be used to expose certain methods/variables via the

ref

API to parent components, enabling functionalities like focusing an input from the parent or playing/pausing a video.

Question 3/15

🙁 Your answer was incorrect

What is required for a child functional component to handle a forwarded ref?

Available answers

The parent must clone the element using <code>React.cloneElement</code>.

The child must return <code>null</code> at render.

The child component must use <code>forwardRef</code>.

The child component must be wrapped in a class.

A child component must be wrapped with

React.forwardRef

to handle refs forwarded from parent components and manage the refs correctly.

Question 4/15

🙁 Your answer was incorrect

What is the main difference between <code>React.createRef</code> and <code>React.useRef</code>?

Available answers

<code>React.createRef</code> is immutable, while <code>React.useRef</code> allows changes over rerenders.

Both are equivalent, but only differ in naming.

<code>React.useRef</code> must be used outside the component, while <code>React.createRef</code> should be used inside the component.

<code>React.createRef</code> can only be used in class components, while <code>React.useRef</code> can be used in both functional and class components.

React.createRef

is usually used in class components and returns a new ref object on every render, while

React.useRef

is used in functional components and retains the same ref object across renders.

Question 5/15

🙁 Your answer was incorrect

How does React handle cleanup for refs during unmounting of the component?

Available answers

No cleanup is necessary as refs are automatically garbage collected after unmount.

Refs cleanup is handled within the <code>useRef</code> hook.

Refs are automatically reset to null during unmount.

Refs must be manually cleaned up using <code>componentWillUnmount</code>.

Question 6/15

🙁 Your answer was incorrect

What is a common limitation of React portals?

Available answers

They cannot render primitive values like strings or numbers.

They cannot contain stateful components.

Portals do not support re-rendering.

Event bubbling works differently, i.e., events will bubble up to ancestors of the parent component.

Question 7/15

🙁 Your answer was incorrect

Can a React component be mounted into multiple portals simultaneously?

Available answers

Yes, React supports multiple portal mounts.

No, components can only be mounted into one portal at a time.

Only if portals are synchronized.

Yes, but it requires event delegation.

Question 8/15

🙁 Your answer was incorrect

What is a primary use case of React portals?

Available answers

To allow components to communicate with each other via context.

To create components that do not re-render when their state changes.

To allow components to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

To make state management more efficient in large applications.

Question 9/15

🙁 Your answer was incorrect

Why might you use the <code>useImperativeHandle</code> hook with <code>forwardRef</code>?

Available answers

To initialize ref values to <code>null</code> before render.

To transfer state management between components.

To ensure the ref cannot be mutated by the parent.

To modify the instance value that is exposed for parent components to control via refs.

The

useImperativeHandle

hook customizes the instance value exposed to parent components when a ref is used, enabling optimizations and additional logic.

Question 10/15

🙁 Your answer was incorrect

How do portals handle propagation of parent CSS styles?

Available answers

Portals copy styles only at the time of creation.

Portals are styled independently and don't inherit parent styles automatically.

Styles need to be passed using the 'style' prop.

Portals automatically adopt parent CSS styles via direct styling.

Question 11/15

🙁 Your answer was incorrect

What is a scenario where using refs is preferred over component state?

Available answers

Controlling component lifecycle transitions.

Passing data between sibling components.

Managing form input values for rendering.

Accessing and modifying a DOM element, e.g., for animations.

Question 12/15

🙁 Your answer was incorrect

When using <code>useImperativeHandle</code>, what is passed to the hook to expose methods to the parent component?

Available answers

A closure that initializes component state.

An empty array outlining dependencies.

Raw JSX elements or components.

A function returning an object with properties assigned.

useImperativeHandle takes a ref and an imperative handle function that returns an object containing the properties and methods to expose to the parent.

Question 13/15

🙁 Your answer was incorrect

Can a functional component use multiple refs for different purposes?

Available answers

Yes, a functional component can have multiple refs.

Yes, but they need to be combined into a single ref object.

No, only one ref is allowed per component.

No, refs are only allowed in class components.

In functional components, you can create multiple refs using

React.useRef()

for different purposes, such as managing DOM access for different elements.

Question 14/15

🙁 Your answer was incorrect

Which DOM event does not automatically propagate through React portals?

Available answers

<code>onWheel</code>

<code>onClick</code>

<code>onMouseEnter</code>

<code>onFocus</code>

Certain events like

onWheel

may not propagate from elements rendered in a portal to their bounding DOM elements due to event capture behavior.

Question 15/15

🙁 Your answer was incorrect

Which of the following statements about React refs is true?

Available answers

Refs can replace state management entirely.

Refs can only be used in functional components.

Refs should be used for storing mutable data and preventing re-renders.

Refs are useful for creating controlled components.

Create an account and save your quiz results

Login and save your results

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Select your answer

Your Results

Your Answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers

Available answers