[解決済み】Reactの関数/HooksコンポーネントでcomponentDidMountと同等？

質問

をシミュレートする方法はありますか？ componentDidMount をフック経由でReactの関数型コンポーネントで使用できますか？

どのように解決するのですか？

安定版フックの場合（Reactバージョン16.8.0以上）

対象 componentDidMount

useEffect(() => {
  // Your code here
}, []);

について componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);

について componentWillUnmount

useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);

ですから、このような状況では、この配列に依存関係を渡す必要があります。次のような状態があるとします。

const [count, setCount] = useState(0);

そして、カウントが増えるたびに、関数コンポーネントを再レンダリングするようにします。そこで useEffect は次のようになります。

useEffect(() => {
  // <div>{count}</div>
}, [count]);

こうすることで、カウントが更新されるたびに、コンポーネントが再レンダリングされます。これで少しは役に立つと思います。