fulcro 2023-05-22 | Slack Archive

Harry13:05:57

Are there any examples of using react hooks to handle events (I want to capture resize and key input events but any will help)?

(defsc HookThing [this props]
  {:query [:thing/id] ; normal Fulcro component options
   :ident :thing/id
   :use-hooks? true ; generate a hooks-compatible function instead of a React class.
   }
    (hook/useEffect
    (fn []
      (defn handleResize
        []
        (js/console.log "test")))
      (.addEventListener js/window "resize" handleResize))
  )

(def ui-hook-thing (comp/factory HookThing {:keyfn :thing/id}))

I tried this based on js code but couldn't seem to get it to work. Any help/guidance on handling events would be great, thanks!

tony.kay15:05:34

Read the react docs. My guess is you’re getting an error in the js console. useEffect must return undefined or a teardown function, and you should also prevent it from running every render (dependency list). If you insist on doing this kind of thing in the UI, then you probably want Fulcro’s wrapper “use-lifecycle” instead, which is a little nicer notation for doing one thing on mount, and then a different one on unmount.

Harry23:05:13

Thanks! I'll try get it working as is, and then move on to learning the state machine 🙂

Harry12:05:50

(hook/use-lifecycle     (fn []
                            (defn handleResize
                              []
                              (resize this))
                            (.addEventListener js/window "resize" handleResize)
                            (resize this)))

Harry12:05:09

This is the code that ended up working 🙂

tony.kay21:05:48

still not quite right. You want a teardown fn that uninstalls that listener, AND you want to use (fn [] …) instead of doing a side-effect top-level defn inside of this thing…

(hook/use-effect     
  (fn []
    (let [handler #(resize this)]
      (.addEventListener js/window "resize" handler)
    (fn [] (.removeEventListener js/window "resize" handler)))
  [])

tony.kay21:05:32

The empty vector makes it work like use-lifecycle, but you actually want use-effect because you need to remember the exact handler you installed, so you can remove it (which is why you wanted the defn?).

Harry11:05:32

Thank you for all your help! I am working of example "Example 6. https://book.fulcrologic.com/#DrawinginaCanvas" and I get it all working if I apply the use-effect directly to "Child" but whenever I add use-effect? true to the component, it causes the local :coords to return null . Is this expected behavior?

Harry06:06:47

@U0CKQ19AQ Just wanted to follow up if this was a bug or intentional?

tony.kay18:06:18

@U0558HTJE6Q you need to read the React docs. Fulcro has nothing at all to do with refs or hooks, AND the option is use-hooks? not use-effects? . Fulcro just passes these things along directly to react and does absolutely nothing to them. If it isn’t working, the problem is in your code and understanding of React.

tony.kay18:06:21

The example code you are referring to is not using hooks, so useEffect isn’t part of the equation at all

tony.kay18:06:45

It’s using ref, which can call the function with nil . The ref is only available once the DOM node is actually mounted. The way react works is: 1. Run your “render” code to get elements that are meant to go on-screen 2. diff the DOM with your desire 3. Draw the DOM Once the DOM is drawn the ref function can be called with a real value of the DOM node.

2023-05-22

Channels