Before React hooks, I would use componentDidUpdate(prevProps, prevState), and if I wanted to execute given code only when this.state.a had updated, I'd do
if (prevState.a !== this.state.a) {
<...>
}
How can I achieve the same thing in useEffect()?
The useEffect function takes a dependency array where you can mention the states you want to track for change.
useEffect(() => {
//your code here
}, [a])
useEffect takes the second argument called as a dependency array . You can pass your state here and this gets executed whenever the value in the dependency array changes .
useEffect(() => {
console.log('i get executed whenever a changes')
}, [a])
useEffect(() => {
//Your code
}, [stateOne, stateTwo])
[stateOne, stateTwo] means that if any of the state variables defined inside change, the useEffect will run. Also runs for the fist time once it mounts.
[] means that it will run only once
It is called an dependency array for useEffect.
a, b, and c, I could write a useEffect for each of them?
useEffect takes a second parameter called dependency array. You can pass your state variable here and useEffect will execute the callback function only when that state variable changes.
const [a, setA] = useState(0);
useEffect(() => {
//write you code here
}, [a]);
useEffecthook. Seems also others here may've missed the part that you want to compare to a previous value.