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

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

Select your answer

Refs cleanup is handled within the useRef hook.

Refs are automatically reset to null during unmount.

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

Refs must be manually cleaned up using componentWillUnmount.

Question 2/15

Which method allows you to create refs in class components?

Select your answer

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

Assign directly within render method.

componentDidMount

React.useRef() is exclusively for class components.

Question 3/15

Is it possible to use useRef to trigger a re-render?

Select your answer

No, useRef updates do not cause re-renders.

No, useRef is immutable after initial render.

Yes, but only for class components.

Yes, any change to the ref will trigger a re-render.

Question 4/15

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

Select your answer

Both are equivalent, but only differ in naming.

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

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

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

Question 5/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 'createPortal' method from 'ReactDOM' to render elements outside the parent hierarchy.

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

Use the 'Portal' component provided by React.

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

Question 6/15

What is a common limitation of React portals?

Select your answer

They cannot contain stateful components.

They cannot render primitive values like strings or numbers.

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

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 DOM node related to the ref.

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

undefined

null

Question 8/15

What should you consider when passing refs to child components?

Select your answer

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

Initialize ref values in the child component constructor.

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

Ensure the ref is a string to be accessed easily.

Question 9/15

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

Select your answer

A function returning an object with properties assigned.

A closure that initializes component state.

An empty array outlining dependencies.

Raw JSX elements or components.

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

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

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

Question 11/15

How does state update affect a component with refs?

Select your answer

Refs become undefined on state updates.

State updates will also refresh the values of refs.

State updates will not affect the ref values.

Only class component refs are affected by state changes.

Question 12/15

Is it possible to use refs for callback purposes?

Select your answer

Yes, but only for class components.

Yes, by using callback refs to set up refs dynamically.

No, it's inefficient and not recommended.

No, refs are static pointers to elements.

Question 13/15

Which hook is commonly used with React refs to perform an action after the component has been updated?

Select your answer

useState

useReducer

useContext

useEffect

Question 14/15

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

Select your answer

Passing data between sibling components.

Managing form input values for rendering.

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

Controlling component lifecycle transitions.

Question 15/15

Can a functional component use multiple refs for different purposes?

Select your answer

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.

Yes, a functional component can have multiple refs.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

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

Refs are automatically reset to null during unmount.

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

😊 Your answer was correct 🙁 Your answer was incorrect

Which method allows you to create refs in class components?

Available answers

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

Assign directly within render method.

<code>componentDidMount</code>

<code>React.useRef()</code> is exclusively for 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.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Is it possible to use <code>useRef</code> to trigger a re-render?

Available answers

No, <code>useRef</code> updates do not cause re-renders.

No, <code>useRef</code> is immutable after initial render.

Yes, but only for class components.

Yes, any change to the ref will trigger a re-render.

Changes to a

useRef

object's current property do not trigger component re-renders because the object is not part of the component's state.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Both are equivalent, but only differ in naming.

<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.

<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> is immutable, while <code>React.useRef</code> allows changes over rerenders.

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 correct 🙁 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 'createPortal' method from 'ReactDOM' to render elements outside the parent hierarchy.

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

Use the 'Portal' component provided by React.

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

😊 Your answer was correct 🙁 Your answer was incorrect

What is a common limitation of React portals?

Available answers

They cannot contain stateful components.

They cannot render primitive values like strings or numbers.

Portals do not support re-rendering.

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

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 7/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 DOM node related to the ref.

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

undefined

null

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

😊 Your answer was correct 🙁 Your answer was incorrect

What should you consider when passing refs to child components?

Available answers

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

Initialize ref values in the child component constructor.

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

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 9/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 function returning an object with properties assigned.

A closure that initializes component state.

An empty array outlining dependencies.

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 10/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.

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

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

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

😊 Your answer was correct 🙁 Your answer was incorrect

How does state update affect a component with refs?

Available answers

Refs become undefined on state updates.

State updates will also refresh the values of refs.

State updates will not affect the ref values.

Only class component refs are affected by state changes.

Refs are distinct from the state and are not affected by state updates. The values within a ref hold constant through component re-renders unless explicitly changed.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Is it possible to use refs for callback purposes?

Available answers

Yes, but only for class components.

Yes, by using callback refs to set up refs dynamically.

No, it's inefficient and not recommended.

No, refs are static pointers to elements.

Callback refs can be used in React to dynamically determine how a ref property is assigned, allowing more flexibility in setting refs based on certain conditions or side-effects.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which hook is commonly used with React refs to perform an action after the component has been updated?

Available answers

useState

useReducer

useContext

useEffect

The

useEffect

hook is commonly used with refs when you want to perform an action after the component has been updated, such as interacting with an element rendered through a ref.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

Passing data between sibling components.

Managing form input values for rendering.

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

Controlling component lifecycle transitions.

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

😊 Your answer was correct 🙁 Your answer was incorrect

Can a functional component use multiple refs for different purposes?

Available answers

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.

Yes, a functional component can have multiple refs.

In functional components, you can create multiple refs using

React.useRef()

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