Separate an effect’s connection lifetime from event-like logic that reads fresh values.
<div class="scene"><div class="connection"><span class="lamp"></span> ROOM CONNECTED <b id="connections">1 connection</b></div><div class="theme">theme <span id="theme">mint</span></div><div class="toast" id="toast">Connected with mint theme</div><div class="label">theme changes; connection count stays 1</div></div>.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.connection{display:flex;align-items:center;gap:6px;border:1px solid var(--accent);border-radius:8px;padding:.55em;font:600 clamp(12px,3vmin,15px) ui-monospace,monospace}.connection b{margin-left:auto}.lamp{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}.theme{margin:clamp(16px,7vmin,45px) auto;text-align:center}.theme span{border:1px solid var(--line);padding:.5em;border-radius:6px}.toast{background:var(--accent);color:var(--bg);padding:.5em;border-radius:7px;text-align:center;transition:background .3s}.label{text-align:center;margin-top:10px;font-size:.85em}const colors=["mint","amber","blue"];let n=0;function tick(){const i=n%3;document.getElementById("theme").textContent=colors[i];document.getElementById("toast").textContent="Connected with "+colors[i]+" theme";document.getElementById("toast").style.background=["var(--accent)","var(--accent-3)","var(--accent-2)"][i];n++}tick();setInterval(tick,950)useEffectEvent creates event-like logic called from an effect. It reads the latest props and state without becoming an effect dependency.
The demo changes the notification theme while the chat connection stays alive. It is not a blanket workaround for lint warnings and must be declared alongside its effect in the same component or hook.
Use it when a connection should persist but its event handler must read current theme or settings.