Mygovni ya’ngi versiyasida gʻalati bug bor. Ba’zi xizmatlar saytni yangi versiyasida ishlamaydi lekin eski versiyasida ishlaydi. Masalan taqiqni tekshirishda xozir yangi versiyada “Bad Request. Cannot parse the URL” degan xatolik kelyabdi.

A dream team

Redux selectorlarni memoize qilish

Reduxda stateni bir qismini ajratib olish uchun, selector funksiylarni odatda useSelector yoki mapState bilan ishlatamiz.
Ushbu selector funksiyalar har bir dispatch qilingan action uchun qayta chaqiriladi.
Ya'ni reduxdagi istalgan state uchun action dispatch qilinsa, hamma selectorlar qayta re-run bo'ladi.

Komponent qayta render bo'lishini aniqlash uchun useSelector va mapState === (strict equality) ishlatadi.
Agar selector har doim yangi reference qaytaradigan bo'lsa, o'sha selectorni ishlatgan komponent har bitta action dispatch bo'lganda qayta render bo'ladi. Bu odatda yangi object qaytaradigan yoki yangi array yaratadigan metodlardan foydalangan selectorlarda muammo yuzaga chiqaradi.

Ortiqcha re-renderlarni oldini olish uchun selectorlarni memoize qilish kerak.
Memoize degani bu keshlash, ya'ni funksiyaga kirayotgan input va ular uchun qaytgan natijani saqlab qo'yib, keyingi funksiya chaqrilishlarida keshdan natijani olib qaytarishga aytiladi.

Amaliy Misol:
Aytaylik sizda mouse positionni redux store'ga saqlaydigan action bor va u har pointermove hodisa sodir bo'lganda chaqiriladi. Bu hodisa sekundiga yuz martalab sodir bo'lishi mumkin.

document.addEventListener("pointermove", (e) => {
    const [x,y] = [e.clientX, e.clientY];
    dispatch(setMousePosition({ x, y }))
})

Endi qaysidir bitta komponentangizda har safar yangi reference qaytaradigan selector bor.

function ActiveUsers() {
    const activeUsers = useSelector((state) => state.users.filter(user => user.isActive));
    /// ....
}

ActiveUsers komponent har safar foydalanuvchi sichqonchani qimiratganda qayta render bo'ladi.

Buni oldini olish uchun reselect kutubxonasining createSelector funksiyasidan foydalanamiz. Bu funksiya redux toolkit packageni ichida mavjud.

import { createSelector } from "@reduxjs/toolkit";

const selectUsers = (state) => state.users;

const selectActiveUsers = createSelector([ selectUsers ], (users) => {
   return users.filter(user => user.isActive)
})

function ActiveUsers() {
    const activeUsers = useSelector(selectActiveUsers);
    /// ....
}

Xulosa:
Reduxda yozayotgan selectorlaringizga e'tibor bering. Agar selectorda yangi object qaytarayotgan bo'lsangiz, yoki arrayni manipulate qilib yangi array qayataradigan metodlardan foydalanayotgan bo'lsangiz (filter, map, reduce va h.z.), demak o'sha selectorni memoize qilishingiz zarur.

SVG path qanday ishlashi interaktiv tarzda tushuntirilgan maqola

https://www.nan.fyi/noscript-paths

Pullik 1:1 konsultatsiya yo'lga qo'ydim.

Asosiy yo'nalishlar:
- Startuplar: Pitch deck ko'rib chiqish & feedback. Texnik yordam.
- Chet el kompaniyalarida ishlash: suhbatga tayyorgarlik. Mahalliydan chet el kompaniyasiga yo'l
- Dasturchilar uchun YouTube kontent strategiyasi
- Roadmap & karyera bo'yicha yo'l-yo'riq

Faqat shanba kunlari. Soat 10:00 va 11:00da.

Platforma orqali uchrashuv belgilashingiz mumkin:
1. Kerakli sana va vaqtni tanlang
2. Email kiriting (faqatgina @gmail)
3. Uchrashuv belgilang
4. Uchrashuv havolasini email va telegram bot orqali qabul qilib oling.

Support uchun: @ulugbek_io_support

If-else yoki mantiqiy operator yozayotganda hushyor bo'ling!

