Created
May 23, 2025 18:09
-
-
Save arootroatch/383718641b5a40d4d0a899b900e34a86 to your computer and use it in GitHub Desktop.
ClojureScript React Refs and useEffect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (ns scratch-7 | |
| (:require [reagent.core :as reagent] | |
| [reagent.dom :as dom] | |
| [react :as react])) | |
| (defn noop | |
| "Does nothing, returns nil" | |
| []) | |
| (defn highlight-code [node] "Highlight code snippets") | |
| (defn with-nested-react-keys [hiccup] "Add react keys to a nested data structure") | |
| (defn old-chart [chart-atom conf] | |
| (reagent/create-class | |
| {:display-name "bar-chart" | |
| :component-did-mount (fn [comp] | |
| (let [chart (js/Chart. (dom/dom-node comp) (clj->js conf))] | |
| (reset! chart-atom chart) | |
| chart)) | |
| :reagent-render (fn [a] [:canvas#-chart])})) | |
| ;---------------- | |
| (defn chart-with-ref [chart-atom conf] | |
| (reagent/with-let [ref (atom nil)] | |
| (reagent/create-class | |
| {:component-did-mount #(let [chart (js/Chart. @ref (clj->js conf))] | |
| (reset! chart-atom chart) | |
| chart) | |
| :reagent-render (fn [] [:canvas#-chart {:ref #(reset! ref %)}])}))) | |
| ;---------------- | |
| (defn chart-with-ref-and-use-effect-1 [chart-atom conf] | |
| (reagent/with-let [ref (atom nil)] | |
| (react/useEffect #(do (let [chart (js/Chart. @ref (clj->js conf))] | |
| (reset! chart-atom chart) | |
| chart) | |
| noop) (array)) | |
| [:canvas#-chart {:ref #(reset! ref %)}])) | |
| ;---------------- | |
| (defn- update-chart-1 [ref conf chart-atom] | |
| (let [chart (js/Chart. @ref (clj->js conf))] | |
| (reset! chart-atom chart) | |
| chart)) | |
| (defn chart-with-ref-and-use-effect-2 [chart-atom conf] | |
| (reagent/with-let [ref (atom nil)] | |
| (react/useEffect #(do (update-chart ref conf chart-atom) noop) (array)) | |
| [:canvas#-chart {:ref #(reset! ref %)}])) | |
| ;---------------- | |
| (defn- update-chart-2 [ref conf chart-atom] | |
| (let [chart (js/Chart. @ref (clj->js conf))] | |
| (reset! chart-atom chart) | |
| noop)) | |
| (defn chart-with-ref-and-use-effect-3 [chart-atom conf] | |
| (reagent/with-let [ref (atom nil)] | |
| (react/useEffect #(update-chart ref conf chart-atom) (array)) | |
| [:canvas#-chart {:ref #(reset! ref %)}])) | |
| ;---------------- | |
| (defn old-markdown-container [hiccup] | |
| (reagent/create-class | |
| {:reagent-render (fn [hiccup] [:div.markdown (with-nested-react-keys hiccup)]) | |
| :component-did-mount (fn [this] (highlight-code (dom/dom-node this))) | |
| :component-did-update (fn [this & _] (highlight-code (dom/dom-node this)))})) | |
| (defn new-markdown-container [hiccup] | |
| (reagent/with-let [ref (atom nil)] | |
| (react/useEffect #(when @ref (highlight-code @ref) noop) nil) | |
| [:div.markdown {:ref #(reset! ref %)} (with-nested-react-keys hiccup)])) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment