mapStateToProps causes strange warning in top most element?

Question

I recently added a mapStateToProps in my top level element: As you can see I have two conditional renderings that might be causing the issue ...

... yes SO, this is mostly code, supposedly setState is causing a warning for some reason ...

App

  // ... snip ... inside React class
  render () {
    return (
      <div id='app_hold'>
        <F1Apex/>
        {this.props.App.current && <FastApp/>}
        {!this.props.App.current && <FaviconApp/>}          
      </div>
    )
  }
}


const mapStateToProps = state => {
  return {
    App: state.App
  }
}
const AppRedux = connect(mapStateToProps)(App);
ReactDOM.render(
  <Provider store={store}>
    <AppRedux></AppRedux>
  </Provider>
, document.getElementById('app'));

and am now getting a warning:

FastApp

import React from 'react';
import { connect } from 'react-redux';
import './FastApp.css';

class FastApp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      greeting: 'Hello ',
      time: '00:00:00 AM',
      image: 'none'
    }
  }
  componentDidMount () {
    this.setImageAndGreet(); // calls setState()
    this.showTime();  // calls setState()
  }

  // ... snip 

  render () {} // uses this.state which was set by this.setState()

You should connect your App to redux inside the App component, not in your index.js. There are race conditions in your code. — zilijonas, Jun 21 '19 at 07:19
You are using react's state somewhere (not redux state). The shared code will not help to find your issue — keul, Jun 21 '19 at 07:20
You are connecting your App component to redux before ReactDom actually renders your component. — zilijonas, Jun 21 '19 at 07:22
Your warning shows that the issue is located in your FastApp component, can you share it ? — Dyo, Jun 21 '19 at 07:23
@Sun-FE please, find where you are using `setState`. The issue is there. No issue in redux here — keul, Jun 21 '19 at 07:24

Dyo · Answer 1 · 2019-06-21T07:54:44.550

You're probably doing an async operation in setImageAndGreet or showTime methods, then updating the state.

The issue is that your FastApp component mounts, launches the async methods then unmounts before the promises are resolved because App.current's value have switched to false in that time.

To resolve this you have to cancel your async operations in componentWillUnmount method of FastApp, or move the logic in the parent component or in redux.

I recommend to read this post about how to cancel a fetch call in componentWillUnmount

Edit: Here's how to cancel setTimeout :

componentDidMount() {
    // Timer declaration
    this.myTimer = setTimeout(() => {
      this.setState({ someState: 'someValue' });
      this.myTimer = 0;
    }, 1000);
  };

  componentWillUnmount() {
    // Cancel timer if exists
    if (this.myTimer) {
        clearTimeout(this.myTimer);
        this.myTimer = 0;
    }
  };

If you use setTimeout every second you must use setInterval instead, example :

componentDidMount() {
    // Timer declaration
    this.myTimer = setInterval(() => {
      this.setState({ someState: 'someValue' });
    }, 1000);
  };

  componentWillUnmount() {
    clearInterval(this.myTimer);
  };

Is is a setTimeout that fires every second ... did not really need that warning. — , Jun 21 '19 at 07:42
annoying I can just cancel it in the unmount ... did not realize that conditional render caused an unmount ... — , Jun 21 '19 at 07:43

mapStateToProps causes strange warning in top most element?

1 Answers1