React Basics - useEffect Hook

Use case: You have a function you want called whenever the component mounts (only once, when the page loads) or you want that same function to run everytime an event fires on that page (always).

The useEffect hook allows a functional component to tap into lifecycle methods and other side effects in functional components like network requests, setting up event listeners and timeouts & intervals.

The code below is courtesy of the Scrimba course React Bootcamp: Become a Pro React Developer (https://scrimba.com/p/pMvMEuD/caqbeZTw)

App.js (Basic useEffect Explained)

import React, {useState, useEffect} from "react"
import randomcolor from "randomcolor" /*random hex color library, you'll need to install 
it first!*/

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState("")
    
    function increment() {
        setCount(prevCount => prevCount + 1)
    }
    
    function decrement() {
        setCount(prevCount => prevCount - 1)
    }
    
    useEffect(() => {
        setColor(randomcolor())  /*setColor calls randomcolor function and puts it into state 
		thanks to useState hook*/
    }, [count]) /*this second attribute says which event(s) to listen for to run the included 
	function. If blank, it will just run once when loading and that's it*/
    
    return (
        <div>
            <h1 style={{color: color}}>{count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    )
}

export default App

App.js (useEffect Lifecycle Hooks Explained)

import React, {useState, useEffect} from "react"
import randomcolor from "randomcolor"

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState("")
    
    useEffect(() => {
        const intervalId = setInterval(() => {
            // setCount(prevCount => prevCount + 1)
        }, 1000)
        return () => clearInterval(intervalId) /*by adding this "cleanup method" this is
		equivalent of componentDidUnmount */
    }, [])
    
    useEffect(() => {
        setColor(randomcolor())
    }, [count]) //equivalent of componentDidUpdate lifecycle method
	
	useEffect(() => {
        setColor(randomcolor())
    }, []) //equivalent of componentDidMount lifecycle method
    
    return (
        <div>
            <h1 style={{color: color}}>{count}</h1>
        </div>
    )
}

export default App