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)]
    ...))

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: https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L151-L153 • after the component has been defined, the signature function is called with a hash of the current hooks used inside the component: https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L179-L182 • next, the component is then registered with a unique identifier for the component that will remain stable across reloads: https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L183 • finally, the component calls the signature function on render to handle some edge case with custom hooks I can’t remember: https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L165-L166

helix handles generating all that code for you

@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