React hooks useEffect: include some dependencies but ignore others

Question

I'm using useEffect with several dependencies included in the dependency array, which are at the same time props. I want to ignore some dependencies (i.e. props.b) which are causing my page to render when these dependencies change; however, I have to include a dependency array because I want my useEffect to listen to other dependencies (i.e. props.a). This is my code very, very simplified:

const MyFunction(props){
  const [c,setC] = useState([])
  useEffect(()=>{
      if (props.a){
        let c0;
        props.b.forEach((item)=>{
          c0 = [...,c0.x]
        })
        setC(c0)
      }
      
  ,[props.a])
  return (
    <div>
      <OtherComponent
         c={c}      
      />
    </div>
  )
}

I don't know how to procede without getting a warning, as I really need to ignore props.b but not props.a

Dave · Accepted Answer · 2022-03-22 16:32:04Z

2

useEffect takes a function and an array of dependencies. The function creates a closure (traps the variables within it at their current values), so you DO want any variable used to be in the dependency list because if it changes, you need that entire function to be recreated. Otherwise you get hard to find bugs.

Pass in all the props, it's OK. Since "c" is an array, pass in 'c' as well, and instead of "setC(...)" you can just c.push(...) to add to that array.

Finally, if you have your app wrapped in strict mode, then your component renders twice in a row. This is to prevent you from having side-effects. If you remove (temporarily) strict mode and look at your console logs, things may be as you expect.

answered Mar 22, 2022 at 16:32

Dave

7,7174 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Vu · Accepted Answer · 2022-03-22 16:28:47Z

If you use eslint, I'd suggest you to add these comments to ignore dependency

useEffect(()=>{
      if (props.a){
        let c0;
        props.b.forEach((item)=>{
          c0 = [...,c0.x]
        })
        setC(c0)
      }
   // eslint-disable-next-line react-hooks/exhaustive-deps
  ,[props.a])

If you want to disable that behavior permanently, you can modify your .eslintrc

// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", 
    "react-hooks/exhaustive-deps": "off" //Set it `off`
  }
}

BUT you need to keep in mind that react-hooks/exhaustive-deps is like a safe-guard for your hooks. If you disable it permanently, that may cause some unexpected bugs. I'd suggest you use the first way which is only to disable dependency check on the line you want.

Kavindu Vindika · Accepted Answer · 2022-03-22 16:28:48Z

1

It's not an error to have such a warning. It happens because you're using props.b inside the useEffect. Avoid the warning and go with your code. It won't be an issue.

answered Mar 22, 2022 at 16:28

Kavindu Vindika

2,7972 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

React hooks useEffect: include some dependencies but ignore others

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related