Unable to output dbc.Tabs with variable number of dbc.Tab

[tlauli]

Please fill out the below information as much as possible.

• dash version: 3.0.4
• dash-bootstrap-components version: 2.0.2
• components affected by bug: dbc.Tabs

What is happening?

In provided MWE, changing the value from 1 to 2 leads to an error.

What should be happening?

There should be no error, and the layout should be updated with dbc.Tabs container with 2 dbc.Tabs.
dcc.Tabs does not have this problem.
Adding a randomly generated id to the dbc.Tabs prevents the error from occuring.

Code

import dash_bootstrap_components as dbc
from dash import Dash, Input, Output, callback, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dbc.Select(id="input", options=[1, 2, 3], value=1),
        html.Div(id="output"),
    ]
)


@callback(
    Output("output", "children"),
    Input("input", "value"),
)
def update_output(value):
    tabs = dbc.Tabs([dbc.Tab(label=f"Tab {i}") for i in range(int(value))])
    return tabs


app.run(debug=True)

Error messages

Error: Rendered more hooks than during the previous render.

    at updateWorkInProgressHook (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@18.v3_0_4m1746015807.3.1.js:15698:15)

    at updateRef (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@18.v3_0_4m1746015807.3.1.js:16246:16)

    at Object.useRef (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@18.v3_0_4m1746015807.3.1.js:17097:16)

    at useRef (http://localhost:8050/_dash-component-suites/dash/deps/react@18.v3_0_4m1746015807.3.1.js:1620:23)

    at useSyncExternalStoreWithSelector (http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v3_0_4m1746015807.dev.js:74244:17)

    at useSelector (http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v3_0_4m1746015807.dev.js:71973:25)

    at Object.useLoading (http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v3_0_4m1746015807.dev.js:84213:68)

    at Nt (http://localhost:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v2_0_2m1746015811.min.js:2:39376)

    at lm (http://localhost:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v2_0_2m1746015811.min.js:2:217311)

    at renderWithHooks (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@18.v3_0_4m1746015807.3.1.js:15496:20)

[BSd3v]

Hey @tcbegley,

You should be able to drop the pulling of the children component path, this might be the issue here. Just use the props, as the Tabs are already listening to children updates, they should be updated.

[tcbegley]

Thanks for the report @tlauli and for the suggestion @BSd3v, I will look into this asap

[BSd3v]

I tried to poke around, but the repo isn't like other dash repos. XD

[BSd3v]

Hey @tcbegley, should this be closed now?

[tcbegley]

Yes!