Clojurians Log v2

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

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!