Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2022-11-19

Channels

#helix
<
2022-11-19
>
pbranes16:11:04

What am I missing? My canvas renders ok but the height and width from the parent have no effect (defnc Canvas [height, width] (let [canvas (hooks/use-ref nil)] (hooks/use-effect :always (let [context (.. canvas -current (getContext "2d"))] (js/console.log context) )) (d/div (d/canvas {:id "canvas" :ref canvas :style {:height height :width width :background-color "blue"}}))) ) (defnc sandbox [] ($ Canvas 900 500))

Jimmy Miller17:11:22

(On mobile) defnc expects a map as the argument. So do [{:keys [width height]} and then pass then as a map in the parent.

pbranes17:11:24

That makes sense. I will give it a try. Thx

pbranes17:11:25

That worked!! Thanks again

J22:11:14

Hi! Does anyone has tried the useSyncExternalStore with datascript? I have a mistake with this: 

defn use-datascript [query]
  (let [value (dts/q query (dts/db dts-conn))
        [subscribe snapshot] (hooks/use-memo [query value]
                                             [(fn [f]
                                                (let [key (random-uuid)]
                                                  (dts/listen! dts-conn key f)
                                                  (fn [] (dts/unlisten! dts-conn key))))
                                              (fn [] value)])]

    (react/useSyncExternalStore subscribe snapshot))
When a transact! occur, the hook is not played 😕 . Any idea?

lilactown20:11:01

I don't think you're rerunning your query when something changes

lilactown20:11:52

when f is called by dts/listen, react then calls the snapshot function. if the snapshot returns the same value, it doesn't re-render your component

lilactown20:11:31

in this case, snapshot always returns the value that the component was last rendered with, so it's likely it won't have changed unless something else re-rendered your component

J20:11:12

Thanks for your explication. I have update the hook: 

(defn use-datascript [query & opts]
  (let [db (react/useSyncExternalStore
            (react/useCallback (fn [listener]
                                 (let [key (random-uuid)]
                                   (dts/listen! dts-conn key listener)
                                   (fn [] (dts/unlisten! dts-conn key))))
                               #js [dts-conn])
            (react/useCallback (fn [] (dts/db dts-conn))
                               #js [dts-conn]))]
    (apply dts/q query db opts)))

💯 1