useEffect内でsetTimeoutを使用する時の注意 - Qiita
TL;DR useEffect内でsetTimeoutを使用するときは、ちゃんとクリーンアップ処理を書きましょう。 useEffect(() => { let timeoutId = setTimeout(() => { // 5秒経過したら閉じる setIsOpen(false) }, 5000) // こういう処理を書く + return () => { + clearTimeout(timeoutId) + } }, []) クリーンアップ処理がないと起こりうるつらさ コンポーネント状態が更新され、かつその状態がsetTimeoutの設定に依存している場合、意図しない動きをするケースがあるからです。 例えば数秒待機して自動で閉じるモーダルを実装するとします。 この場合、コンポーネントの実装としては以下のようになるかと思います。 const Modal = () => { const
React でクラスコンポーネントより関数コンポーネントを使うべき理由 5 選
☞ React 一覧JSXJSXの記法条件分岐・ループ処理Design patternCompound ComponentOthersコンポーネントのレンダリング位置をずらすReact HooksReact Hooksとは？useEffectuseEffectのよく間違うポイントuseStateuseStateの注意点useMemouseCallbackuseReducerComponent関数コンポーネントを使うべき理由ReduxRedux の概念RefRefref forwardingServer ComponentReact Server Component Component の種類 React でコンポーネントを定義する際は大きく分けてクラスコンポーネント、関数コンポーネントの 2 つに分けることができます。 これらのコンポーネントについては、コンポーネントと props につい
React.js で Google Maps JavaScript API を使いこなす｜suzukyu
はじめに縁あってか、個人 / 仕事問わず React.js + Google Maps JavaScript API な構成の Web アプリケーションを作る機会が多くありました。 位置情報や移動に関わる Web サービスにとって最早なくてはならない Google Maps JS API という技術ですが、React.js と組み合わせたときに若干のテクニックが要求される場面もあります。 この記事では、これまでの開発の中で得られたノウハウや Tips をできる限りまとめていきたいと思います。今後の位置情報 ・移動アプリケーションの発展の助けになれば幸いです。 サードパーティーのライブラリを「使わない」まず第一に、サードパーティーのライブラリを使う必要はありません。ググればいくつかの React 向けの Wrapper ライブラリが出てきますが、特段の事情がない限りはネイティブの API で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
