Refs: a DOM handle and a value that does not render in React
React interview exercise on Effects & refs, difficulty 2 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.
Write SearchBox: an <input> with a ref, a <button className="focus"> that focuses the input, a <button className="clear"> that clears the input AND focuses it, and a <small className="clears"> saying how many times clear was pressed, counted in a ref (NOT state) and shown only when the component re-renders for another reason: the counter must not cause a render itself.
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.