useEffect dependency only if a certain variable is present then only watch it as dependency

user_2685914 0
Viewed 867

I have the following set of running code:

useEffect(() => {
 if (field[1].isActive === true) {
  handleMore();
 }
}, [field[1].text]);

The issue is sometimes Field doesn't come in the json-response, so then this code shows an error. As I cannot put useEffect inside some conditional statement (as per React Guidelines, all useEffects should always run in same order), is there any way I may add some code in dependency such as [field.length? field[1].text: null]. I am not sure.

Can someone help?

use-effect react-hooks reactjs javascript
3 Answers

you can use optional chaining or && for this.

useEffect(() => {
 if (field?[1]?.isActive === true) {
  handleMore();
 }
}, [field?.[1]?.text]);

Or

useEffect(() => {
   if (field?[1]?.isActive === true) {
      handleMore();
   }
 }, [field && field[1] && field[0].text]);
user_24172950

The straight forward solution (since there is no context to this question) might be using optional chaining.

useEffect(() => {
 if (field?.[1]?.isActive === true) {
  handleMore();
 }
}, [field?.[1]?.text]);
user_78824700
user_159532660
Related