Fork me on GitHub

I did a quick search and nothing came up, is there some guide maybe on how to use async stuff with hooks? That is, I am somewhat familiar with csp, but haven't used it in a long time. I know that I want to run a .focus() call in a use-layout-effect hook, every time some specific event happens. I could use an event listener in a useEffect that runs once and then trigger it every time, but that requires me to add additional references to the components, complicating things. Instead, I would like to export a channel and when a specific message appears on the channel, run the layout effect. Does this make sense?


Hrm I think that you can’t control to run or not run a layout effect, right? Rules of hooks say no conditionals. I haven’t used core async so any guidance might be wrong there, but I think the general approach is to start a “process” on mount and clean it up on unmount. Process could be an event listener or a go-loop?


You can run it with dependencies and internal conditionals


so you trigger when changes something and then check that the something isn't null


@ashnur it does make sense.


I used hook that returns a channel


and once the channel got something, it takes it and put it on a state / atom.


when I'm thinking about it, you can actually build a state management system with core.async


maybe there is one already?


Maybe, but I want to keep this simple dependency and instrumentation wise, at this point the whole thing is just some hooks, not even a use-reducer


Good idea to make a custom hook return a channel, I was trying to imagine it from the other side where the message is coming from, now it's clear why that is a bad idea : )


Should fast-refresh work for components where I'm not using helix at all? e.g.

(defn c [^js props]
  (let [[s s!] (react/useState nil)]
I'm not saying it doesn't (haven't tested first hand), but I have reports it doesn't & I wanted to check whether I'm supposed to dig in or not.


it will not work, no


for each component, certain function calls need to be emitted to register the component with the fast-refresh runtime


the moving pieces are: • a “signature” function is created specifically for the component: • after the component has been defined, the signature function is called with a hash of the current hooks used inside the component: • next, the component is then registered with a unique identifier for the component that will remain stable across reloads: • finally, the component calls the signature function on render to handle some edge case with custom hooks I can’t remember:

👍 4

helix handles generating all that code for you


Is there anything else to be done to get fast-refresh working? Shadow, repl support, etc?


AFAIK shadow supports it well enough when using the :reload-strategy :full dev config


I think there’s still some work to be done to ensure that we are reloading hooks correctly. the heuristic helix currently uses to generate the hook signature per component is pretty naive


and currently, custom hooks are not handled at all


but it should work for the 80% case


by “custom hooks are not handled at all” I mean that you can generate signatures for custom hooks so that changing a custom hook will also reload components that use it correctly


We've got it working with Figwheel


glad to hear!


@lilactown do you use forwardRef ?


I haven’t used forwardRef but helix components should support it


what’s up?


eh, I am just struggling between a bunch of bad decisions : )


have to figure where to add an additional element just so I can scroll it into the view and then use a reference from it and share it with the rest of the app