React Hook useEffect while adding a missing dependency goes into endless loop

Question

When I was going through this example https://codesandbox.io/s/miniformik-v2-with-react-hooks-io0me it tells me that there is a missing dependencies and VS Code automatically inserts the dependencies (validate function). And it crashes the app because of it going into endless loop.

If I put the validate function inside the useEffect, it might work but the validate function is used elsewhere. How are you going about this? Do you refactor the whole code that it doesn't have this situation or just ignore the exhaustive deps warning?

Honestly, I would be fine with putting just state.values as deps but rules of hook, exhaustive deps keeps complaining.

  React.useEffect(
    () => {
      if (validate) {
        const errors = validate(state.values);
        dispatch({ type: 'SET_ERRORS', payload: errors });
      }
    },
    [state.values]
  );

And I tried to solve it by calling validate inside useCallback but doesn't seem to work.

  const callbackValidate = useCallback((values) => {
      validate(values);
    },
    []
  );

Can you show us the validate function ?

Domino987
– Domino987

2019-08-17 05:42:30 +00:00
Commented Aug 17, 2019 at 5:42 — Domino987
– Domino987, Commented Aug 17, 2019 at 5:42
It is in the codesandbox I forked.

RedPandaz
– RedPandaz

2019-08-17 06:19:39 +00:00
Commented Aug 17, 2019 at 6:19 — RedPandaz
– RedPandaz, Commented Aug 17, 2019 at 6:19

Domino987 · Accepted Answer · 2019-08-17 05:54:23Z

3

so your flow looks like this:

You call the useFormik hook like this:

 useFormik({
    validate: values => {
      let errors = {};
      if (values.name !== 'admin') {
        errors.name = 'You are not allowed';
      }
      return errors;
    },
  });

This will creates a new validate function for every render. If you now put your validate function into the useEffect, it will have a different reference on every render, since it is a new function. This will trigger the validate function, which will trigger a new render and it starts again.

You have to either use a static function outside of your component or use useCallback, which will return a memoized function and its reference will only change if its parameters change.

Hope this helps.

answered Aug 17, 2019 at 5:54

Domino987

8,8642 gold badges17 silver badges40 bronze badges

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

2 Comments

RedPandaz Over a year ago

Thank you for your answer. I tried using useCallback (question updated) but couldn't get it working. Is something wrong with how I used useCallback?

Domino987 Over a year ago

Yes, the [] contain the variables which will trigger a new function. By putting the function into the brackets the useCallback will be called on every render. You have to put into the brackets the variables which will trigger a new run. Since the function will always be the same, just write [].

charliemei · Accepted Answer · 2019-08-17 06:50:48Z

0

when you use useCallback，you should ensure that the secound arguments you provide keep unchanged. You may create a new validate function for every render

answered Aug 17, 2019 at 6:50

charliemei

112 bronze badges

Comments

RedPandaz · Accepted Answer · 2019-08-17 09:46:55Z

0

This worked for me by preserving the function using useRef in each render.

  const validateRef = useRef();
  validateRef.current = () => validate(state.values);

  useEffect(() => {
    const errors = validateRef.current();
    dispatch({ type: "SET_ERRORS", payload: errors });
  }, [state.values]);

answered Aug 17, 2019 at 9:46

RedPandaz

6,3763 gold badges14 silver badges17 bronze badges

Collectives™ on Stack Overflow

React Hook useEffect while adding a missing dependency goes into endless loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related