Join the Webstudio community

Updated last year

nanostores/react

At a glance

The post is a request for help from the maintainers of the nanostores/react library. The comments discuss issues with using the useStore hook and the $profileBuilder atom, including TypeScript compatibility and the use of useSyncExternalStoreWithSelector. Community members suggest using map or deepMap instead of atom, and provide code examples. There is also a discussion about debouncing computed values, but no definitive answer is provided.

Useful resources

EEzio

or anyone from the maintainers

18 comments

BBogdan

What's your question?

BBogdan

nanostores/react

EEzio

https://github.com/nanostores/react/issues/25

EEzio

I think it can be simplfied to something like

Attachment

EEzio

Also im not sure how to use useStore, typescript seems to scream at me. the name prop does exist in the profileBuilder atom

Attachment

BBogdan

useSyncExternalStoreWithSelector is experiment and not official react api, it requires additional package to install.

BBogdan

What's in $profileBuilder?

EEzio

Attachment

BBogdan

Would be easier to have whole snippet in code

EEzio

ah sorry

EEzio

Attachment

EEzio

Plain Text

 "typescript": "5.2.2",
 "nanostores": "0.9.5",
 "@nanostores/react": "0.7.1",

EEzio

Plain Text

import { atom } from 'nanostores'
import { ReactElement } from 'react'
import { useStore } from '@nanostores/react'

const x = { name: 'm', id: '1' }
export const $profileBuilder = atom(x)

export function Navbar(): ReactElement {
  const p = useStore($profileBuilder, { keys: ['name'] })

  return <pre> {JSON.stringify(p, null, 2)}</pre>
}

BBogdan

Should be used "map" or "deepMap" instead of atom

BBogdan

Everything with "setKey" method

EEzio

oh got it, thanks for your precious time

EEzio

@TrySound is there a way to debounce computed ?

for example I want to validate a certain object but it's frequnetly updated, so I want toe debounce if it's valid or not

BBogdan

You can only prevent computations with more granular computed inputs

Add a reply