What does React render for null, false, undefined, 0, and "", and is returning null the same as not rendering a component?
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…