React - What's the best practice to refresh a list of data after adding a new element there? : <p>I am building a simple todo list. I have a form for adding a new todo list item and under it are listed all items in the todo list. When I add a new item through a form, I want to refresh the list of existing todo list items.</p>

<p>Items.jsx:</p>

<pre><code>class Items extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            loading: true
       };
    }

    componentDidMount() {
        axios.get('/api/v1/items')
            .then(response =&gt; {
            this.setState({ items: response.data, loading: false });
        });
        console.log('state.items: '+this.state.items);
    }

    componentDidUpdate() {
        axios.get('/api/v1/items')
            .then(response =&gt; {
            this.setState({ items: response.data, loading: false });
        });
        console.log('componentDidUpdate: '+this.state.items);
    }

    render() {
        return (
            &lt;ItemSE.Group&gt;
            {
                this.state.items.map(item =&gt; {
                    return &lt;Item key={item.id} data={item} /&gt;
                })
            }
            &lt;/ItemSE.Group&gt;
        );
    }
}

export default Items
</code></pre>

<p>App.jsx:</p>

<pre><code>class App extends Component {
    constructor () {
        super();
        this.state = {
          item_msg: ''
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleSubmit(e){ 
        e.preventDefault();

        console.log(this.state.item_msg);  
        axios.post('/api/v1/items', {
            item: this.state.item_msg
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    handleInputChange(e) {
        this.setState({ item_msg: e.target.value });
        console.log('item_msg: '+this.state.item_msg);
    }

    render() {
        return (
            &lt;div className="App"&gt;
                &lt;MainHeaderr /&gt;
                &lt;Container&gt;
                    &lt;NewItemForm 
                        send_form={this.handleSubmit.bind(this)} 
                        onInputChange={this.handleInputChange} 
                        typed={this.state.item_msg} /&gt;
                    &lt;Items /&gt;
                &lt;/Container&gt;
            &lt;/div&gt;
        );
    }
}

export default App;
</code></pre>

<p>I added <code>componentDidUpdate</code> to the <code>Items.jsx</code> file - when I add a new todo list, this new todo will indeed display immediately to the list - that's cool. However, I don't really feel this is the best practice.
When I look to the JS console, I see there hundreds of <code>componentDidUpdate:</code>.</p>

<p>Thus, what's the best way to refresh a list to todos?</p>
