[4.5.0rc0] Clientside callback runs with a stale Input value after set_props on page load (regression from 4.4.1, clientside callbacks now exempt from the HTTP-slot budget) #4013

Activity

1. camdecoster commented on Sep 28, 2026

   

   camdecoster

   on Sep 28, 2026

   Contributor

   More actions

   Thanks for the report! This will probably be hard to diagnose without reproduction steps. Would you be able to take another attempt at creating a "reduced app" that shows this problem?
2. camdecoster

   added

   bugsomething brokensomething broken

   P2considered for next cycleconsidered for next cycle

   size: 3

   plotly-internal

   on Sep 28, 2026
3. biyani701 commented on Sep 29, 2026

   

   biyani701

   on Sep 29, 2026

   Author

   More actions

   Here's a reduced app that reproduces it. It's standalone: only dash is needed, no DMC or FastAPI.

   Correction to my original report: this isn't really a new bug in 4.5. The same stale read happens on 4.4.1 once the page isn't under load. In 4.4.1, the 12-slot HTTP budget happened to hide it, and #3931 removes that cover for clientside callbacks.

   app.py

   """Minimal repro: clientside callback runs with a stale Input after set_props (dash 4.5.0rc0)."""
   import os
   import time
   
   from dash import Dash, Input, Output, State, callback, clientside_callback, dcc, html
   
   N_SLOW = int(os.environ.get("N_SLOW", "20"))  # enough server callbacks at load to fill the renderer's 12 HTTP slots
   
   app = Dash(__name__, suppress_callback_exceptions=True)
   app.layout = html.Div([dcc.Location(id="url", refresh="callback-nav"), html.Div(id="page")])
   
   
   def page():
       return html.Div([
           dcc.Store(id="tab-from-url"),
           dcc.Tabs(id="tabs", value="a", children=[dcc.Tab(label="A", value="a"), dcc.Tab(label="B", value="b")]),
           *[html.Div(id=f"slow-{i}") for i in range(N_SLOW)],
       ])
   
   
   # Router: the tabs arrive in a chunk returned by a callback (a hand-rolled multi-page app).
   @callback(Output("page", "children"), Input("url", "pathname"))
   def route(_):
       return page()
   
   
   # Slow server callbacks on load, filling the HTTP slots.
   for i in range(N_SLOW):
       @callback(Output(f"slow-{i}", "children"), Input("tab-from-url", "id"))
       def slow(_, i=i):
           time.sleep(1.5)
           return f"slow {i}"
   
   
   # Timestamped log, kept in window.__log and printed to the console.
   app.index_string = app.index_string.replace("{%scripts%}", """<script>
       window.__log = [];
       window.log = function (msg) { msg = Math.round(performance.now()) + 'ms ' + msg; window.__log.push(msg); console.log(msg); };
   </script>{%scripts%}""")
   
   # URL -> tabs
   clientside_callback(
       """function (search) {
           var m = /tab=(\\w+)/.exec(search || '');
           var tab = m ? m[1] : 'a';
           log('readUrl search=' + search + ' -> set_props(tabs.value=' + tab + ')');
           window.dash_clientside.set_props('tabs', {value: tab});
           return tab;
       }""",
       Output("tab-from-url", "data"),
       Input("url", "search"),
   )
   
   # tabs -> URL
   clientside_callback(
       """function (tab, search) {
           log('tabSearch tab=' + tab + ' search=' + search);
           if (window.__log.length > 30) { return window.dash_clientside.no_update; }  // loop brake
           var next = tab === 'a' ? '' : '?tab=' + tab;
           return next === (search || '') ? window.dash_clientside.no_update : next;
       }""",
       Output("url", "search", allow_duplicate=True),
       Input("tabs", "value"),
       State("url", "search"),
       prevent_initial_call=True,
   )
   
   if __name__ == "__main__":
       app.run(port=int(os.environ.get("PORT", "8050")), debug=os.environ.get("DEBUG") == "1")

   Steps

   1. pip install dash==4.5.0rc0 and run python app.py.
   2. Open http://127.0.0.1:8050/?tab=b and watch the console.

   Expected: URL stays ?tab=b and tab B is selected.

   Actual (4.5.0rc0): readUrl and tabSearch ping-pong until the loop brake in tabSearch kicks in (without the brake the browser tab eventually crashes). The URL ends up empty and tab A is selected:

   376ms readUrl search=?tab=b -> set_props(tabs.value=b)
   379ms tabSearch tab=a search=?tab=b     <-- stale: set_props already wrote "b"
   403ms tabSearch tab=b search=
   403ms readUrl search= -> set_props(tabs.value=a)
   414ms tabSearch tab=a search=?tab=b
   ... repeats
   

   Results (Chrome, headless via Playwright)

   	N_SLOW=20 (default)	N_SLOW=0
   4.4.1	settles: ?tab=b, B selected	loops
   4.5.0rc0	loops	loops

   The stale tabSearch tab=a run shows up in every cell, including 4.4.1 with N_SLOW=20. There, it's just that the later runs happen to converge.

   What seems to be going on

   tabs is inserted inside a chunk returned by the router callback, and its Output (url.search) sits outside that chunk. So tabSearch is triggered by the insertion even though it has prevent_initial_call=True, which is documented behavior. readUrl makes its initial call at the same time. Both are clientside and ready, so the prioritized-callbacks observer picks them in the same batch. Every callback in the batch is then executed against the layout snapshot the observer read at the start:

   // observers/prioritizedCallbacks.ts
   const {callbacks: {executing, watched}, config, hooks, layout, paths, appLifecycle} = getState();
   ...
   map(cb => executeCallback(cb, config, hooks, paths, layout, getStash(cb, paths), dispatch, getState), pickedSyncCallbacks)

   readUrl runs first and its set_props updates the store. tabSearch then runs fillVals against the old snapshot and gets "a". set_props also re-triggers tabSearch, which then runs a second time with "b". That's why it's seen twice.

   In 4.4.1 under load, the 12-slot budget meant tabSearch usually landed in a later observer pass, after set_props, so it read a fresh layout. In 4.5 clientside callbacks are exempt from the budget, so they now always share the batch.

   Candidate fix (tested locally)

   Read the layout fresh for each callback instead of using the observer's snapshot. In the built dash_renderer.dev.js I made this one-line change in the sync branch:

   - executeCallback(cb, config, hooks, paths, layout, getStash(cb, paths), dispatch, getState)
   + executeCallback(cb, config, hooks, paths, getState().layout, getStash(cb, paths), dispatch, getState)

   With that change, 4.5.0rc0 settles in both columns: 3 runs, no stale value, ?tab=b kept. paths is probably worth reading fresh as well, and the deferred/async branch passes the same captured layout, so it may need the same change.

   For comparison, putting clientside callbacks back under the budget (removing !cb.callback.clientside_function && from usesRequestSlot) only fixes the N_SLOW=20 case. N_SLOW=0 still loops, same as 4.4.1.

   Environment: Chrome 153, Python 3.12, Flask backend (also seen with FastAPI in the full app).
4. camdecoster commented on Sep 29, 2026

   

   camdecoster

   on Sep 29, 2026

   Contributor

   More actions

   Thanks for that! Our team will take a look.