😺

【初心者向け 108】React useEffect

2023/11/24に公開

React

初心者

tech

useEffect

Componentのlife cycleに関するhookです。Javaでいいますとコンストラクタのように、生成されてから、何かのコードを追加して操作することができます。

大きく、useEffectはmount（component生成),update,unmount(component消滅）のタイミングにコードで何からのイベントや作業を設定することができます。
本記事はmountイベントについて作成しました！

function YellowDiv() {
  return <div className='alert alert-warning'>after 3 seconds! disappear!/div>;
}

  useEffect(() => {
    let a = setTimeout(() => {
      setYellowDiv(false);
    }, 3000);
    return () => {
      clearTimeout(a);
    };
  }, []);

useEffectの大きな仕組みは以下のようです。

useEffect(code,[state or variable])

[]の中に何も記載しない場合は、mountでのみコードが実行され、[]にstate名もしくはvariable名を作成する場合はそのstate,variableにないかの変化がある、つまりupdateされるのみ、コードが実行されます。

unmountの場合は以下のような形でなり、タイマーや何かを全部cleanし、初期化したい際につかうパータンです！

useEffect(()=>{
return () =>{
   　実行するコード
  } 
}  ,[])

useEffect

Discussion