Deeper Dive Into ReactDDIR

React quiz - re-render & context

Context adds dependency between the consumer and provider.

re-render & context (pass rate: 50%)react@18.3.1
{...}
import * as React from "react";
import { useState, memo, createContext, useEffect, useContext } from "react";
import { createRoot } from "react-dom/client";
const Context = createContext(0);
const A = memo(() => {
console.log("A");
return <B />;
});
function B() {
const count = useContext(Context);
console.log("B");
return null;
}
function C() {
console.log("C");
return null;
}
function App() {
const [state, setState] = useState(0);
useEffect(() => {
setState((state) => state + 1);
}, []);
console.log("App");
return (
<Context.Provider value={state}>
<A />
<C />
</Context.Provider>
);
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
{...}
import * as React from "react";
import { useState, memo, createContext, useEffect, useContext } from "react";
import { createRoot } from "react-dom/client";
const Context = createContext(0);
const A = memo(() => {
console.log("A");
return <B />;
});
function B() {
const count = useContext(Context);
console.log("B");
return null;
}
function C() {
console.log("C");
return null;
}
function App() {
const [state, setState] = useState(0);
useEffect(() => {
setState((state) => state + 1);
}, []);
console.log("App");
return (
<Context.Provider value={state}>
<A />
<C />
</Context.Provider>
);
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
What gets logged in order?

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