my console.log() shows up twice in my chrome console

Question

when I put a console.log() in my render method in my class base Component my console.log() shows up twice in my chrome console, but I haven't this issue in my firefox console

My Component:

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchPosts } from "../actions";

export class PostList extends Component {
  componentDidMount() {
    this.props.fetchPosts();
  }

  render() {
    console.log(this.props.posts);
    return (
      <div>
        <h1>Post List</h1>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  posts: state.posts,
});

export default connect(mapStateToProps, { fetchPosts })(PostList);

Answer 1

A component is re-render when something changes.

The fetchPosts method may likely trigger that re-render.

Answer 2

It's likely because react now wraps your application in <React.StrictMode> , strict mode combined with the browser having react dev tools will starts calling components multiple times for debugging purposes. This won't happen in a production build.