React useCallback does not work with submit handler with an empty value.

_Info.md

React useCallback with changed form element but useCallback on submit the form element is empty.

Suggested fix:

Adding tracked state changes to second argument of useCallback()

Before: https://codepen.io/distalx/pen/WNxzPNE?editors=1011 After: https://codepen.io/stemount/pen/NWrMKNv?editors=1011

beforeAfter.diff

diff --git a/ReactUseCallbackBefore.js b/ReactUseCallbackFixors.js
index 27931c8..dd6eace 100644
--- a/ReactUseCallbackBefore.js
+++ b/ReactUseCallbackFixors.js
@@ -1,18 +1,18 @@
 const App = () => {
-  const [ title, setTitle ] = React.useState('');
+  const [ title, setTitle ] = React.useState(``);
 
   const handleSubmit = React.useCallback((event) => {
     event.preventDefault();
-    console.log(title);
-    alert(`the value of title is ${title}`);
-  }, []);
+     console.log("getTitle", title);
+     alert(`the value of title is ${title}`);
+  }, [title]);
 
   const handleTitleChange = React.useCallback(
     (event) => {
-      console.log(event.target.value)
+      console.log("formValueChange", event.target.value)
       setTitle(event.target.value);
     },
-    [],
+    [title],
   );
   
   return (

ReactUseCallbackBefore.js

const App = () => {
  const [ title, setTitle ] = React.useState('');

  const handleSubmit = React.useCallback((event) => {
    event.preventDefault();
    console.log(title);
    alert(`the value of title is ${title}`);
  }, []);

  const handleTitleChange = React.useCallback(
    (event) => {
      console.log(event.target.value)
      setTitle(event.target.value);
    },
    [],
  );
  
  return (
    <div>
      <form onSubmit={handleSubmit}>
        Input:
        <input type="text" name="title" value={title} onChange={handleTitleChange}/>
        <br/>
        <button type="submit"> Submit </button>
      </form>
      <p>Output: {title}</p>
    </div>
  )

}



ReactDOM.render(<App/>, document.getElementById('root'));

ReactUseCallbackFixors.js

const App = () => {
  const [ title, setTitle ] = React.useState(``);

  const handleSubmit = React.useCallback((event) => {
    event.preventDefault();
     console.log("getTitle", title);
     alert(`the value of title is ${title}`);
  }, [title]);

  const handleTitleChange = React.useCallback(
    (event) => {
      console.log("formValueChange", event.target.value)
      setTitle(event.target.value);
    },
    [title],
  );
  
  return (
    <div>
      <form onSubmit={handleSubmit}>
        Input:
        <input type="text" name="title" value={title} onChange={handleTitleChange}/>
        <br/>
        <button type="submit"> Submit </button>
      </form>
      <p>Output: {title}</p>
    </div>
  )

}



ReactDOM.render(<App/>, document.getElementById('root'));