[BUG] Weird component redraw issue in dash 2.16

[Feffery]

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 @alexcjohnson

[Philippe Duval]

Thanks for the report, I was able to identify the cause, I'll have a fix soon and add a test for redraws.

[Feffery]

The problem has been solved👍.