Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* useEffectはレンダーの後で呼ばれる [#wed1a18f]
import React, { useEffect, useState } from "react";
const App = () => {
const [num, setNum] = useState(3);
return (
<div>
<button onClick={() => setNum(num + 1)}>{num}</but...
<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配列は初期値の空。その...
- また、親コンポーネントでnumが増えてPropsとして渡ってく...
** 参考 [#v203f3d3]
- https://beta.reactjs.org/learn/you-might-not-need-an-ef...
- https://www.zekehernandez.com/posts/little-react-things...
終了行:
* useEffectはレンダーの後で呼ばれる [#wed1a18f]
import React, { useEffect, useState } from "react";
const App = () => {
const [num, setNum] = useState(3);
return (
<div>
<button onClick={() => setNum(num + 1)}>{num}</but...
<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配列は初期値の空。その...
- また、親コンポーネントでnumが増えてPropsとして渡ってく...
** 参考 [#v203f3d3]
- https://beta.reactjs.org/learn/you-might-not-need-an-ef...
- https://www.zekehernandez.com/posts/little-react-things...
ページ名: