cf.completefrontend

ConceptMedium

What does React render for null, false, undefined, 0, and "", and is returning null the same as not rendering a component?

The code
function Timer({ visible }) {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  if (!visible) return null;
  return <p>{seconds} s</p>;
}
 
// A: always in the tree, sometimes shows nothing
<Timer visible={showTimer} />
 
// B: in the tree only while showTimer is true
{showTimer && <Timer visible />}

The answer

Answer it out loud first, the way you would in the interview. Then compare.

Checking your sign-in…