useEffect alternate for Class Component - reactjs

Question

I just learned that in functional components I can use useEffect to keep an eye on any side effect (ex: when using localStorage) which makes sure my state is hooked up with the effect.
I want to have similar functionality in my class based Component for localStorage. How can I make sure that my state updates itself as soon as there is any change into the localStorage?

Answer 1

This is how I did it.
class Login extends Component {
constructor(props) {
super(props);
this.state = {
// Get value from localStorage or use default
isLoggedIn: localStorage.getItem('isLoggedIn') || 0
}
// Listen to storage event
window.addEventListener('storage', (e) => this.storageChanged(e));
// Bind this to storageChanged()
this.storageChanged = this.storageChanged.bind(this);
}
storageChanged(e) {
if(e.key === 'isLoggedIn') {
this.setState({isLoggedIn: e.newValue})
}
}
render() {
return <p>{this.state.isLoggedIn}</p>
}
}
That's how I could hook into the localStorage changes using class based component.

Answer 2

You can try a hook that check for localStorage changes like in the docs.
useEffect(() => {
function checkStorage(e){
if('keyStateYouWantToSync' == e.key && stateYouWantToSync != JSON.parse(e.newValue)){
setStateYouWantToSync(JSON.parse(e.newValue))
}
}
window.addEventListener('storage', checkStorage)
return () => window.removeEventListener('storage', checkStorage)
})
You can also change the key checking to what ever key you want to check.
Edit:
For class components
checkStorage = (e) => {
if('keyStateYouWantToSync' == e.key && this.state.stateYouWantToSync != JSON.parse(e.newValue)){
this.setState({stateYouWantToSync: JSON.parse(e.newValue)})
}
}
componentDidMount(){
window.addEventListener('storage', this.checkStorage)
}
componentWillUnmount(){
window.removeEventListener('storage', this.checkStorage)
}