JavaScriptda bir nechta falsy qiymatlar bor. Ular null, undefined, 0, -0, "", false, NaN, 0n.
Agar ularni conditional kod yozayotganda noto'g'ri qo'llasangiz, dasturda kutilmagan muammolar yuzaga kelishi mumkin.

1-misol:
type ServerResponse = { count?: number }

if(!count) { <— foo funksiya faqat count === undefined bo'lsa ishlashi kerak.
foo(count);
}

Yuqoridagi if ichidagi expressionda count 0 bo'lsa ham, undefined bo'lsa ham falsy hisoblanadi, chunki ! operatori istalgan falsy qimatda true natija qaytaradi.

Buni to'g'irlash uchun if(count === undefined) deb tekshirish kerak.

2-misol:
type ServerResponse = { has_marked_as_done: boolean | null }

displayYesOrNo(response.data.has_marked_as_done || "N/A")

Ushbu kodda has_marked_as_done true yoki false yoki null bo'lishi mumkin. Agar null bo'lsa, default holatda "N/A" ko'rsatishimiz kerak.
Bu holatda || operatoridan chap tomonda turgan o'zgaruvchi istalgan falsy qiymat (ushbu misolda false va null) bo'lganda "N/A" qaytaradi.

Buni oldini olish uchun ?? operatoridan foydalanishimiz mumkin yoki === operatori orqali o'zgaruvchini null qiyamtga ga tekshirishimiz mumkin.

Xulosa:
Shunga o'xshagan notog'ri if conditionlar array, NaN, empty object bilan ham sodir bo'lishi mumkin.
Bundan mantiqiy xatoliklarni oldini olish uchun quyidagilarni maslahat bergan bo'lar edim:

- Har doim o'zgaruvchini avvalo null yoki undefined'ga tekshiring. Agar siz kodingizni o'zgaruvchi qiymati 0, "" (empty string) yoki false bo'lganda ham ishlatmoqchi bo'lsangiz, bunday qiymatlarga qasddan tekshirib keting.

- Number qiymatlarni NaN bo'lib qolish holatini ham hisobga oling

- Serverdan kelayotgan arraydan foydalanayotganingizda avval Array.isArray([]) qilib o'zgaruvchi array ekanligiga ishonch hosil qiling.

- || operator o'rniga iloji boricha ?? (nullish coalescing) ishlating. Agar || ishlatishingiz kerak bo'lsa, buni qasddan qiling, avtomatik tarzda yozmagan ma'qul.

- Pure funksiyalarni business logicdan alohida olib chiqing va har-xil case'lar bilan unit test yozib qo'ying.

Ya'na qanday shu kabi holatlarni bilasiz? Izohda fikr ulashing

WebCodecs API yordamida videoni scrollga bog'lab frame-aniqlikda animatsiya qilish:

https://lionkeng.medium.com/a-tutorial-webcodecs-video-scroll-synchronization-8b251e1a1708

Yet another IDE: https://antigravity.google/

Qiziq, Cursor editor auto update bo'lganidan keyin code formatting umuman ishlamay qoldi.
Hamma sozlamalarni ko'rib chiqdim. Hech narsa yordam bermadi. LLM-lar hayratda.

Keyin google qilsam, Cursorni forumida 2 kun oldin issue ochishgan ekan. Boshida Cursordagilar aybni Prettier extensionga ag'darib qo'yishibdi. Keyin extensionni avtoridan yaxshigina javob olishganidan keyin oxiri ayb ularda ekanini tan olishibdi.

2.4 relizda bu bugni to'g'irlab uni oyni oxirigacha chiqazishmoqchi ekan. Qiziq, juda qiziq...

https://forum.cursor.com/t/prettier-extension-fails-with-cannot-format-filetype-files-error-on-all-file-types/149166

"Agar React veb ilovangizdagi performance'ni tekshirish uchun react-scan'dan foydalanmayotgan bo'lsangiz, ko'p yaxshi narsalardan quruq qolayabsiz."

— Cooked dev

Eski maqola lekin ko'p maslahatlar hali ham dolzarb: https://medium.com/frontmen/art-of-debugging-with-chrome-devtools-ab7b5fd8e0b4

Xozirgi kundagi AI haqida qisqacha: https://adventures.nodeland.dev/archive/the-human-in-the-loop