title: why componentdidmount called two times
body: <p>I have React Component in <strong>componentDidMount</strong> fetch data from the server. The issue is <strong>componentDidMount</strong> called twice also the API called twice. I have a view increment API like youtube video views increment twice in the database because of twice API calling.</p>
  <pre><code>class SingleVideoPlay extends React.Component {
      constructor(props) {
          super(props);
          this.player = React.createRef();
      }
      state = {
          autoPlay: true,
          relatedVideos: [],
          video: null,
          user: null,
          comments: [],
          commentInput: {
              value: '',
              touch: false,
              error: false
          },
          following: false,
          tab: 'comments'
      };
      _Mounted = false;
  
      componentDidMount() {
          this._Mounted = true;
          if (this._Mounted) {
              const videoId = this.props.match.params.id;
              this.getVideoDetails(videoId);
          }
      }
      componentWillUnmount() {
          this._Mounted = false;
          try {
              clearInterval(this.state.videoInterval);
              this.props.videoEditUrl('');
          } catch (error) {}
      }
      captureVideoTime = async () =&gt; {
          const { video } = this.state;
          const result = await updateWatchTime({
              id: video._id,
              time: 1
          });
          if (result.status === 200) {
              const updateVideo = {
                  ...video,
                  secondsWatched: video.secondsWatched + 1
              };
              this.setState({ video: updateVideo });
          }
      };
      videoEnded = () =&gt; {
          clearInterval(this.state.videoInterval);
      };
      videoPause = () =&gt; {
          clearInterval(this.state.videoInterval);
      };
      loadVideo = () =&gt; {
          clearInterval(this.state.videoInterval);
      };
      playingVideo = () =&gt; {
          const interval = setInterval(this.captureVideoTime, 1000);
          this.setState({ videoInterval: interval });
      };
      
      getVideoDetails = async (videoId) =&gt; {
          const video = await getVideo(videoId);
  
          if (video.status === 200) {
              let response = video.data;
              if (this.props.userId)
                  if (response.user._id === this.props.userId._id)
                      this.props.videoEditUrl(`/video/edit/${response.media._id}`);
              this.setState({
                  relatedVideos: response.videos.docs,
                  video: response.media,
                  user: response.user
              });
              this.checkIsFollowing();
              this.updateVideoStat(response.media._id);
          }
      };
      updateVideoStat = async (id) =&gt; videoView(id);
      checkIsFollowing = async () =&gt; {
          const { userId } = this.props;
          const { video } = this.state;
          if (userId &amp;&amp; video) {
              const response = await isFollow({
                  follower: userId._id,
                  following: video._id
              });
              if (response) {
                  this.setState({ following: response.following });
              }
          }
      };
      addOrRemoveFollowing = async () =&gt; {
          this.checkIsFollowing();
          const { following, video } = this.state;
          const { userId } = this.props;
          if (userId) {
              if (following) {
                  const response = await removeFollow({
                      follower: userId._id,
                      following: video._id
                  });
                  this.setState({ following: false });
              } else {
                  const response = await addFollow({
                      follower: userId._id,
                      following: video._id
                  });
                  this.setState({ following: true });
              }
          }
      };
  
      submitCommentHandler = async (event) =&gt; {
          const { userId } = this.props;
          event.preventDefault();
          if (userId) {
              const result = await saveComment({
                  mediaId: this.state.video._id,
                  parentId: '0',
                  userID: userId._id,
                  userName: userId.username,
                  comment: this.state.commentInput.value
              });
              console.log(result);
              if (result.status === 200) {
                  this.getVideoComments();
                  this.setState({ commentInput: { value: '', touch: false, error: false } });
              }
          }
      };
  
      render() {
          const { autoPlay, relatedVideos, video, user, comments, commentInput, following, tab } = this.state;
          const { userId } = this.props;
          return (
              &lt;div className=&quot;container-fluid&quot;&gt;
          
              some coponents
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; ({
      userId: state.auth.user
  });
  
  export default connect(mapStateToProps, { videoEditUrl })(SingleVideoPlay);
  </code></pre>
  <p>I don't know why componentDidMount called two times alse it shows memmory lecage issue.</p>
  <p><strong>How to Fix it.</strong></p>