React aktualizowanie widoku

Question

Hej,

Robię teraz projekt przy użyciu Api league of legends. Na jedenj ze stron chciałem wypisać wszystkich championów. Z api pobieram obiekt. Teraz mam problem, mam input który wyszukuje championy po nazwie i nie chce za każdym razem pobierać nowego obiektu z API. Zrobiłem kopię tego obiektu na którym pracuje, jest do jednak zmienna globalna.

Czy mozna to zrobić lepiej albo przy użyciu prevState?

let championList;
const ChampionSites = (props) => {

    const [championName, setChampionName] = useState('');
    const [searChchampionList, setSearchChampionList] = useState([]);


    const handleChangeChampionName = (e) => {
        const inputValue = e.target.value
        setChampionName(inputValue);
        setSearchChampionList(championList.filter(el => el.id.toUpperCase().includes(inputValue.toUpperCase())));
    }

    const getChampions = async () => {
        try {
            const result = await fetch(
                `http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json`
            );
            const data = await result.json();
            let copyList = Object.values(data.data);
            setSearchChampionList(copyList);
            championList = [...copyList];


        }
        catch (err) {
            console.log(err);
        }

    };

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

 

Comments

mam input który wyszukuje championy po nazwie i nie chce za każdym razem pobierać nowego obiektu z API

A kiedy w takim razie chcesz go pobierać? 

---

chce tylko raz pobrać po załadowaniu strony, bo moim zdaniem zbędne jest pobieranie obiektu co każde wpisanie literki w inputa. Chyba że to tak bardzo nie obciąża strony

---

Hmm, jeśli jedynym inicjatorem pobierania obiektów z API jest funkcja getChampions wołana przez useEffect, to pusta tablica w drugim parametrze powinna sprawić, że hook jest odpalany tylko dwa razy: dla pierwszego renderu (odpowiednik componentDidMount) i przy usuwaniu komponentu (odpowiednik componentWillUnmount) - a nie na każdy jego rerender.

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

Ile razy w trakcie życia componentu są pobierane dane z API? Czy to pobieranie jest inicjowane dodatkowo z innego miejsca niż tylko z useEffect?