A settings panel lets the user toggle between light and dark themes. The background color responds to each click but the label that names the active mode does not.
Click Toggle Theme - the background changes correctly but the mode label keeps reading "Light Mode" regardless of which theme is currently active.
Think about when the value you are reading was set and whether anything in the component can change it after the first render.
Think about when the value you are reading was set and whether anything in the component can change it after the first render.
Why this fixes it
useRef(initialValue) runs once at mount and captures whatever value is passed to it at that moment. On every subsequent render, modeLabel.current still holds the string from the first render because refs are plain mutable containers that React never reads from or writes to during its rendering pass — changing theme state has no effect on the existing ref. Replacing useRef with a plain const means the expression re-evaluates on every render using the current value of theme, so the label is always in sync with the active theme without any extra state or effect.