React State gets persisted when a variable is used as the state

Question

When I used a variable for one of the keys in the state (EG 1), the state get persisted even after the component has unmounted.

Such a problem does not occur if just placed the object in directly (EG 2)

I can't wrap my head around why is that so...

    const form = {
        foo: bar
    }

    class extends React.Component {
        state = {
             form: form
         }

        render() {...}
    }

    class extends React.Component {
        state = {
            form: {
                foo: bar
            }
        }
        render() {...}
    }

Answer 1

That variable is used for one of the values of the state, not as key.

By the way, the state persists because of JS.

In JS objects are passed by references, so when you do:

const form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: form
     }

    render() {...}
}

Whenever you will change the form (even through state), you are actually changing the global instance you defined above.

When you define a react component, that will be mounted and unmounted, but the code outside the class, will be executed once when importing the file.

That's why when you then mount again the component, you will find back the previous value of your form object, which you never cleared.

To turn around this issue, move all the logic to be init inside the component code (as static or constructor or componentDidMount etc...), or, in the componentWillUnmount , reset back to the initial state your global form variable, and you should see back your initial state when you will mount the component again.

Answer 2

React using a singleton module import.

While the Component you mounted will reconstruct each time you using it, the declaration happen once and share an instance of the module across all your application scope.

Everything set outside of the Component is not related to the React.Component Eco-system and will not be destructed after componentWillUnmount .

If the form variable is used as an abstract template for the state, you should spread it and follow the immutable approach as:

  const form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: {...form}
     }

    render() {...}
}

Answer 3

I try to answer. You declare a global variable with "window", and re-call inside a class that variable. I don't know if it works, but i resolve in the past when i try to convert a file in js to typescript.

window.form = {}
window.form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: window.form
     }

    render() {...}
}

class extends React.Component {
    state = {
        form: {
            foo: bar
        }
    }
    render() {...}
}