A memoized log button captures a message from an input and logs it to a display. After typing a new message and clicking Log, the old message appears instead of the new one.
Type a message and click Log — an empty entry appears in the list. Type another message and click Log again — another empty entry. The log fills with blank items instead of the typed messages.
Think about when handleLog was created and what value of message it captured at that moment.
Think about when handleLog was created and what value of message it captured at that moment.
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. The log then captures whatever is actually typed at the moment the button is clicked.