Mengapa reaksi menunjukkan bahwa komponen diperbarui tetapi konsol tidak?

Saya membuat aplikasi reaksi redux sederhana. Di alat dev reaksi Google chrome saya mencentang "Pembaruan Sorotan". Dan kemudian klik tombol mana saja yang menunjukkan bahwa semua komponen diperbarui, tetapi pesan konsol di "AddButton" tidak menunjukkan apa pun. Konsol kesalahan, alat pengembang reaksi atau saya?

// index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import { Provider } from "react-redux";
import { createStore } from "redux";

const reduser = (state = [], action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, { text: action.text }];
    case "REMOVE_ITEM":
      return state.filter(t => t.text !== action.text);
    default:
      return state;
  }
};

const store = createStore(
  reduser,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

//App.js

import React, { Component } from "react";
import AddButton from "./comps/AddButton";
import ListContainer from "./comps/ListContainer";

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Simple app</h1>
        <AddButton />
        <ListContainer />
      </div>
    );
  }
}

export default App;

//comps/AddButton.js
import React, { Component } from "react";
import { connect } from "react-redux";

const addItem = () => ({ type: "ADD_ITEM", text: Date.now() });

class AddButton extends Component {
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("Update");
  }

  render() {
    return <button onClick={this.props.addItem}>add button</button>;
  }
}

export default connect(
  null,
  { addItem }
)(AddButton);

//comps/ListContainer.js
import React, { Component } from "react";
import { connect } from "react-redux";
import ListItem from "./ListItem";

class ListContainer extends Component {
  render() {
    return (
      <ul>
        {this.props.items.map(t => (
          <ListItem key={t.text} text={t.text} />
        ))}
      </ul>
    );
  }
}

const mapStateToProps = state => {
  return { items: state };
};

export default connect(mapStateToProps)(ListContainer);

//comps/ListItem.js
import React from "react";
import { connect } from "react-redux";
const removeItem = text => ({ type: "REMOVE_ITEM", text });
const ListItem = props => {
  return (
    <li>
      <button onClick={() => props.removeItem(props.text)}>{props.text}</button>
    </li>
  );
};

export default connect(
  null,
  { removeItem }
)(ListItem);

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores corporis culpa deleniti dolore dolores eaque eligendi eum fugit in, itaque usto maiores natus nostrum placeat quisquam similique tempore venia voluptatum.