タグ

2020年7月4日のブックマーク (2件)

  • React.useEffectで非同期処理をする場合の注意点2つ(変更あり) - Qiita

    はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea

    React.useEffectで非同期処理をする場合の注意点2つ(変更あり) - Qiita
    naga_sawa
    naga_sawa 2020/07/04
    useEffect で不用意に async すると暗黙の return Primise になるので注意/『It looks like you wrote useEffect(async () => ...) or returned a Promise』と親切な Warning 出してくれる
  • <script> タグに async / defer を付けた場合のタイミング - Qiita

    HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン

    <script> タグに async / defer を付けた場合のタイミング - Qiita
    naga_sawa
    naga_sawa 2020/07/04
    DOMContentLoadedでkickしたい部分はdefer/いつでもいいので読み込み次第な部分はasync/block避けにbodyの最後でscript読んでいた定番が陳腐化してhead内でdefer付きで読むのが新定石になるか