Why componentDidMount is getting called twice?

Have a look at below code snippet:

import React from 'react';
import {data} from '../data'
import MovieCard from './MovieCard'
import Navbar from './Navbar'
import { addMovies, setShowFavourites } from '../actions';

class App extends React.Component {

  componentDidMount() {
    const {store} = this.props;
    store.subscribe(() => {
      console.log("UPDATED");
      this.forceUpdate(); 
    });

    store.dispatch(addMovies(data)); 
    console.log("STATE", this.props.store.getState());
  }

  isMovieFavourite= (movie) => {
    const {favourites} = this.props.store.getState();
    const index = favourites.indexOf(movie);
    if(index !== -1) {
      // Found the movie
      return true;
    }
    return false;
  }

  onChangeTab = (val) => {
    this.props.store.dispatch(setShowFavourites(val))
  }

  render() {
    const {list, favourites, showFavourites} = this.props.store.getState();
    console.log("RENDER", this.props.store.getState());
    const displayMovies = showFavourites ? favourites : list;
    return (
      <div className="App">
        <Navbar/>
        <div className='main'>
          <div className='tabs'>
            <div className={`tab ${showFavourites ? '' : 'active-tabs'}`} onClick={() => this.onChangeTab(false)}> Movies </div> 
            <div className={`tab ${showFavourites ? 'active-tabs' : ''}`} onClick={() => this.onChangeTab(true)}> Favourites </div>
          </div>

          <div className='list'>
            {displayMovies.map((movie, index) => {
              return <MovieCard 
                movie={movie}
                key={`movie-${index}`}
                dispatch={this.props.store.dispatch}
                isFavourite={this.isMovieFavourite(movie)}
              />
            })}
          </div>
          {displayMovies.length === 0 
            ? <div className='no-movies'>No Movies to display!</div> 
            : null
          } 
        </div>
      </div>
    );
  }
}

In this App component, I am getting redux store as props. Now, as per my understanding, the sequence of the consoles should be:

RENDER
UPDATED
STATE
RENDER

But the actual sequence is:

RENDER
RENDER // This render is coming from VM2131 installHook.js:1861 but the value is the same as above
UPDATED
STATE
UPDATED
UPDATED
STATE
RENDER
RENDER // This render is coming from VM2131 installHook.js:1861 but the value is the same as above

I am not able to figure out why it is happening. Ideally, componentDidMount should be called only once after the initial render.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/aYqlT6Q