helix 2023-09-24 | Slack Archive

stagmoose08:09:30

When I use the setter inside use-effect, I can see the value of div is 10 initially, And I can also see console print "running use-effect", but the value of div is still 10 not the intended 20 What did I do wrongly?

(defnc app []
  (let [player-ref (hooks/use-ref nil)
        [subtitle set-subtitle] (hooks/use-state 10)
        _ (def debug subtitle)]
    (hooks/use-effect :always
                      (fn []
                        (js/console.log "running use-effect")
                        (set-subtitle 20)
                        ))
    (<>
     (d/h1 {:class "my-8 flex justify-center items-center text-2xl font-bold"} "Sentence Relationships!!")

     (d/div "subtile: " subtitle)
     )))

stagmoose11:09:53

(defnc Tmp []
  (let [[attr setter] (hooks/use-state 10)]
    (hooks/use-effect :once (fn []
                              (setter 20)))
    (d/div (str "this is tmp comp: " attr))))

for this simple example, i will expect it will render a div with 20, but it turns out it's a div with 10 from what i know, the procedure is first render -> run useEffect -> update state -> trigger rerender -> get a div with 20 didn't know what i missed here.

dvingo11:09:18

The body does not need to be wrapped in a function. so you have effectively written the following:

(defnc Tmp []
  (let [[attr setter] (hooks/use-state 10)]
    (hooks/use-effect :once nil (fn unmount []
                              (setter 20)))
    (d/div (str "this is tmp comp: " attr))))

stagmoose11:09:35

It works now haha! Didn't notice this is different from useEffect. Thanks dvingo!!

🎉 1

😀 1

lilactown16:09:17

it was probably printing "running use-effect" when the component was running its cleanup of previous effects during render/unmounting

2023-09-24

Channels