Ufdjrw

Why don't the Weasley twins use magic outside of school if the Trace can only find the location of spells cast?

How widely used is the term Treppenwitz? Is it something that most Germans know?

The logistics of corpse disposal

Is the Standard Deduction better than Itemized when both are the same amount?

Are my PIs rude or am I just being too sensitive?

Is a manifold-with-boundary with given interior and non-empty boundary essentially unique?

Bonus calculation: Am I making a mountain out of a molehill?

What is a Meta algorithm?

Sorting numerically

List *all* the tuples!

Check which numbers satisfy the condition [A*B*C = A! + B! + C!]

Why one of virtual NICs called bond0?

Stars Make Stars

Is there a "higher Segal conjecture"?

Right-skewed distribution with mean equals to mode?

What are 'alternative tunings' of a guitar and why would you use them? Doesn't it make it more difficult to play?

3 doors, three guards, one stone

Can a non-EU citizen traveling with me come with me through the EU passport line?

If a contract sometimes uses the wrong name, is it still valid?

How do I stop a creek from eroding my steep embankment?

Is it true that "carbohydrates are of no use for the basal metabolic need"?

Do I really need recursive chmod to restrict access to a folder?

ListPlot join points by nearest neighbor rather than order

Is there a service that would inform me whenever a new direct route is scheduled from a given airport?

What if I add multiple dependency in React's useEffect second parameter?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

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 ?

reactjs react-hooks

share|improve this question

asked Mar 8 at 16:27

rockfightrockfight

8491822

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  no 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
  Mar 8 at 16:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Or, if possible, just test it yourself : )
  
  – Powell_v2
  Mar 8 at 23:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  But 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
  Mar 9 at 12:36
  

  
  
  
  

add a comment | 

1

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 ?

reactjs react-hooks

share|improve this question

asked Mar 8 at 16:27

rockfightrockfight

8491822

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  no 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
  Mar 8 at 16:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Or, if possible, just test it yourself : )
  
  – Powell_v2
  Mar 8 at 23:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  But 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
  Mar 9 at 12:36
  

  
  
  
  

add a comment | 

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 ?

reactjs react-hooks

share|improve this question

asked Mar 8 at 16:27

rockfightrockfight

8491822

share|improve this question

asked Mar 8 at 16:27

rockfightrockfight

8491822

share|improve this question

asked Mar 8 at 16:27

rockfightrockfight

8491822

asked Mar 8 at 16:27

rockfightrockfight

8491822

asked Mar 8 at 16:27

rockfightrockfight

8491822

1 Answer
1

active

oldest

votes

5

It will fire when either one changes. The way to think of it is that you are telling React:

a and b are 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);

share|improve this answer

edited Mar 8 at 17:06

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – rockfight
  Mar 9 at 12:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – Ryan Cogswell
  Mar 9 at 13:20
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55067202%2fwhat-if-i-add-multiple-dependency-in-reacts-useeffect-second-parameter%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

5

It will fire when either one changes. The way to think of it is that you are telling React:

a and b are 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);

share|improve this answer

edited Mar 8 at 17:06

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – rockfight
  Mar 9 at 12:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – Ryan Cogswell
  Mar 9 at 13:20
  

  
  
  
  

add a comment | 

5

It will fire when either one changes. The way to think of it is that you are telling React:

a and b are 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);

share|improve this answer

edited Mar 8 at 17:06

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – rockfight
  Mar 9 at 12:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – Ryan Cogswell
  Mar 9 at 13:20
  

  
  
  
  

add a comment | 

It will fire when either one changes. The way to think of it is that you are telling React:

a and b are 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);

share|improve this answer

edited Mar 8 at 17:06

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

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

share|improve this answer

edited Mar 8 at 17:06

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626

answered Mar 8 at 16:47

Ryan CogswellRyan Cogswell

6,0231626