React quiz - Error Boundary

Error Boundary is a declarative way to handle errors in a tree structure.

Error Boundary (pass rate: 16%)react@18.3.1

{...}
import * as React from "react";
import { createRoot } from "react-dom/client";
function A() {
  console.log(1);
  return <ThrowsOnRender />;
}
function ThrowsOnRender() {
  console.log(2);
  throw "error";
  return null;
}
class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
  };
  static getDerivedStateFromError() {
    console.log(3);
    return {
      hasError: true,
    };
  }
  render() {
    return this.state.hasError ? <p>something wrong</p> : this.props.children;
  }
}
function App() {
  return (
    <ErrorBoundary>
      <A />
    </ErrorBoundary>
  );
}
const root = createRoot(document.querySelector("#root"));
root.render(<App />);

{...}
import * as React from "react";
import { createRoot } from "react-dom/client";
function A() {
  console.log(1);
  return <ThrowsOnRender />;
}
function ThrowsOnRender() {
  console.log(2);
  throw "error";
  return null;
}
class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
  };
  static getDerivedStateFromError() {
    console.log(3);
    return {
      hasError: true,
    };
  }
  render() {
    return this.state.hasError ? <p>something wrong</p> : this.props.children;
  }
}
function App() {
  return (
    <ErrorBoundary>
      <A />
    </ErrorBoundary>
  );
}
const root = createRoot(document.querySelector("#root"));
root.render(<App />);

What gets logged in order?

click on the console.log lines to input your answer.