2022-11-19 helix | Clojure Slack Archive

helix

pbranes 2022-11-19T16:46:04.546289Z

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 Miller 2022-11-19T17:00:22.405409Z

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

pbranes 2022-11-19T17:02:24.591829Z

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

pbranes 2022-11-19T17:16:25.162459Z

That worked!! Thanks again

Jimmy Miller 2022-11-19T17:28:28.623529Z

No problem :)

J 2022-11-19T22:59:14.669529Z

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?

lilactown 2022-11-20T20:13:01.097329Z

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

lilactown 2022-11-20T20:14:52.836329Z

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

lilactown 2022-11-20T20:15:31.385339Z

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

J 2022-11-20T20:38:12.832439Z

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

Clojurians Log v2

helix