React/useEffect

//レンダー毎
useEffect(() => {
    console.log("render");
    return () => {
        console.log("unmount")
    }
})

//マウント時のみ
//第二引数に空の配列を渡すと最初の一回のみ実行される
useEffect(() => {
    console.log("render")
}, [])

//マウント＆アンマウント
useEffect(() => {
    console.log("render")
    return () => {
        console.log("unmount")
    }
})

//特定のレンダー時
//初期値が変わったときのみ実行される
const [変数名, 変更関数名] = useState(初期値);
useEffect(() => {
    console.log("render")
}, [limit])

    

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

const LikeButton = () => {
    const [count, counter] = useState(0);
    const [limit, release] = useState(true);

    const countUp = () => {
        counter(count + 1)
    }

    useEffect( () => {
        document.getElementById("counter").addEventListener("click", countUp)
        if(count >= 10){
            counter(0)
        }
        return () => {
            document.getElementById("counter").removeEventListener("click", countUp)
        }
    }, [limit]);

    return(
        <>
            button id={"counter"}>いいね:{count}/button>
            button onClick={() => release(!limit)}>解除/button>
        
    )
}

export default LikeButton