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