[BUG] Weird component redraw issue in dash 2.16
CNFeffery opened this issue · 2 comments
CNFeffery commented
Consider the following demo component:
import { useEffect } from 'react';
import PropTypes from 'prop-types';
const DemoComponent = (props) => {
useEffect(() => {
console.log('========================')
console.log('DemoComponent is redrawning');
})
return <div >DemoComponent</div>;
}
DemoComponent.propTypes = {
/**
* Component id.
*/
id: PropTypes.string,
loading_state: PropTypes.shape({
/**
* Determines if the component is loading or not
*/
is_loading: PropTypes.bool,
/**
* Holds which property is loading
*/
prop_name: PropTypes.string,
/**
* Holds the name of the component that is loading
*/
component_name: PropTypes.string
}),
/**
* Dash-assigned callback that should be called to report property changes
* to Dash, to make them available for callbacks.
*/
setProps: PropTypes.func
};
DemoComponent.defaultProps = {
}
export default DemoComponent;
In the following case, useEffect is executed a lot more times in 2.16
than 2.15
:
app.layout = html.Div(
[
'Dash: '+dash.__version__,
html.Br(),
html.Button('test', id='input'),
html.Div(
DemoComponent(),
id='output'
)
],
style={
'padding': 50
}
)
@app.callback(
Output('output', 'children'),
Input('input', 'n_clicks'),
prevent_initial_call=True
)
def demo(n_clicks):
return DemoComponent()
if __name__ == '__main__':
app.run(debug=True)
in 2.15
:
in 2.16
:
T4rk1n commented
Thanks for the report, I was able to identify the cause, I'll have a fix soon and add a test for redraws.
CNFeffery commented
The problem has been solved👍.