React.js-da qo‘lda useEffect bilan ishlashni yaxshi ko‘rmiman.

Ko‘pincha useEffect-dagi mantiq boshqa joylarda o‘sha-o‘sha boilerplate bilan yoziladi.

Masalan, oxirigi jonli efirda, oddiy socket event listenerni har bitta komponentda qo‘shish uchun useEffectdan foydalanish kerak, eventni register qilish kerak, va memory leak bo‘lmaslik uchun eventni off qilish kerak.

Davomi va yechim ⬇️

Next.js 15 yangiliklar

• Eksperimental React Compiler. Endi compiler siz o‘rningizga useMemo, useCallback va boshqa optimizatsiyalarni qiladi. Bu degani kod toza, oddiy va tez bo'ladi. Zo'r!

• Turbopack local dev uchun stabil bo'ldi 🎉 Turbopackdan foydalanish uchun: next dev --turbo. Bu localda ishlash jarayonini ancha tezlashtiradi.

• Dynamic funksiyalar (cookies, headers, ...) endi async bo'ladi, va ularni await qilishingiz kerak. Buning uchun oddiy codemod bor va qo'lda xech narsani o'zgartirishingiz shart emas.

• Endi, default ravishda, Next.js fetch requestlarni, GET Route Handlerslarni va Client Routerni cacheddan uncachedga o‘tkazdi. Endi cachedan foydalanish uchun siz cachega opt-in bo'lishingiz kerak. Yangi Next.js dasturchilar uchun bu yaxshi yangilik. Lekin manga oldingi cache defaultlar yoqardi, bu ham yomon emas.

• Endi developmentda, Next.js sizga aniq ko'rsatadi – qaysi page static va qaysi page dynamic. Bu narsani next build oldin ham ko'rsatgan. Lekin endi aniq visual ravishda ham bilinadi.

• Yangi <Form> component layout va loading UI-larni prefetch qilib, form submissionda client navigationdan foydalanadi, va agar JS ishlamasa oddiy form-ga fallback qiladi.

• Endi next.config.js va next.config.ts (typescript) support qilinadi. Bu degani NextConfig typedan foydalanshingiz mumkin.

• Hydration xatolar endi tushunish uchun osonroq bo'ldi.

• instrumentation.js yordamida performance va errorlarni monitor qilib Sentry kabi servislarga ma'lumotlarni bervorishingiz mumkin.

• Server actions xavfsizligi yaxshilandi

• Self-host qiladiganlar uchun yangiliklar

Ko'proq ma'lumot

Next.jsdagi yangi <Form> component qaley?

Features-lari oddiy va tushunarli.

1️⃣ Foydalanuvchi formni ko'rganida, Next.js formning action URL uchun "loading" UI-ni prefetch qilib qo'yadi.

Prefetches the path when the form becomes visible, this preloads shared UI (e.g. layout.js and loading.js), resulting in faster navigation.

<Link>da ham shunaqa kabi narsa bor:

Prefetching happens when a <Link /> component enters the user's viewport (initially or through scroll). Next.js prefetches and loads the linked route (denoted by the href) and data in the background to improve the performance of client-side navigation's. Prefetching is only enabled in production.

2️⃣ To'liq sahifani o'chirib, yangi sahifani request qilish o'rniga, <Form> client-side navigationdan foydalanadi.

3️⃣ Va albatta progressive enhancement, ya'ni agar JS hali yuklanmagan bo'lsa oxirigacha yoki JS umuman foydalanuvchida yo'q bo'lsa, <Form> oddiy <form>ga fallback qiladi.

⚡️ Bu shortcutlardan macbookimda har kuni foydalanaman

Man uchun shortcutlar judayam muhim, shortcutlar nafaqat ishimi tezlashtiradi, ishimi judayam yoqimli qiladi.

VSCode ichida
• Sidebarni ko'rsatish / bekitish: ⌘ + B
• Explorerni ko'rsatish: ⌘ + ⇧ + E
• Source controlni ko'rsatish: ⌃ + ⇧ + G
• Extensionlarni ko'rsatish: ⌘ + ⇧ + X
• Fayllarni qidirish: ⌘ + P
• Symbollarni qidirish: ⌘ + T
• Pastdagi panelni ko'rsatish / bekitish: ⌘ + J
• Terminalni ochish / terminalga fokus o'tkazish: ⌘ + `

Chrome ichida
• Tablarni qidirish: ⌘ + ⇧ + A
• Keyingi / oldingi tabga o'tish: ⌘ + ⌥ + ← va ⌘ + ⌥ + →
• Address barga fokus o'tkazish: ⌘ + L
• Yangi tab ochish: ⌘ + T
• Yangi window ochish: ⌘ + N
• Incognito window ochish: ⌘ + ⇧ + N
• Devtoolsni ochish: ⌘ + ⌥ + I

Arc ichida
• Page URLni copy qilish: ⌘ + ⇧ + C
• Little Arcni ochish: ⌘ + ⌥ + N
• Tabni ikta tabga bo'lish (split view): ⌘ + ⇧ + =
• Arcning palitrasini ochish: ⌘ + T
• Address barga fokus o'tkazish: ⌘ + L
• Devtoolsni ochish: ⌘ + ⌥ + I
• Keyingi / oldingi tabga o'tish: ⌘ + ⌥ + ← va ⌘ + ⌥ + →
• Zoom in va zoom out: ⌘ + + va ⌘ + -
• Zoomni reset qilish: ⌘ + =
• Historyni ochish: ⌘ + Y

YouTube ichida
• Search inputga fokus o'tkazish: /
• Videoni pauza qilish: K
• Videoni orqaga o'tkazish: J
• Videoni oldinga o'tkazish: L
• Videoni tezlashtirish: ⌘ + >
• Videoni sekinlashtirish: ⌘ + <

Ko'pincha, masalan YouTubeda, xuddi Vimdagi shortcutlar (H, J, K, L) ishlidi.

▶️ "Code with me" jonli efir – shunchaki musiqa, ish va productivity

Edit: bu efirda man hech narsa gapirmiman

Musiqa shu yerda