Select slice of atom with dynamic data

[geoffreydhuyvetters]

Is there a way to select data based on data coming from another hook?

Like this

data structure

{
  "be4b21e0-bd0a-4b7e-9e17-a8da4d003634": {
    "name": "sweater",
    "quantity": 2
  }
}

const Product = () => {
  const productId = useProductId();
  const [quantityOfProductInCart] = useAtom(???) // need to pass down the the product id

[dai-shi]

Yes, in this case you create a new atom in render.
This is an expected use case, but it requires useMemo to get a stable reference.

const Product = () => {
  const productId = useProductId();
  const fooAtom = useMemo(() => atom((get) => get(barAtom)[productId].quantity), [productId]);
  const [quantityOfProductInCart] = useAtom(fooAtom)

[geoffreydhuyvetters]

Nice, I was playing around with useMemo for a bit but didn't get it to work.

Thanks!