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

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

Select your answer

Raw JSX elements or components.

A function returning an object with properties assigned.

A closure that initializes component state.

An empty array outlining dependencies.

Question 2/15

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

Select your answer

useContext

useReducer

useEffect

useState

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

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

How do portals handle propagation of parent CSS styles?

Select your answer

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

Portals automatically adopt parent CSS styles via direct styling.

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

Portals copy styles only at the time of creation.

Question 5/15

If a portal is rendered inside a component, will the state updates of that component affect the portal?

Select your answer

No, portals are completely separate and independent.

Only state updates for elements within the portal are affected.

Yes, because portals are part of the same React tree.

Only if the portal's props change.

Question 6/15

What is a common limitation of React portals?

Select your answer

Portals do not support re-rendering.

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

They cannot render primitive values like strings or numbers.

They cannot contain stateful components.

Question 7/15

Which of the following statements about React refs is true?

Select your answer

Refs can only be used in functional components.

Refs can replace state management entirely.

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

Refs are useful for creating controlled components.

Question 8/15

How does state update affect a component with refs?

Select your answer

State updates will also refresh the values of refs.

Refs become undefined on state updates.

Only class component refs are affected by state changes.

State updates will not affect the ref values.

Question 9/15

Why might you use the useImperativeHandle hook with forwardRef?

Select your answer

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.

To transfer state management between components.

To initialize ref values to null before render.

Question 10/15

Is it possible to use refs for callback purposes?

Select your answer

Yes, but only for class components.

No, it's inefficient and not recommended.

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

No, refs are static pointers to elements.

Question 11/15

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

Select your answer

By calling setState inside useRef.

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

Create a new ref every time the component renders.

Direct ref changes should also trigger useState.

Question 12/15

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

Select your answer

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

Controlling component lifecycle transitions.

Passing data between sibling components.

Managing form input values for rendering.

Question 13/15

Can a React component be mounted into multiple portals simultaneously?

Select your answer

Only if portals are synchronized.

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

Yes, but it requires event delegation.

Yes, React supports multiple portal mounts.

Question 14/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

null

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

undefined

The DOM node related to the ref.

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

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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

Raw JSX elements or components.

A function returning an object with properties assigned.

A closure that initializes component state.

An empty array outlining dependencies.

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

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

useContext

useReducer

useEffect

useState

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

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

😊 Your answer was correct 🙁 Your answer was incorrect

How do portals handle propagation of parent CSS styles?

Available answers

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

Portals automatically adopt parent CSS styles via direct styling.

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

Portals copy styles only at the time of creation.

React portals don't automatically inherit CSS from their parents, as they're set in a separate DOM node. Manual styling or styled-components/global CSS should be considered.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a portal is rendered inside a component, will the state updates of that component affect the portal?

Available answers

No, portals are completely separate and independent.

Only state updates for elements within the portal are affected.

Yes, because portals are part of the same React tree.

Only if the portal's props change.

React portals, although rendered outside the DOM hierarchy, are still a part of the parent component's React tree, meaning they will update whenever the parent component updates.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is a common limitation of React portals?

Available answers

Portals do not support re-rendering.

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

They cannot render primitive values like strings or numbers.

They cannot contain stateful components.

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

Which of the following statements about React refs is true?

Available answers

Refs can only be used in functional components.

Refs can replace state management entirely.

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

Refs are useful for creating controlled components.

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

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does state update affect a component with refs?

Available answers

State updates will also refresh the values of refs.

Refs become undefined on state updates.

Only class component refs are affected by state changes.

State updates will not affect the ref values.

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 9/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 ensure the ref cannot be mutated by the parent.

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

To transfer state management between components.

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

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

Is it possible to use refs for callback purposes?

Available answers

Yes, but only for class components.

No, it's inefficient and not recommended.

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

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

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

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

Create a new ref every time the component renders.

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

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

Available answers

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

Controlling component lifecycle transitions.

Passing data between sibling components.

Managing form input values for rendering.

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

😊 Your answer was correct 🙁 Your answer was incorrect

Can a React component be mounted into multiple portals simultaneously?

Available answers

Only if portals are synchronized.

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

Yes, but it requires event delegation.

Yes, React supports multiple portal mounts.

A React component can only be instantiated once in the application tree, so it can't be rendered into multiple portals simultaneously.

Question 14/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

null

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

undefined

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