dash component Interval property n_intervals value shows differently in callback - callback

Question

I have this short code that use the dcc.Interval component to update a text in the callback, where I tried to print out the value of the n_intervals property.
from dash import Dash, html, dcc, Input, Output
app = Dash()
dccinterval = dcc.Interval(
id='interval-component',
interval=1000,
n_intervals=0
)
app.layout = html.Div(
children=[
html.Div(id='live-update-text'),
dccinterval
]
)
#app.callback(Output('live-update-text', 'children'),
Input(dccinterval, 'n_intervals'))
def update_message(n):
print('current interval in update_message: ', dccinterval.n_intervals)
print('current n in update_message: ', n)
return 'Message: ' + str(n)
if __name__ == '__main__':
app.run_server(debug=True, port=8058)
Here is the output:
current interval in update_message: 0
current n in update_message: 0
current interval in update_message: 0
current n in update_message: 1
current interval in update_message: 0
current n in update_message: 2
current interval in update_message: 0
current n in update_message: 3
.
.
.
As you might see that the value of n_intervals got via the Input is changing correctly, but the value got directly from the interval component always stays at 0. I am wondering why. Can someone please help me with this? The reason I need to figure this out is that in my application when I tried to change the n_intervals’ value via component fails. That is, when I tried to set the value by doing dccinterval.n_intervals = a number, it does not work.
Thank you very much for any comments!

Answer 1

dccinterval.n_intervals is showing up strangely because that's not the correct way to use the interval component. The other way, using n, which is the function argument representing the interval from the Input, is the correct way. However, you've defined your Input a bit incorrectly. Rather than referencing the variable for the component, which is dccinterval, you need to reference the id of that component, like this:
Input('interval-component', 'n_intervals')
If you want to update the interval's value, you need to set up a callback that uses it as an Output like this:
Output('interval-component', 'n_intervals')
and the function will return whichever value you want to update the interval to.
Edit:
So, the reason the wrong way doesn't work is because the variable you declare in the layout, dccinterval in this case, doesn't contain all of the details once the app is running. The callback function's argument, n in this case, has the right info because it has been updated through Dash. This is related to how Dash works, and how - more deeply - React works under the hood.