Effect ve veri çekme

1:root {2    color-scheme: dark;3    font-family: system-ui, sans-serif;4    background: #10131a;5    color: #e8e6e3;6}7 8body {9    margin: 0;10    padding: 24px 16px;11}12 13main {14    max-width: 880px;15    margin: 0 auto;16}17 18h1 {19    margin: 0 0 4px;20}21 22button,23input {24    font: inherit;25    padding: 6px 12px;26    border-radius: 6px;27    color: inherit;28}29 30button {31    border: 1px solid #c8aa6e;32    background: #1e2330;33    cursor: pointer;34}35 36input {37    border: 1px solid #3c4458;38    background: #0b0e14;39    width: 100%;40    box-sizing: border-box;41    margin-bottom: 12px;42}43 44.sutunlar {45    display: grid;46    grid-template-columns: 260px 1fr;47    gap: 16px;48    margin-top: 16px;49}50 51.panel {52    background: #171b25;53    border: 1px solid #2a3142;54    border-radius: 10px;55    padding: 16px;56}57 58.panel h2 {59    margin-top: 0;60}61 62.liste {63    list-style: none;64    margin: 0;65    padding: 0;66    max-height: 420px;67    overflow-y: auto;68}69 70.liste button {71    width: 100%;72    margin-bottom: 6px;73    text-align: left;74    border-color: #2a3142;75}76 77.liste button.secili {78    border-color: #c8aa6e;79    background: #2a2416;80}81 82.soluk {83    color: #8a93a6;84}85 86.etiket {87    display: inline-block;88    margin-right: 6px;89    padding: 2px 8px;90    border-radius: 999px;91    background: #24304a;92    font-size: 13px;93}94 95.hata {96    background: #3a1d1d;97    color: #ffb4a8;98    padding: 8px 12px;99    border-radius: 6px;100}101 102@media (max-width: 640px) {103    .sutunlar {104        grid-template-columns: 1fr;105    }106}

1import { useEffect, useState } from "react"2 3function App() {4    const [kill, setKill] = useState(0)5 6    console.log("çizim, kill:", kill)7 8    useEffect(() => {9        document.title = `${kill} kill · Şampiyon Rehberi`10        console.log("effect, kill:", kill)11    })12 13    return (14        <main>15            <h1>Kill: {kill}</h1>16            <button onClick={() => setKill((onceki) => onceki + 1)}>Kill al</button>17        </main>18    )19}20 21export default App

1import { useEffect, useState } from "react"2 3function App() {4    const [kill, setKill] = useState(0)5    const [altin, setAltin] = useState(500)6 7    useEffect(() => {8        console.log("A) dizisiz: her çizimden sonra")9    })10 11    useEffect(() => {12        console.log("B) boş dizi: yalnız ilk çizimden sonra")13    }, [])14 15    useEffect(() => {16        console.log("C) [kill]: kill değişince, kill =", kill)17    }, [kill])18 19    return (20        <main>21            <h1>Kill: {kill} · Altın: {altin}</h1>22            <button onClick={() => setKill((onceki) => onceki + 1)}>Kill al</button>23            <button onClick={() => setAltin((onceki) => onceki + 100)}>Altın topla</button>24        </main>25    )26}27 28export default App

1import { useEffect, useState } from "react"2 3function App() {4    const [surumler, setSurumler] = useState<string[]>([])5 6    useEffect(() => {7        console.log("istek gönderiliyor")8        fetch("https://ddragon.leagueoflegends.com/api/versions.json")9            .then((yanit) => yanit.json())10            .then((veri) => setSurumler(veri))11    }, [])12 13    return (14        <main>15            <h1>Şampiyon Rehberi</h1>16            <p>Data Dragon'da {surumler.length} sürüm var.</p>17        </main>18    )19}20 21export default App

1let saniye = 02 3const kimlik = setInterval(() => {4    saniye = saniye + 15    console.log("Maç süresi:", saniye)6    if (saniye === 3) {7        clearInterval(kimlik)8        console.log("Saat durdu")9    }10}, 1000)11 12console.log("Saat kuruldu")

1import { useState } from "react"2import MacSaati from "./MacSaati.tsx"3 4function App() {5    const [saatAcik, setSaatAcik] = useState(true)6 7    return (8        <main>9            <h1>Maç saati</h1>10            <button onClick={() => setSaatAcik((onceki) => !onceki)}>11                {saatAcik ? "Saati gizle" : "Saati göster"}12            </button>13            {saatAcik && <MacSaati />}14        </main>15    )16}17 18export default App

1export type SampiyonOzeti = {2    id: string3    name: string4    title: string5    tags: string[]6}7 8export type SampiyonDetayi = {9    id: string10    name: string11    title: string12    lore: string13    tags: string[]14    passive: { name: string }15    spells: { name: string }[]16}17 18const KOK = "https://ddragon.leagueoflegends.com"19 20export async function jsonGetir(adres: string, sinyal?: AbortSignal): Promise<unknown> {21    const yanit = await fetch(adres, { signal: sinyal })22    if (!yanit.ok) {23        throw new Error("İstek başarısız: " + yanit.status)24    }25    return await yanit.json()26}27 28export async function listeGetir() {29    const surumler = (await jsonGetir(`${KOK}/api/versions.json`)) as string[]30    const surum = surumler[0]31    const adres = `${KOK}/cdn/${surum}/data/tr_TR/champion.json`32    const veri = (await jsonGetir(adres)) as { data: Record<string, SampiyonOzeti> }33    return { surum, sampiyonlar: Object.values(veri.data) }34}35 36export async function detayGetir(surum: string, id: string, sinyal?: AbortSignal) {37    const adres = `${KOK}/cdn/${surum}/data/tr_TR/champion/${id}.json`38    const veri = (await jsonGetir(adres, sinyal)) as { data: Record<string, SampiyonDetayi> }39    return veri.data[id]40}

1import { useEffect, useState } from "react"2import { listeGetir, type SampiyonOzeti } from "./api.ts"3 4function App() {5    const [sampiyonlar, setSampiyonlar] = useState<SampiyonOzeti[]>([])6    const [surum, setSurum] = useState("")7    const [yukleniyor, setYukleniyor] = useState(true)8    const [hata, setHata] = useState<string | null>(null)9 10    useEffect(() => {11        async function yukle() {12            try {13                const sonuc = await listeGetir()14                setSurum(sonuc.surum)15                setSampiyonlar(sonuc.sampiyonlar)16                setYukleniyor(false)17            } catch (sorun) {18                console.error(sorun)19                setHata("Şampiyonlar yüklenemedi. İnternet bağlantını denetleyip sayfayı yenile.")20                setYukleniyor(false)21            }22        }23 24        yukle()25    }, [])26 27    if (yukleniyor) {28        return <main><p className="soluk">Şampiyonlar yükleniyor…</p></main>29    }30    if (hata !== null) {31        return <main><p className="hata">{hata}</p></main>32    }33 34    return (35        <main>36            <h1>Şampiyon Rehberi</h1>37            <p className="soluk">Yama {surum} · {sampiyonlar.length} şampiyon</p>38            <section className="panel">39                <ul className="liste">40                    {sampiyonlar.map((s) => (41                        <li key={s.id}>{s.name} <span className="soluk">{s.title}</span></li>42                    ))}43                </ul>44            </section>45        </main>46    )47}48 49export default App

1import { useEffect, useState } from "react"2import { detayGetir, type SampiyonDetayi } from "./api.ts"3 4type SampiyonDetayProps = {5    surum: string6    id: string7}8 9function SampiyonDetay({ surum, id }: SampiyonDetayProps) {10    const [detay, setDetay] = useState<SampiyonDetayi | null>(null)11    const [yukleniyor, setYukleniyor] = useState(true)12    const [hata, setHata] = useState<string | null>(null)13 14    useEffect(() => {15        async function yukle() {16            setYukleniyor(true)17            setHata(null)18            try {19                const yeni = await detayGetir(surum, id)20                setDetay(yeni)21                setYukleniyor(false)22            } catch (sorun) {23                console.error(sorun)24                setHata("Ayrıntılar yüklenemedi.")25                setYukleniyor(false)26            }27        }28 29        yukle()30    }, [surum, id])31 32    if (yukleniyor) {33        return <section className="panel"><p className="soluk">Ayrıntılar yükleniyor…</p></section>34    }35    if (hata !== null || detay === null) {36        return <section className="panel"><p className="hata">{hata}</p></section>37    }38    return (39        <section className="panel">40            <h2>{detay.name}</h2>41            <p className="soluk">{detay.title}</p>42            <p>43                {detay.tags.map((etiket) => (44                    <span key={etiket} className="etiket">{etiket}</span>45                ))}46            </p>47            <p><b>Pasif:</b> {detay.passive.name}</p>48            <ol>49                {detay.spells.map((yetenek) => (50                    <li key={yetenek.name}>{yetenek.name}</li>51                ))}52            </ol>53            <p>{detay.lore}</p>54        </section>55    )56}57 58export default SampiyonDetay

1import { useEffect, useState } from "react"2import { listeGetir, type SampiyonOzeti } from "./api.ts"3import SampiyonDetay from "./SampiyonDetay.tsx"4 5function App() {6    const [sampiyonlar, setSampiyonlar] = useState<SampiyonOzeti[]>([])7    const [surum, setSurum] = useState("")8    const [yukleniyor, setYukleniyor] = useState(true)9    const [hata, setHata] = useState<string | null>(null)10    const [secili, setSecili] = useState<string | null>(null)11 12    useEffect(() => {13        async function yukle() {14            try {15                const sonuc = await listeGetir()16                setSurum(sonuc.surum)17                setSampiyonlar(sonuc.sampiyonlar)18                setYukleniyor(false)19            } catch (sorun) {20                console.error(sorun)21                setHata("Şampiyonlar yüklenemedi. İnternet bağlantını denetleyip sayfayı yenile.")22                setYukleniyor(false)23            }24        }25 26        yukle()27    }, [])28 29    if (yukleniyor) {30        return <main><p className="soluk">Şampiyonlar yükleniyor…</p></main>31    }32    if (hata !== null) {33        return <main><p className="hata">{hata}</p></main>34    }35 36    return (37        <main>38            <h1>Şampiyon Rehberi</h1>39            <p className="soluk">Yama {surum} · {sampiyonlar.length} şampiyon</p>40            <div className="sutunlar">41                <section className="panel">42                    <ul className="liste">43                        {sampiyonlar.map((s) => (44                            <li key={s.id}>45                                <button46                                    className={s.id === secili ? "secili" : ""}47                                    onClick={() => setSecili(s.id)}48                                >49                                    {s.name}50                                </button>51                            </li>52                        ))}53                    </ul>54                </section>55                {secili === null56                    ? <section className="panel"><p className="soluk">Soldan bir şampiyon seç.</p></section>57                    : <SampiyonDetay surum={surum} id={secili} />}58            </div>59        </main>60    )61}62 63export default App

20function bekle(ms: number) {21    return new Promise((resolve) => {22        setTimeout(resolve, ms)23    })24}

42export async function detayGetir(surum: string, id: string, sinyal?: AbortSignal) {43    if (id === "Ahri") {44        await bekle(2000)45    }

19                const yeni = await detayGetir(surum, id)20                console.log("yanıt geldi:", yeni.name)21                setDetay(yeni)

1const kumanda = new AbortController()2console.log("İptal edildi mi?", kumanda.signal.aborted)3 4kumanda.abort()5console.log("İptal edildi mi?", kumanda.signal.aborted)6 7try {8    await fetch("https://ddragon.leagueoflegends.com/api/versions.json", {9        signal: kumanda.signal10    })11    console.log("Yanıt geldi")12} catch (hata) {13    console.log(hata.name + ": " + hata.message)14}

14    useEffect(() => {15        const kumanda = new AbortController()16 17        async function yukle() {18            setYukleniyor(true)19            setHata(null)20            try {21                const yeni = await detayGetir(surum, id, kumanda.signal)22                console.log("yanıt geldi:", yeni.name)23                setDetay(yeni)24                setYukleniyor(false)25            } catch (sorun) {26                if (kumanda.signal.aborted) {27                    return28                }29                console.error(sorun)30                setHata("Ayrıntılar yüklenemedi.")31                setYukleniyor(false)32            }33        }34 35        yukle()36 37        return () => {38            kumanda.abort()39        }40    }, [surum, id])

1import { useEffect, useState } from "react"2import { jsonGetir } from "./api.ts"3 4export function useVeri<T>(adres: string | null) {5    const [veri, setVeri] = useState<T | null>(null)6    const [yukleniyor, setYukleniyor] = useState(adres !== null)7    const [hata, setHata] = useState<string | null>(null)8 9    useEffect(() => {10        if (adres === null) {11            return12        }13        const kumanda = new AbortController()14 15        async function getir(istenen: string) {16            setYukleniyor(true)17            setHata(null)18            try {19                const yeni = await jsonGetir(istenen, kumanda.signal)20                setVeri(yeni as T)21                setYukleniyor(false)22            } catch (sorun) {23                if (kumanda.signal.aborted) {24                    return25                }26                console.error(sorun)27                setHata("Veri yüklenemedi.")28                setYukleniyor(false)29            }30        }31 32        getir(adres)33 34        return () => {35            kumanda.abort()36        }37    }, [adres])38 39    return { veri, yukleniyor, hata }40}

1export type SampiyonOzeti = {2    id: string3    name: string4    title: string5    tags: string[]6}7 8export type SampiyonDetayi = {9    id: string10    name: string11    title: string12    lore: string13    tags: string[]14    passive: { name: string }15    spells: { name: string }[]16}17 18export type ListeYaniti = { data: Record<string, SampiyonOzeti> }19export type DetayYaniti = { data: Record<string, SampiyonDetayi> }20 21const KOK = "https://ddragon.leagueoflegends.com"22 23export const SURUM_ADRESI = `${KOK}/api/versions.json`24 25export function listeAdresi(surum: string) {26    return `${KOK}/cdn/${surum}/data/tr_TR/champion.json`27}28 29export function detayAdresi(surum: string, id: string) {30    return `${KOK}/cdn/${surum}/data/tr_TR/champion/${id}.json`31}32 33export async function jsonGetir(adres: string, sinyal?: AbortSignal): Promise<unknown> {34    const yanit = await fetch(adres, { signal: sinyal })35    if (!yanit.ok) {36        throw new Error("İstek başarısız: " + yanit.status)37    }38    return await yanit.json()39}

1import { detayAdresi, type DetayYaniti } from "./api.ts"2import { useVeri } from "./useVeri.ts"3 4type SampiyonDetayProps = {5    surum: string6    id: string7}8 9function SampiyonDetay({ surum, id }: SampiyonDetayProps) {10    const { veri, yukleniyor, hata } = useVeri<DetayYaniti>(detayAdresi(surum, id))11 12    if (yukleniyor) {13        return <section className="panel"><p className="soluk">Ayrıntılar yükleniyor…</p></section>14    }15    if (hata !== null) {16        return <section className="panel"><p className="hata">{hata}</p></section>17    }18    if (veri === null) {19        return null20    }21 22    const detay = Object.values(veri.data)[0]23    return (24        <section className="panel">25            <h2>{detay.name}</h2>26            <p className="soluk">{detay.title}</p>27            <p>28                {detay.tags.map((etiket) => (29                    <span key={etiket} className="etiket">{etiket}</span>30                ))}31            </p>32            <p><b>Pasif:</b> {detay.passive.name}</p>33            <ol>34                {detay.spells.map((yetenek) => (35                    <li key={yetenek.name}>{yetenek.name}</li>36                ))}37            </ol>38            <p>{detay.lore}</p>39        </section>40    )41}42 43export default SampiyonDetay

1import { useState } from "react"2import { SURUM_ADRESI, listeAdresi, type ListeYaniti } from "./api.ts"3import { useVeri } from "./useVeri.ts"4import SampiyonDetay from "./SampiyonDetay.tsx"5 6function App() {7    const [secili, setSecili] = useState<string | null>(null)8 9    const surumler = useVeri<string[]>(SURUM_ADRESI)10    const surum = surumler.veri === null ? null : surumler.veri[0]11    const liste = useVeri<ListeYaniti>(surum === null ? null : listeAdresi(surum))12 13    const hata = surumler.hata ?? liste.hata14    if (hata !== null) {15        return <main><p className="hata">{hata} İnternet bağlantını denetleyip sayfayı yenile.</p></main>16    }17    if (surum === null || liste.veri === null) {18        return <main><p className="soluk">Şampiyonlar yükleniyor…</p></main>19    }20 21    const sampiyonlar = Object.values(liste.veri.data)22 23    return (24        <main>25            <h1>Şampiyon Rehberi</h1>26            <p className="soluk">Yama {surum} · {sampiyonlar.length} şampiyon</p>27            <div className="sutunlar">28                <section className="panel">29                    <ul className="liste">30                        {sampiyonlar.map((s) => (31                            <li key={s.id}>32                                <button33                                    className={s.id === secili ? "secili" : ""}34                                    onClick={() => setSecili(s.id)}35                                >36                                    {s.name}37                                </button>38                            </li>39                        ))}40                    </ul>41                </section>42                {secili === null43                    ? <section className="panel"><p className="soluk">Soldan bir şampiyon seç.</p></section>44                    : <SampiyonDetay surum={surum} id={secili} />}45            </div>46        </main>47    )48}49 50export default App

1export function aramaBicimi(metin: string) {2    return metin.toLocaleLowerCase("tr").replaceAll("ı", "i")3}

  ! react(set-state-in-effect): Calling setState synchronously within an effect can trigger cascading renders  help: Effects should synchronize React with external systems. Calling setState synchronously inside an effect starts another render and is usually unnecessary. Derive the value during render, initialize state directly, or update it from the event that caused the change. Use an effect only when synchronizing with an external system.   ! react-hooks(exhaustive-deps): React hook useEffect depends on `sampiyonlar`, which changes every render  help: Try memoizing this variable with `useRef` or `useCallback`.

1import { useEffect, useState } from "react"2import { SURUM_ADRESI, listeAdresi, type ListeYaniti } from "./api.ts"3import { useVeri } from "./useVeri.ts"4import { aramaBicimi } from "./arama.ts"5import SampiyonDetay from "./SampiyonDetay.tsx"6 7function App() {8    const [secili, setSecili] = useState<string | null>(null)9    const [arama, setArama] = useState("")10 11    const surumler = useVeri<string[]>(SURUM_ADRESI)12    const surum = surumler.veri === null ? null : surumler.veri[0]13    const liste = useVeri<ListeYaniti>(surum === null ? null : listeAdresi(surum))14    const seciliAd = secili === null || liste.veri === null ? null : liste.veri.data[secili].name15 16    useEffect(() => {17        document.title = seciliAd === null ? "Şampiyon Rehberi" : `${seciliAd} · Şampiyon Rehberi`18    }, [seciliAd])19 20    const hata = surumler.hata ?? liste.hata21    if (hata !== null) {22        return <main><p className="hata">{hata} İnternet bağlantını denetleyip sayfayı yenile.</p></main>23    }24    if (surum === null || liste.veri === null) {25        return <main><p className="soluk">Şampiyonlar yükleniyor…</p></main>26    }27 28    const sampiyonlar = Object.values(liste.veri.data)29    const aranan = aramaBicimi(arama.trim())30    const gorunenler = sampiyonlar.filter((s) =>31        aramaBicimi(s.name).includes(aranan)32    )33 34    function sec(id: string) {35        setSecili(id)36        setArama("")37    }38 39    return (40        <main>41            <h1>Şampiyon Rehberi</h1>42            <p className="soluk">Yama {surum} · {sampiyonlar.length} şampiyon</p>43            <div className="sutunlar">44                <section className="panel">45                    <input46                        placeholder="Şampiyon ara"47                        value={arama}48                        onChange={(olay) => setArama(olay.target.value)}49                    />50                    {gorunenler.length === 0 && <p className="soluk">Bu adla şampiyon yok.</p>}51                    <ul className="liste">52                        {gorunenler.map((s) => (53                            <li key={s.id}>54                                <button55                                    className={s.id === secili ? "secili" : ""}56                                    onClick={() => sec(s.id)}57                                >58                                    {s.name}59                                </button>60                            </li>61                        ))}62                    </ul>63                </section>64                {secili === null65                    ? <section className="panel"><p className="soluk">Soldan bir şampiyon seç.</p></section>66                    : <SampiyonDetay surum={surum} id={secili} />}67            </div>68        </main>69    )70}71 72export default App