React and Redux componentWillMount and componentDidMount. Vs subscribe to prevent memory leaks

Question

I'm having a problem with an application that uses the Provider approach to update the state through the whole app. The browser's console throws a warning because a react component that is redirecting to another one using react-router-dom on a click event, is also dispatching an action while the second one is already mounted.

index.js:1 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.

This is the code.The main components are Details and Results, when I switch from one to another in the browser the warning shows up.

https://github.com/juampablotoledo/prueba-redux.git

This is my index.js

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Results from "./components/results";
import Details from "./components/details";
import store from "./redux/store";

const Root = (
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path="/results">
                    <Results />
                </Route>
                <Route path="/details/:itemId">
                    <Details />
                </Route>
                <Redirect from="/" to="/results" />
            </Switch>
        </BrowserRouter>
    </Provider>
);

ReactDom.render(Root, document.getElementById("root"));

I've been reading several posts about unsubscribing actions to prevent issues like this, but I don't know if the Provider component can live alongside with subscribe.

Please include a [Minimal, Complete, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) code example *in your question*. Links to external resources tend to decay and change over time. The currently relevant code should be included here. — Drew Reese, Jan 01 '21 at 20:24

user2662251 · Answer 1 · 2021-01-01T21:54:33.103

I changed the component tree and it seems to work fine now.

The AppBar component was inside of both the Details component and the Results Component, and when react-router-dom was switching between them, the Autocomplete component (grandchild of AppBar) was mounting and unmounting in a milisecond every time.

A lot of the logic is happening inside Autocomplete, including action triggers and a couple querys to the global state, so it seems to be better to keep it loaded from start and always after.

I changed the index.js so the AppBar component can be rendered only once and to prevent the other components of mounting and unmounting the app logic while the user touches the UI.

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Results from "./components/results";
import Details from "./components/details";
import AppBar from "./components/appBar";

import store from "./redux/store";

const Root = (
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path="/results">
                    <AppBar />
                    <Results />
                </Route>
                <Route path="/details/:itemId">
                    <AppBar />
                    <Details />
                </Route>
                <Redirect from="/" to="/results" />
            </Switch>
        </BrowserRouter>
    </Provider>
);

Yes it is, but the solution wasn't as related as I thought to the Provider and the subscriber. I will make another question on this regard. Thanks! — user2662251, Jan 01 '21 at 22:02

React and Redux componentWillMount and componentDidMount. Vs subscribe to prevent memory leaks

1 Answers1