useLinkedState has shipped. 🔥
React’da shunaqa holatga duch kelganmisiz?
Tasavvur qiling, sizda
Profile Editor bor.
User profilidagi
nameni input orqali o‘zgartiryapsiz. Shu paytda local state siz yozayotgan qiymatni saqlab turishi kerak.
Lekin boshqa user profilini ochsangiz, input yangi user’ning
nameidan boshlanishi kerak.
Mana shu yerda Octane’da qiziq API chiqardik
useLinkedState.
const [name, setName] = useLinkedState(
props.user.id,
() => props.user.name
);
Bu hook’da birinchi argument -
source.
props.user.id o‘zgarmasa:
→
name siz kiritgan local o‘zgarishlarni saqlab turadi.
user.id o‘zgarsa:
→ hook yangi user’ning
nameini darhol qaytaradi.
Va buni qilish uchun:
1
useEffect kerak emas
2 render vaqtida
setState qilish kerak emas
3 qo‘shimcha render kutish kerak emas
Yana bir qiziq tomoni bor.
useLinkedState yangi source kelganda oldingi source va local value’ni ham olish imkoniyatini beradi claculationda.
const [selection, setSelection] = useLinkedState(
items,
(nextItems, previous) =>
nextItems.find(
(item) => item.id === previous?.value?.id
) ?? nextItems[0] ?? null
);
Masalan, list yangilanganda user tanlagan item hali ham mavjud bo‘lsa - selection’ni saqlab qolish mumkin.
Birinchi render’da
previous -
undefined.
Source o‘zgarganda esa:
source,
value
}
ko‘rinishida keladi.
Default holatda source va value
Object.is orqali solishtiriladi. Kerak bo‘lsa
sourceEqual va
valueEqual orqali custom comparison ham berish mumkin.
Va
useState kabi
useLinkedState ham uchinchi tuple qiymati sifatida
getValue beradi. Bu async yoki delayed callback ichida eng so‘nggi value’ni o‘qish uchun ishlatiladi.
Qisqasi,
useLinkedStatening g‘oyasi juda sodda:
Local state bor, lekin u ma’lum bir source bilan bog‘langan. Source o‘zgarsa, state yangi source asosida qayta boshlanadi.Sodda API, lekin ayniqsa editable UI’larda juda foydali pattern.
Docs:
https://octanejs.dev/docs/core-apis#use-linked-state