Learn TypeScript 3 by Building Web Applications

Handling side-effects with the useEffect hook

This hook is the functional counterpart to the React lifecycle methods of class components. The useEffect hook enables Functional Components to define logic that should execute after the component has been rendered/re-rendered.

Before we explain further, let's look at an example:

import React, {useState, useEffect} from 'react'; 
 
export function Switch(props) { 
    const [currentSwitchStatus, switchStatus] = useState(false); 
 
    useEffect(() => { 
        alert('The switch has been activated. Hopefully, this was not         by mistake :)'); 
    }); 
 
    return ( 
        <div> 
            <span>The switch is currently: {currentSwitchStatus? 'ON':             'OFF'} </span> 
            <button onClick={() =>             switchStatus(!currentSwitchStatus)}>Change the value! </button> ...