My React app works fine in Chrome but not in firefox

user_10786415 0
Viewed 3242

I have a react-redux app that is running fine in chrome but in firefox it is showing blank screen.

For the same request in the network tab, firefox is giving status code 304 whereas in chrome it's 200.

As I am using the redux store,I have used below code for creating redux store.

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer,composeEnhancers(applyMiddleware(thunk)));

If I use below code for creating composeEnhancers then it's value is coming "undefined " and code fails in firefox .But this also works fine in chrome.

const composeEnhancers = process.env.NODE_ENV === 'development'? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ :null || compose;

Firefox error:

Download the React DevTools for a better development experience

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

react-redux reactjs
1 Answers

This warning(s) usually shows up when this.setState() is called in a component even though the component got already unmounted.

The unmounting can happen for different cases:

  • You don’t render a component anymore due to React’s conditional rendering.
  • You navigate away from a component by using a library such as React Router.

When not rendering the component anymore, it can still happen that this.setState() is called if you have done asynchronous business logic in your component and updated the local state of the component afterward.

The following cases are the most common causes:

  • You made an asynchronous request to an API, the request (e.g. Promise) isn’t resolved yet, but you unmount the component.
  • Then the request resolves, this.setState() is called to set the new state, but it hits an unmounted component.
  • You have a listener in your component, but didn’t remove it on componentWillUnmount(). * Then the listener may be triggered when the component unmounted.
  • You have an interval (e.g. setInterval) set up in your component and within the interval this.setState() is called.
  • If you forgot to remove the interval on componentWillUnmount(), you will update state on an unmounted component again.
class News extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    axios
      .get('https://hn.algolia.com/api/v1/search?query=react')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

Try implementing this approach.

P.S: Different browsers behave differently for .js and .css functions. Try using more cross-browsers functions.

user_53037970
Related