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
The effect closed over both `stockCount` and `settings` inside its body, but only `stockCount` appeared in the dependency array. When `handleTighten` or `handleLoosen` updated `settings` alone, the render that followed produced a new callback closing over the current settings - but since `stockCount` hadn't changed, React compared the dependency list, saw no difference, and discarded the callback without calling it, leaving the alert text frozen from the last time the effect actually ran. Adding `settings` to the dependency array makes a new `settings` reference count as a genuine change on its own, so the effect runs every time either piece of state updates. Because `handleTighten` and `handleLoosen` each return a brand-new object rather than mutating the existing one, every call produces a new reference that `Object.is` detects as changed, and the effect fires immediately with the current threshold and label.