2

I am working on a react app where users can register themselves and fill in their details. Post registration, the user can log in and add more details or edit them as per his/her need. The issue i am facing here is while testing the app on a device, the functionalities are working fine and details are getting stored too. But, when a user signs out and another user logs in, the details filled by user1 are visible in user2's account too. Nothing gets over-written, just the screen where user1 fills his details and when user2 opens the same screen with his account, the details remain uncleared.

I am not able to understand whether this is a cache issue or something else. Being totally new to react, i am not able to figure out what is going wrong

Rishika
  • 371
  • 2
  • 8
  • 18
  • You must provide more information about your stack, plugins, etc. Does it happen if you do that process but opening the second user in an anonymous tab? Are you using any `localStorage` functions or plugins? You probably have to cleanup on `logout` or right before setting the new user's information.. Or if you have any back-end/APIs for handling users you might have to clean the cookies. Too many possibilities. – enapupe Jan 30 '17 at 11:51
  • @enapupe I am not facing this issue on a browser.. i am facing this issue while testing in my device. So there is no chance of opening a second user in an anonymous tab. It is similar to any app where one user logs out and other user logs in. I am using localstorage functions. Can you guide me on "cleanup" on logout? – Rishika Jan 30 '17 at 12:21
  • 1
    You could just create a root-reducer that handlers action type == LOGOUT. Then, when you logout an user you trigger that action. Check http://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store – enapupe Jan 30 '17 at 17:48

1 Answers1

1

Why not take advantage of React's lifecycle methods? In particular, something like componentWillUnmount should take care of much of this cleanup. Per the docs:

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount.

If you're keeping track of application data through state on your components, resetting your state in componentWillUnmount() should ensure that no stale data hangs around for the next render. For example:

componentWillUnmount() {
   this.setState({
     // reset your properties to their values in the constructor()
   });
}

If you're using Redux, this would be a great place to dispatch an action to reset your reducer, i.e. by passing it the initialApplicationState or, as Dan Abramov suggests in this SO post, passing a state of undefined (which will then grab the initialApplicationState for you from the reducer).

Parker Ziegler
  • 980
  • 6
  • 13