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

Login and save your 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

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 are useful for creating controlled components.

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

Question 2/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.

A function returning an object with properties assigned.

Raw JSX elements or components.

Question 3/15

Can React portals be used in server-side rendering applications?

Select your answer

No, because they break the virtual DOM concept.

Yes, but special handling is required to ensure correct client-side hydration.

Yes, portals automatically integrate with server-side rendering without issues.

No, portals are a client-side feature and cannot be rendered server-side.

Question 4/15

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

Select your answer

Refs are automatically reset to null during unmount.

Refs cleanup is handled within the useRef hook.

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

Refs must be manually cleaned up using componentWillUnmount.

Question 5/15

What should you consider when passing refs to child components?

Select your answer

Initialize ref values in the child component constructor.

Avoid using refs in child components as it violates best practices.

Use React.forwardRef to pass refs to child components for proper access.

Ensure the ref is a string to be accessed easily.

Question 6/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 7/15

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

Select your answer

Managing form input values for rendering.

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

Controlling component lifecycle transitions.

Passing data between sibling components.

Question 8/15

Can a functional component use multiple refs for different purposes?

Select your answer

Yes, a functional component can have multiple refs.

No, only one ref is allowed per component.

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

No, refs are only allowed in class components.

Question 9/15

What value do you get when you access a ref using ref.current immediately after creating it?

const myRef = React.useRef();
console.log(myRef.current);

Select your answer

The ref itself, which is an object with the key 'current'.

undefined

null

The DOM node related to the ref.

Question 10/15

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

Select your answer

Yes, but only in class components.

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

No, using context is better for exposing public APIs.

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

Question 11/15

How can a functional component update its ref in response to a state change?

Select your answer

Create a new ref every time the component renders.

Using useRef only once during render and directly manage logic in effects.

By calling setState inside useRef.

Direct ref changes should also trigger useState.

Question 12/15

Which DOM event does not automatically propagate through React portals?

Select your answer

onFocus

onMouseEnter

onClick

onWheel

Question 13/15

What is a common limitation of React portals?

Select your answer

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

Portals do not support re-rendering.

They cannot contain stateful components.

They cannot render primitive values like strings or numbers.

Question 14/15

What is the main advantage of using React portals?

Select your answer

Directly manipulate the browser's history.

Immediately improve application performance.

Allow easy isolation of component state.

Enable rendering components outside the main DOM tree to avoid layout issues.

Question 15/15

Which method allows you to create refs in class components?

Select your answer

Assign directly within render method.

React.useRef() is exclusively for class components.

componentDidMount

React.createRef() method is used to create refs in class components.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 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 are useful for creating controlled components.

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

Refs are particularly useful for storing mutable data that does not require re-rendering of the component when changed, like DOM manipulation.

Question 2/15

😊 Your answer was correct 🙁 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.

A function returning an object with properties assigned.

Raw JSX elements or components.

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

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can React portals be used in server-side rendering applications?

Available answers

No, because they break the virtual DOM concept.

Yes, but special handling is required to ensure correct client-side hydration.

Yes, portals automatically integrate with server-side rendering without issues.

No, portals are a client-side feature and cannot be rendered server-side.

While react portals can be used with server-side rendering, they require special care for client-side hydration to ensure the portal content is correctly matched and rendered both server-side and client-side.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Refs are automatically reset to null during unmount.

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

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

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

Refs are automatically garbage collected when a component unmounts, as they are simply pointers to DOM elements or storage, so no explicit cleanup is needed.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

What should you consider when passing refs to child components?

Available answers

Initialize ref values in the child component constructor.

Avoid using refs in child components as it violates best practices.

Use <code>React.forwardRef</code> to pass refs to child components for proper access.

Ensure the ref is a string to be accessed easily.

To pass a ref to a child component, you need to use

React.forwardRef

to ensure the child component can receive it properly and forward it to a DOM node or another child if necessary.

Question 6/15

😊 Your answer was correct 🙁 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 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Managing form input values for rendering.

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

Controlling component lifecycle transitions.

Passing data between sibling components.

For tasks like accessing or modifying DOM elements directly such as animations, using refs is preferred because these updates do not require triggering re-renders.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can a functional component use multiple refs for different purposes?

Available answers

Yes, a functional component can have multiple refs.

No, only one ref is allowed per component.

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

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 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What value do you get when you access a ref using <code>ref.current</code> immediately after creating it?

const myRef = React.useRef();
console.log(myRef.current);

Available answers

The ref itself, which is an object with the key 'current'.

undefined

null

The DOM node related to the ref.

Initially, the

current

property of a ref object is set to

null

. It will be updated to point to the DOM element after the first render.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Yes, but only in class components.

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

No, using context is better for exposing public APIs.

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 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can a functional component update its ref in response to a state change?

Available answers

Create a new ref every time the component renders.

Using <code>useRef</code> only once during render and directly manage logic in effects.

By calling <code>setState</code> inside <code>useRef</code>.

Direct ref changes should also trigger <code>useState</code>.

To respond to state changes with a ref, you set up logic in an effect hook that can modify the ref variable upon changes in the component's state.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which DOM event does not automatically propagate through React portals?

Available answers

<code>onFocus</code>

<code>onMouseEnter</code>

<code>onClick</code>

<code>onWheel</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 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is a common limitation of React portals?

Available answers

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

Portals do not support re-rendering.

They cannot contain stateful components.

They cannot render primitive values like strings or numbers.

Event bubbling through portals occurs as if the portal elements were stuck to the parent component that created them, not the DOM hierarchy where they are placed, which can confuse handling events.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the main advantage of using React portals?

Available answers

Directly manipulate the browser's history.

Immediately improve application performance.

Allow easy isolation of component state.

Enable rendering components outside the main DOM tree to avoid layout issues.

React portals enable components to be rendered outside the parent DOM hierarchy, helping to avoid layout issues, especially with components like modals or tooltips.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which method allows you to create refs in class components?

Available answers

Assign directly within render method.

<code>React.useRef()</code> is exclusively for class components.

<code>componentDidMount</code>

<code>React.createRef()</code> method is used to create refs in class components.

In class components, the

React.createRef()

method is used to create refs that can be attached to React elements to gain direct access to DOM elements or React components.