Why react show that components update but console not?

Question

I create a simple react redux app. In Google chrome react dev tools I check "Highlight Updates". And then click on any button it shows that all components updated, but console message in "AddButton" doesn't show anything. Mistakes console, react dev tool or me?

// 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 iusto maiores natus nostrum placeat quisquam similique tempore veniam voluptatum.

Its possible that AddButton never updates and hence componentDidUpdate is never called. Try moving it in: ComponentDidMount or getDerivedStateFromProps dependng on your requirement. From what I see, It's ListContainer Component that should update on button click. — Mobeen
I'll try to undersend how it all works, to further debug. If react highlight is saying false, that means need to find something else. — Vla Mai

Shubham Khatri Shubham Khatri · Accepted Answer · 2019-02-22T06:08:18

For the AddButton component, the mapStateToProps is null. Also is isn't receiving any props from the parent and when you click the button, it updates the value in store but due to that update, the App component doesn't re-render because its not subscribing to any state update and so AddButton wouldn't re-render due to this.

Again since it is also not subscibing to any update in store, it wouldn't re-render because of the store update too.

The components that will re-render are ListContainer and ListItem since ListContainer subscribes to store updates and hence it will update causing all its children to re-render provided they are not implementing shouldComponentUpdate and extending React.PureComponent(matters only when the props to the component aren't changing )

Why react show that components update but console not?

1 Answers