╔════════════════════════════════════╗
🧠 EthioCode · Phase 3 · L03
╚════════════════════════════════════╝
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
R E A C T Q U E R Y ⚡
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
❝ The best code is the code you never wrote. ❞
ይህን አሰልቺ ኮድ ስንት ጊዜ ጻፍከው? 🤦♂️
» useState(null) // ለ data
» useState(false) // ለ loading
» useState(null) // ለ error
» useEffect( fetch → then → catch → finally )
...ለእያንዳንዱ API call!
...ለዘለዓለም!∝
[ 🛑 STOP. ]
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
useQuery — አንድ Hook። ሁሉም በነፃ። 😎
const { data } = useQuery({ queryKey, queryFn })
🔑 queryKey → ለካሽ መለያ (Cache Address)
📡 queryFn → ዳታውን የሚያመጣው (Data Source)
⏱ staleTime → ዳታው ለ5 ደቂቃ Fresh ሆኖ ይቆያል
🔁 retry → ኔትወርክ ከጠፋ 3 ጊዜ auto ይሞክራል
// ✅ Cache → Auto
// ✅ Error Retry → Auto
// ✅ Background Sync → Auto
// ✅ DevTools → Ready
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
LOADING... ■■■■■■■■■■ 100%
LESSON READY ✔ ዛሬ ምን ይጠብቅሃል?
[01] Query Lifecycle · 🔄 Interactive
[02] useQuery vs useMutation
[03] Cache Explorer · 🗄️
[04] Live Simulator · 🎮
[05] Quiz · 🎯
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
🔗 ethiocodesoftselectphase3l3.netlify.app
📱 በስልክ ለምትገቡ → "Desktop Site" ማብራት እንዳትረሱ!
◄ PREV: Zod Validation · P3·L02
► NEXT: React Hook Form · P3·L04
😶▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
@EthioCodeSoftSelect
Forward ለ developer ጓደኛህ 🚀
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓👌
🧠 EthioCode · Phase 3 · L03
╚════════════════════════════════════╝
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
R E A C T Q U E R Y ⚡
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
❝ The best code is the code you never wrote. ❞
ይህን አሰልቺ ኮድ ስንት ጊዜ ጻፍከው? 🤦♂️
» useState(null) // ለ data
» useState(false) // ለ loading
» useState(null) // ለ error
» useEffect( fetch → then → catch → finally )
...ለእያንዳንዱ API call!
...ለዘለዓለም!∝
[ 🛑 STOP. ]
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
useQuery — አንድ Hook። ሁሉም በነፃ። 😎
const { data } = useQuery({ queryKey, queryFn })
🔑 queryKey → ለካሽ መለያ (Cache Address)
📡 queryFn → ዳታውን የሚያመጣው (Data Source)
⏱ staleTime → ዳታው ለ5 ደቂቃ Fresh ሆኖ ይቆያል
🔁 retry → ኔትወርክ ከጠፋ 3 ጊዜ auto ይሞክራል
// ✅ Cache → Auto
// ✅ Error Retry → Auto
// ✅ Background Sync → Auto
// ✅ DevTools → Ready
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
LOADING... ■■■■■■■■■■ 100%
LESSON READY ✔ ዛሬ ምን ይጠብቅሃል?
[01] Query Lifecycle · 🔄 Interactive
[02] useQuery vs useMutation
[03] Cache Explorer · 🗄️
[04] Live Simulator · 🎮
[05] Quiz · 🎯
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
🔗 ethiocodesoftselectphase3l3.netlify.app
📱 በስልክ ለምትገቡ → "Desktop Site" ማብራት እንዳትረሱ!
◄ PREV: Zod Validation · P3·L02
► NEXT: React Hook Form · P3·L04
😶▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
@EthioCodeSoftSelect
Forward ለ developer ጓደኛህ 🚀
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓👌