To provide reactivity, the sdk uses preact signals.
It provides reactivity for both node.js and browser based javascript.
There is also a react hooks to use signals within react.
For more information about signals see preact/signals
For more information about react integration see singals-react
Performance (React)
In order to get the best performance it is recommended to use the 'useComputed' hook, rather than calling the <signal>.value directly.
useComputed can be seen as micro component and supports returning jsx.
For arrays, it is recommended to use the pack/unpack functions.
const tokens = useComputed(() =>
pack(service.tokens.wallet.data.fmt.list.value)
)
return (<>
{ unpack(tokens.value).map((id) => (
<TokenRow key={id} id={id} isVault={true} />
))}
</>)
The row component should get the id and retrieve the raw via the auto mapping
function TokenRow({ id }: { id: string }) {
const token = useComputed(() =>
service.tokens.wallet.data.fmt.map.value[i]
)
const amount = useComputed(() => token?.amount)
const name = useComputed(() => token?.name)
const symbol = useComputed(() => token?.symbol)
const logoURL = useComputed(() => token?.logo)
const logo = useComputed(() => (
<>
<Image width={20} height={20} src={logoURL.value || ''} alt={name.value} />
</>
)
return (
<Center>
<Stack direction="row" width="700px" fontSize={['sm', 'sm', 'md']}>
<Box textAlign="left" width="40px">
<>{logo}</>
</Box>
<Box textAlign="left" width="120px">
<Text>
<>{symbol}</>
</Text>
</Box>
<Box textAlign="left" width="100%">
<Text>
<>{name}</>
</Text>
</Box>
<Box textAlign="left" width="80%">
<Text>
<>{amount}</>
</Text>
</Box>
</Stack>
</Center>
)
Last updated