ページの更新前に処理がしたいです。react.js

Question

react　について質問です。

useEffectの副作用によってrouterを使った処理ではページを離れたときにuseEffectでreturnされた関数が実行されますがページを更新したときや別ページに手動で飛ぶときにはuseEffectでreturnされた関数が実行されません。

こういった場合、とのような処理を使いますか？
どんな方法でも歓迎ですので、是非教えて下さい。
特にnext.jsの方法だと更に助かります。
宜しくおねがいします。

Answer 1

React(Next)のライフサイクルではないので、WindowEventHandlersを使用してください。

  useEffect(() => {
    const callback = () => console.log('before unload')

    window.addEventListener('beforeunload', callback)

    return () => window.removeEventListener('beforeunload', callback)
  }, [])

Comments

[proglerner]

回答ありがとうございます。
async awaitをつけることで無事更新後にデータベースの削除をする処理がなされました。
とても参考になりました！