Advanced Patterns

Preview — 3 of 10 questions

What does React's reconciliation algorithm determine?

javascript

// Before update:
<ul>
  <li key="a">Apple</li>
  <li key="b">Banana</li>
</ul>

// After update:
<ul>
  <li key="b">Banana</li>
  <li key="a">Apple</li>
</ul>

AReact uses keys to detect that items were reordered — it moves the existing DOM nodes instead of recreating them

BReact destroys both <li> elements and creates two new ones

CReact re-renders both items but keeps the DOM nodes in order

DReact always does a full DOM replacement for list changes

What changed with React 18's automatic batching?

javascript

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = async () => {
    await fetchData();
    setCount(c => c + 1);  // (A)
    setFlag(f => !f);      // (B)
  };
}

AReact 17 and 18 both batch these — no difference

BBatching only applies to setTimeout callbacks, not async/await

CReact 18 batches synchronous updates only — async updates are never batched

DReact 17 would cause 2 re-renders (one per setState); React 18 batches them into 1 re-render automatically, even inside async functions

What can catch errors in the React render lifecycle?

javascript

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

AError boundaries must be class components — they catch errors in child component render, lifecycle methods, and constructors; NOT event handlers or async code

Btry/catch in the component function works equally well

CError boundaries catch ALL errors including in event handlers and async code

DFunctional components with try/catch around JSX work the same way

Answer all 10 questions (7 more), see explanations for every answer, and track your score.