Kullanımdaki eşzamansız işlev için React Hook UyarılarıEffect: useEffect işlevi bir temizleme işlevi döndürmeli veya hiçbir şey döndürmemelidir

Deniyordum useEffectgibi aşağıda örnek şey:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

ve konsolumda bu uyarıyı alıyorum. Ancak temizlik, eşzamansız aramalar için isteğe bağlı olduğunu düşünüyorum. Neden bu uyarıyı aldığımı bilmiyorum. Örnekler için korumalı alanı bağlama. https://codesandbox.io/s/24rj871r0p

Dan Abramov'un (React çekirdek geliştiricilerinden biri) cevabına buradan bakmanızı öneririm :

Sanırım bunu olması gerekenden daha karmaşık hale getiriyorsun.

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

Daha uzun vadede bu modelden vazgeçeceğiz çünkü yarış koşullarını teşvik ediyor. Örneğin - aramanızın başlangıcı ve bitişi arasında herhangi bir şey olabilir ve yeni donanımlar edinmiş olabilirsiniz. Bunun yerine, daha çok benzer görünecek olan veri getirme için Suspense'i önereceğiz.

const response = MyAPIResource.read();

ve etkisi yok. Ancak bu arada eşzamansız şeyleri ayrı bir işleve taşıyıp çağırabilirsiniz.

Deneysel gerilim hakkında daha fazla bilgiyi buradan okuyabilirsiniz .

Eslint ile dışarıdaki işlevleri kullanmak istiyorsanız.

 function OutsideUsageExample() {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data')
    response = await response.json()
    dataSet(response)
  }, [])

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

UseCallback useCallback ile . Sandbox .

import React, { useState, useEffect, useCallback } from "react";

export default function App() {
  const [counter, setCounter] = useState(1);

  // if counter is changed, than fn will be updated with new counter value
  const fn = useCallback(() => {
    setCounter(counter + 1);
  }, [counter]);

  // if counter is changed, than fn will not be updated and counter will be always 1 inside fn
  /*const fnBad = useCallback(() => {
      setCounter(counter + 1);
    }, []);*/

  // if fn or counter is changed, than useEffect will rerun
  useEffect(() => {
    if (!(counter % 2)) return; // this will stop the loop if counter is not even

    fn();
  }, [fn, counter]);

  // this will be infinite loop because fn is always changing with new counter value
  /*useEffect(() => {
    fn();
  }, [fn]);*/

  return (
    <div>
      <div>Counter is {counter}</div>
      <button onClick={fn}>add +1 count</button>
    </div>
  );
}

Gibi bir zaman uyumsuz işlev kullandığınızda

async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}

bir söz verir ve useEffectgeri çağırma işlevinin Promise'ı döndürmesini beklemez, bunun yerine hiçbir şeyin döndürülmemesini veya bir işlevin döndürülmesini bekler.

Uyarı için geçici bir çözüm olarak, kendi kendine çağrılan bir zaman uyumsuz işlev kullanabilirsiniz.

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

veya onu daha temiz hale getirmek için bir işlevi tanımlayabilir ve ardından

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

ikinci çözüm, okumayı kolaylaştıracak ve yenisi çalıştırılırsa önceki istekleri iptal etmek için kod yazmanıza veya en son istek yanıtını duruma kaydetmenize yardımcı olacaktır.

Çalışma kodları ve kutusu

React daha iyi bir yol sağlayana kadar, bir yardımcı oluşturabilirsiniz useEffectAsync.js:

import { useEffect } from 'react';


export default function useEffectAsync(effect, inputs) {
    useEffect(() => {
        effect();
    }, inputs);
}

Şimdi bir eşzamansız işlevi geçebilirsiniz:

useEffectAsync(async () => {
    const items = await fetchSomeItems();
    console.log(items);
}, []);

Güncelleme

Bu yaklaşımı seçerseniz, bunun kötü bir form olduğunu unutmayın. Güvenli olduğunu bildiğimde buna başvuruyorum, ama her zaman kötü bir form ve gelişigüzel.

Hâlâ deneysel olan Veri Getirme için Askıya Alma bazı vakaları çözecektir.

Diğer durumlarda, eşzamansız sonuçları olaylar olarak modelleyebilirsiniz, böylece bileşen yaşam döngüsüne göre bir dinleyici ekleyebilir veya kaldırabilirsiniz.

Veya eşzamansız sonuçları bir Gözlemlenebilir olarak modelleyebilirsiniz, böylece bileşen yaşam döngüsüne göre abone olabilir ve abonelikten çıkabilirsiniz.

Bu soruyu okudum ve useEffect'i uygulamanın en iyi yolunun cevaplarda belirtilmediğini hissediyorum. Diyelim ki bir şebeke aramanız var ve yanıtı aldığınızda bir şeyler yapmak istiyorsunuz. Basit olması açısından ağ yanıtını bir durum değişkeninde saklayalım. Mağazayı ağ yanıtıyla güncellemek için eylem / azaltıcı kullanmak isteyebilirsiniz.

const [data, setData] = useState(null);

/* This would be called on initial page load */
useEffect(()=>{
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(data => {
        setData(data);
    })
    .catch(err => {
        /* perform error handling if desired */
    });
}, [])

/* This would be called when store/state data is updated */
useEffect(()=>{
    if (data) {
        setPosts(data.children.map(it => {
            /* do what you want */
        }));
    }
}, [data]);

Referans => https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

void operatörü burada kullanılabilir.
Onun yerine:

React.useEffect(() => {
    async function fetchData() {
    }
    fetchData();
}, []);

veya

React.useEffect(() => {
    (async function fetchData() {
    })()
}, []);

yazabilirsin:

React.useEffect(() => {
    void async function fetchData() {
    }();
}, []);

Biraz daha temiz ve güzel.

Zaman uyumsuz etkiler bellek sızıntılarına neden olabilir, bu nedenle, ayrılan bileşen üzerinde temizleme işlemi gerçekleştirmek önemlidir. Getirme durumunda bu şöyle görünebilir:

function App() {
  const [data, setData] = React.useState([])

  React.useEffect(() => {
    const abortController = new AbortController()
    ;(async function fetchData() {
      try {
        const url = "https://jsonplaceholder.typicode.com/todos/1"
        const response = await fetch(url, {
          signal: abortController.signal,
        })
        setData(await response.json())
      } catch (error) {
        console.log("error", error)
      }
    })()
    return abortController.abort // cancel pending fetch request on component unmount
  }, [])

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

Diğer okuyucular için hata, zaman uyumsuz işlevi saran parantez bulunmamasından kaynaklanabilir:

İnitData zaman uyumsuz işlevini göz önünde bulundurarak

  async function initData() {
  }

Bu kod, hatanıza yol açacaktır:

  useEffect(() => initData(), []);

Ama bu:

  useEffect(() => { initData(); }, []);

(İnitData () etrafındaki parantezlere dikkat edin

Deneyin

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);
  return <div></div>;
};