ReactHookでState更新時に再Renderする方法

未分類

2021.07.06

ReactではState更新時にコンポーネントが再レンダーされる。

それのHookバージョンって無いのかなと気になったのがきっかけ。

ちょうどTodoアプリを作成しており、

そのコードを取っているので、これ自体の動作は確認していません。

const [todoStatus, setTodoStatus] = useState(0)
useEffect(　() => {
　　　　dispatch(fetchTodoList(userToken));
 },[todoStatus])
const completedTodo = (e) => {
　　　　setTodoStatus(() => todoStatus + 1)
}
return (
<h3 onClick={completedTodo}>
{todoStatus}
</h3>
)

useEffectにtodoStatusを引数として持っておくのがミソ。

これにより、クリック時にStateの値が更新され、

画面も再レンダーされる。

・参考

stackoverflow.com