Valisher Botirov | Development

Animatsiyalar bilan ishlashga Nextjs uchun yaxshi UI package ekan. Tailwind css ga moslangan ekan. https://ui.aceternity.com/ #react#next#package ☑️@valisherbotirov

Real loyihalarda malumotlarni qidirish search fungsiyasidan ko'p foydalanamiz. Aksar hollarda qidiruv fungsiyasini search inputning change xossasiga bog'lab ketiladi. Natijada input necha marta o'zgarish bo'lsa bir vaqting o'zida qidiruv fungsiyasi ham shuncha marta ishlab serverga ham shuncha marta request jo'natiladi. Bu esa best practices emas. Ko'p miqdorda jo'natilgan so'rovlar serverga yuklamani kuchaytirib yuborishi mumkin. Bunda hollarsa nima qilinadi? Input o'zgarganda serverga jo'natiladigan so'rovlarni debounce kabi fungsiya bilan tartibga solib ketish ancha foydali usul. Quyida React / TypeScript uchun debounce fungsiyasi custom hook holiga olib chiqilgan. import {useState, useEffect} from 'react'; export default function useDebounce(value: string, delay: number) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect( () => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay] ); return debouncedValue; } #react#debounce#code ☑️@valisherbotirov

Persist Storage Internet do'kon yasayotgan vaqtimiz user cartga qo'shayotgan productlarni local storage ga saqlab qo'yishimiz kerak bo'ladi. Proyekt kattalashib borgan sari local storage ni boshqarib borish ham murakkablashib boradi. Product qo'shilganda, ayirilganda va o'chirilganda state va local storageni kuzatib borishimiz kerak. Bu esa ishimizni biroz ko'paytiradi. Bunday vaziyatlarda bizga Persist Storage juda ham qo'l keladi. Persist Storage stateni kuzatib turadi va har stateni yangilanganda lokal storageni ham o'zi yangilab boradi. Proyekt qayta yuklanganda esa agar lokal storageda saqlangan productlar bo'lsa statega o'sha productlarni saqlab qo'yadi. Persist Storage bizga ishimizni juda ham osonlashtirib beradi. Buni Reactda Redux/Redux-Toolkit bilan Vue da Pinia / VueX lar bilan ham integratsiya qilib ishlatish mumkin. Pastda qo'llanma uchun havola qoldiraman. 📔 Reactda Redux bilan ishlatish uchun 📔Vueda Pinia bilan ishlatish uchun #docs#react#vue#persist_store ☑️@valisherbotirov