Can I use AND (&&) OR ( || ) operators in dependency array React JS

Question

Can I use && and/or || operators in dependency array like this:

const isVisible = true
const isModified = false

useEffect(() => console.log("both are true"), [isVisible && isModified])

Is it a bad practice? Eslint says React Hook useEffect has a complex expression in the dependency array. react-hooks/exhaustive-deps

How can I achieve the same result by doing this the right way?

Answer 1

Eslint says lots of stuff. If this is your project and you like that style, change your .eslintrc so that it doesn't flag that. If you are coding to someone else's style, then you should respect it and maybe do:

const isVisible = true
const isModified = false

const combined = [isVisible && isModified]

useEffect(() => console.log("both are true"), combined)