cf.completefrontend

Predict the outputMedium

Two components call the same custom hook: what do they show after these clicks?

useCounter keeps a count in useState, and also adds every click to totalClicks, a variable at the top of the module. Two TeaCounters call it.

What does it log, and what does the page show?
import { useState } from "react";
 
let totalClicks = 0;
 
function useCounter() {
  const [count, setCount] = useState(0);
  function increment() {
    totalClicks = totalClicks + 1;
    setCount(count + 1);
  }
  return [count, increment];
}
 
function TeaCounter({ name }) {
  const [count, increment] = useCounter();
  return (
    <p>
      {name}: {count} (total {totalClicks}) <button onClick={increment}>Add {name}</button>
    </p>
  );
}
 
export default function App() {
  return (
    <>
      <TeaCounter name="Sencha" />
      <TeaCounter name="Oolong" />
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Add Sencha twice.
  2. You click Add Oolong once.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…