useEffect alternate for Class Component

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.