Skip to content Skip to sidebar Skip to footer

React Useeffect Hook With Warning React-hooks/exhaustive-deps

I am converting code that used componentDidMount/Update/Unmount lifecycle to React Hooks and keep coming up against react-hooks/exhaustive-deps in the console as a warning. Our new

Solution 1:

Here you use container in your useEffect, however since you are also setting container state in this effect you cannot put it as a dependency or else you will get an infinite loop (the effect will run every time setContainer is called).

I think this may be an acceptable time to use // eslint-disable-line

useEffect(() => {       
   if (container) {
      const newContainer = createContainer(zIndex);
      getPortalParent().replaceWith(container, newContainer);
      setContainer(newContainer);
   }
// eslint-disable-line
}, [zIndex]);

There may be other examples but you can figure out which useEffects require what dependancies.

Post a Comment for "React Useeffect Hook With Warning React-hooks/exhaustive-deps"