A stock alert panel watches the current stock count against an alert threshold and label stored together in a settings object. Changing the threshold settings should immediately change which alert message is shown, independent of whether the stock count itself has moved.
Click Tighten to Critical - the alert text does not change. Click Loosen to Watch afterward - it still does not change, even though the threshold settings keep updating underneath it
The effect already reacts correctly to one piece of state - does it react to everything it reads from inside its body?
The effect already reacts correctly to one piece of state - does it react to everything it reads from inside its body?
Why this fixes it
A fresh effect callback is created on every render regardless of the dependency array - the array only controls whether React actually calls that callback, not what values it closes over. The effect reads both stockCount and settings, but only stockCount is listed. When Tighten or Loosen update settings alone, the render that follows produces a new callback that already closes over the current settings - but since stockCount didn't change, React compares the dependency list, sees no difference, and discards that callback without calling it. The alert text from the last successful run stays on screen, no matter how many times settings changes, as long as stockCount itself never moves. This is not the same as an effect with an empty dependency array freezing forever - it would correctly pick up the latest settings the moment stockCount changes for any reason, since the next callback it does call already has current values. The bug is specifically a blind spot for whichever piece of state isn't listed, not a permanent freeze. Adding settings to the dependency array makes a new settings reference count as a real change on its own, so the effect runs immediately every time either piece of state updates.