React Portals and Refs Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

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

Select your answer

Question 2/15

Which method allows you to create refs in class components?

Select your answer

Question 3/15

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

Select your answer

Question 4/15

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

Select your answer

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

Question 6/15

What is a common limitation of React portals?

Select your answer

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

Question 8/15

What should you consider when passing refs to child components?

Select your answer

Question 9/15

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

Select your answer

Question 10/15

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

Select your answer

Question 11/15

How does state update affect a component with refs?

Select your answer

Question 12/15

Is it possible to use refs for callback purposes?

Select your answer

Question 13/15

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

Select your answer

Question 14/15

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

Select your answer

Question 15/15

Can a functional component use multiple refs for different purposes?

Select your answer

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

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

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

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

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

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

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

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

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

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

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

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

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

In functional components, you can create multiple refs using
React.useRef()
for different purposes, such as managing DOM access for different elements.