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
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
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 ( |
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')); |
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')); |