Q:

useEffect is missing a dependency, but when I add it I get a 'maximum update depth exceeded' error

I'm trying to wrap my head around using hooks and I'm running into a repeating problem.  In the example I've linked below, I have a useEffect hook that's sorting an array.  The sorting order is determined by a state value and I have a button that toggles that state value.
Everything is working that way I intended, the array is sorted when the component mounts, and then on the button click.
However, I'm getting a error from the linter that the array of values needs to be declared as a dependency in the useEffect hook.  If I do that, I get a 'Maximum update depth exceeded' error.  I'm unsure what to do, and I would appreciate any help!
Link to code
Thanks for taking a look, it really means a lot to me!

A:

It's not suprising - when You adding the values list in the dependency array, the useEffect will execute on every change of the value list - that leads to the infinite loop :) 
According to the previous answer of @norbitrial, hiding of the error will not resolve the things, becuase every dependency from scope MUST be declared in the dependencies array, avoiding it can lead to unexpected behaviours.
I would recommend to consider using useReducer in this situation. It will cause that logic of modifications of the dependency array can be moved out of the useEffect hooks' scope - and You will be not forced to attach it as a dependency of useEffect.

