Description

A message logger lets the user type a message and click a button to append it to a running log.

Anomaly

Type a message and click Log - a blank entry appears in the list. Type another message and click Log again - another blank entry. The log fills with empty items instead of the typed messages.

Constraint
Do not remove useCallback
Hint
Consult the SenseiOnly for those truly stuck · Flip to reveal

Think about when `handleLog` was created and what value of `message` it captured at that moment.

Loading editor…
Correct Solution
Loading...

Why this fixes it

`handleLog` was created once on mount with an empty dependency array, so the `message` variable it closed over was permanently locked to the empty string that existed at creation time - every subsequent log call appended that stale empty string to the list. Adding `message` to the `useCallback` dependency array causes React to recreate the function whenever `message` changes, giving the new callback a fresh closure that sees the current input value.

Expected OutputGoal State
Your OutputLive