React Hooks useEffect, adding dependency triggers infinite loop

Question

Inside of my useEffect, I have a props dependency (setIsValid). When I add this dependency to the useEffect, it lands in an infinite loop.

Parent when Calling Child Component:

const setIsValid = (bool) => {
  const tmpStateCopy = Object.assign({}, state);
  tmpStateCopy.isValid = bool;

  setState(tmpStateCopy);
};

return <Child
  setIsValid={setIsValid}
/>

In the Child Component:

const { setIsValid } = props;

const [state, setState] = useState({
  transformations: [],
  duplicateIndexes: []
});

const { transformations, duplicateIndexes } = state;

useEffect(() => {
  const invalids = transformations.find(x => (x.value === '' || x.replaceWith === ''));
  const hasDuplicates = duplicateIndexes.length > 0;
  const isValid = ((invalids === undefined) && (transformations.length > 0) && !hasDuplicates);

  setIsValid(isValid)

  console.log('got triggered');
}, [state]);

This way the code works but I always get a warning.

What I want is, that the validation is always triggered when one of the values inside the state changes (transformations / duplicateIndexes).

By adding the setIsValid() func from the props, it runs infinitely.

The Warning looks like this:

./src/components/UI/integrationBuilder/layoutElements/transformer/modules/ifModules/ifModule.js
  Line 103:  React Hook useEffect has missing dependencies: 'duplicateIndexes.length', 'setIsValid', and 'transformations'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

My question is, how can I keep the same logic without getting this warning?

Shubham Khatri · Accepted Answer · 2019-06-11 18:00:34Z

4

Since, when state changes you will call the effect. transformations and duplicateIndexes will already be considered for. To avoid the warning, you can move the destructure within useEffect

const { setIsValid } = props;

const [state, setState] = useState({
  transformations: [],
  duplicateIndexes: []
});



useEffect(() => {
  const { transformations, duplicateIndexes } = state;
  const invalids = transformations.find(x => (x.value === '' || x.replaceWith === ''));
  const hasDuplicates = duplicateIndexes.length > 0;
  const isValid = ((invalids === undefined) && (transformations.length > 0) && !hasDuplicates);

  setIsValid(isValid)

  console.log('got triggered');
}, [state]);

Also regarding setIsValid as a dependency to useEffect, you must not do that since a new function for it is created on every render and it will cause the useEffect to to run again and again unles you refactor your code a bit.

const setIsValid = useCallback((bool) => {
  setState(prev =>  Object.assign({}, prev, {isValid: bool});
}, []);

and now you can set setIsValid as a dependency.

edited Jun 11, 2019 at 18:00

answered Jun 11, 2019 at 12:55

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

3 Comments

Emre Over a year ago

Thanks for the fast response This is correct, but I still got the issue with the prop 'setIsValid' since he still demands this as a dependency. Any Ideas how I could go around this?

Shubham Khatri Over a year ago

Updated my answer

Avin Kavish Over a year ago

You could also add props.setIsValid as a dependency directly without destructuring.

Collectives™ on Stack Overflow

React Hooks useEffect, adding dependency triggers infinite loop

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related