For example if I make a useEffect hook as useEffect(() => {...},[a,b]). Will the useEffect get fired if one of [a,b] changes or when both [a,b] changes ?
-
8no idea, so I filed github.com/facebook/react/issues/15068, which in the future I would highly recommend you also do. If the official documentation doesn't cover a question, you are almost guaranteed not to be the only person to wonder about whatever you're wondering about, and asking the people who make the thing you use to improve the docs is of great benefit to everyone.Mike 'Pomax' Kamermans– Mike 'Pomax' Kamermans2019-03-08 16:46:35 +00:00Commented Mar 8, 2019 at 16:46
-
Or, if possible, just test it yourself : )Pa Ye– Pa Ye2019-03-08 23:19:40 +00:00Commented Mar 8, 2019 at 23:19
-
3But when we test it, it may give an answer but you can't test all the edge cases and be sure about it. Why not just add a line in the documentation to remove all the doubts.rockfight– rockfight2019-03-09 12:36:14 +00:00Commented Mar 9, 2019 at 12:36
Add a comment
|
1 Answer
It will fire when either one changes. The way to think of it is that you are telling React:
aandbare the things that I am using inside this effect, so if either of them change, my effect will need to cleanup the old version and re-execute with the updated values.
Here's a simple example that allows you to see the behavior:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [dependency1, setDependency1] = useState(1);
const [dependency2, setDependency2] = useState(1);
useEffect(
() => {
console.log("only dependency1", dependency1, dependency2);
},
[dependency1]
);
useEffect(
() => {
console.log("dependency1 and dependency2", dependency1, dependency2);
},
[dependency1, dependency2]
);
return (
<div className="App">
<button
onClick={() => {
setDependency1(prev => prev + 1);
}}
>
Change dependency1
</button>
<button
onClick={() => {
setDependency2(prev => prev + 1);
}}
>
Change dependency2
</button>
<button
onClick={() => {
setDependency1(prev => prev + 1);
setDependency2(prev => prev + 1);
}}
>
Change both
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
6 Comments
rockfight
Looks like it gets fired when one of them changes. But why the documentation is not clear about it ? May be in future they will be clear about it. Nevertheless thank you for the clear answer.
Ryan Cogswell
It isn’t easy for the React team (who live and breathe this stuff) to predict what will and won’t be obvious to people. The documentation explains the purpose of the array (from which one could infer what the behavior should be). Describing all the edge cases in detail can make it harder to find the key concepts and make things appear more complicated than they are. If you think the documentation should be improved, submit a pull request with the changes that would have helped you understand this.
nullromo
Is it possible to do it the other way? What if I do want an effect that only fires when two or more variables are all changed?
Ryan Cogswell
@nullromo I would need further context to understand what kind of problem you are trying to solve. I recommend creating your own question where you can provide additional details along with code and a sandbox demonstrating your issue.
nullromo
I think the answer to my question is you just lump all the state variables together into 1 object and put that object in the dependency array. Then there's technically only 1 state variable and you can modify many of its attributes at once to get only 1 effect triggered.
|