Why React is used - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does React use a virtual DOM?

React uses a virtual DOM to improve performance. What does the virtual DOM do?

A It updates the real DOM directly every time a change happens.

B It removes the real DOM and uses only JavaScript objects.

C It creates a copy of the real DOM to find changes before updating the real DOM.

D It delays all updates until the user refreshes the page.

💡 Hint

Think about how React makes updates faster without changing the whole page.

React creates a virtual DOM, which is a lightweight copy of the real DOM. It compares changes in the virtual DOM first, then updates only the parts of the real DOM that changed. This makes updates faster and smoother.

❓ component_behavior

intermediate

What happens when React state changes?

In React, when you update a component's state using useState, what happens next?

A React re-renders only the component with the updated state.

B Nothing happens until you manually refresh the page.

C React deletes the component and creates a new one from scratch.

D The entire page reloads to show the new state.

💡 Hint

Think about how React updates the UI efficiently when data changes.

When state changes, React re-renders the component that owns the state. It updates the UI to reflect the new state without reloading the whole page.

📝 Syntax

advanced

Which React hook is used to perform side effects?

You want to run code after a React component renders, like fetching data. Which hook should you use?

A useEffect

B useState

C useMemo

D useCallback

💡 Hint

This hook runs after rendering and can watch for changes.

useEffect runs side effects after rendering, such as fetching data or updating the document title.

🔧 Debug

advanced

Why does this React component not update on button click?

Look at this React component code. Why does clicking the button not update the displayed count? function Counter() { let count = 0; return (

Count: {count}

); }

React

function Counter() {
  let count = 0;
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => { count += 1; }}>Increase</button>
    </div>
  );
}

A The button's onClick handler syntax is incorrect and causes an error.

B The count variable is not a state, so React does not re-render when it changes.

C The count variable is declared with let instead of const, causing a syntax error.

D React components cannot have variables inside the function body.

💡 Hint

React only re-renders when state or props change.

The count variable is a normal variable that resets on every render. React does not track it as state, so changes to it do not cause re-rendering.

❓ lifecycle

expert

When does React run cleanup functions in useEffect?

Consider this React useEffect hook: useEffect(() => { const id = setInterval(() => console.log('tick'), 1000); return () => clearInterval(id); }, []); When is the cleanup function called?

React

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

A Never, because the dependency array is empty.

B Every time the component re-renders, before running the effect again.

C Immediately after the effect runs for the first time.

D Only when the component unmounts from the page.

💡 Hint

Think about when React cleans up effects with empty dependency arrays.

With an empty dependency array, the effect runs once on mount, and the cleanup runs only when the component unmounts.