useEffectはレンダーの後で呼ばれる

 import React, { useEffect, useState } from "react";
 
 const App = () => {
   const [num, setNum] = useState(3);
 
   return (
     <div>
       <button onClick={() => setNum(num + 1)}>{num}</button>
       <List num={num} />
     </div>
   );
 };
 
 const List = ({ num }) => {
   const [list, setList] = useState([]);
 
   useEffect(() => {
     let _list = [];
     for (let i = 0; i < num; i++) {
       _list.push("DEBUG:" + _list.length);
     }
     setList(_list);
   }, [num]);
 
   console.log({ list });
 
   return (
     <div>
       {list.map((v, i) => {
         return <p key={i}>{v}</p>;
       })}
     </div>
   );
 };
 
 export default App;
  • 上のコードでは、ListコンポーネントでuseEffectの中でlist配列を作ってるが、
  • useEffectはレンダリングの後で呼ばれるので
  • 初回のレンダリングの時点ではlist配列は初期値の空。その後、useEffectが評価されてlist配列が作られる。つまり、必ずレンダリングが2回実行される
  • また、親コンポーネントでnumが増えてPropsとして渡ってくる場合も、Propsの変化によって起きるレンダリングの後でuseEffectが実行されるので、numが変化するとレンダリングは2回行われる

参考


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2023-02-02 (木) 19:11:05