Fork me on GitHub
#re-frame
<
2021-11-01
>
pablore15:11:27

Question, given that a ratom is the way reagent replaces React’s useState, what is the reagent/re-frame way of doing the same as React/useEffect and React/useCallback?

p-himik15:11:27

You can use them directly. For example: https://github.com/reagent-project/reagent/blob/c214466bbcf099eafdfe28ff7cb91f99670a8433/examples/functional-components-and-hooks/src/example/core.cljs#L12-L22 But note that the component has to be used as a functional one, via :f>. I often see things that you'd put in useEffect be put just in the render function itself. But AFAIK the render function can be called multiple times (no clue in which scenarios) and thus such code can be called more than needed. As for the useState - form-2 components replace it, along with reagent.core/with-let.

lispers-anonymous16:11:30

This section of the re-frame documentation addresses some of the same issues that useCallback was created for: https://day8.github.io/re-frame/on-stable-dom-handlers/#but-wait-functions

alexdavis16:11:32

For useEffect you can also use create-class and the old ‘component-did-update/mount’ style

Ryan17:11:22

I have a global react ref I need to store for one of those pop-over UX message controllers (<Toast ref={toast} />) .. previously I've stored refs in atoms local to the component because I havnt needed to span components (they've been local controllers for popopver menus or similar) .. what should I do with this ref? can I store the ref in the reframe db?

Ryan17:11:54

the goal is to be able to control it by dispatching events to it

p-himik17:11:21

What exactly such an event would do?

Ryan17:11:22

send the reference a message e.g. toast.show{"type": "error" "message": "Backend error 500: something"}

Ryan17:11:37

I guess the reference is just a JS element so it should be trivial to just store it in the db?

Ryan17:11:38

I think in my head cannon for interop javascript elements are some weird sacred thing

p-himik17:11:24

Sounds like you can store something like :toast-data in app-db and call toast.show in a re-frame wrapper that would be subscribed to :toast-data.

p-himik17:11:42

In that case, the relevant events would just store the right :toast-data.

Ryan17:11:04

Yeah, so far I've gotten the element (when logged, its definitely the 'Toast' object I'm looking for)

p-himik17:11:01

My point is, you seemingly don't need refs at all.

Ryan19:11:01

How would I achieve that? I have the

[:> Toast]
In a parent component, and the events all queued up to set the fields to the db, and I have the subscription wired up and working, does the parent component actually bind the sub? Ive been googling for awhile and cant find how to glue it toghether

p-himik20:11:03

I would wrap Toast in my own toast component that accepts the data that needs to be shown as an argument. It has to be a form-3 component that calls toast-obj.show on a mount and on each update. How you get that toast-obj object depends on the API. If it absolutely must be a ref, then you do have to use a ref - but it won't travel outside of that component.

🙏 1
emccue03:11:35

We do something similar to your goal

emccue14:11:43

basically a global reagent atom seperate from re-frame for that part of our state, and we have an :fx that talks to the “notification golem” which has some view mounted specifically for it

emccue14:11:47

(forgot to hit send)

emccue14:11:11

its definitely outside of the “reframe model”, but we’ve found it a convenient thing to be an :fx

p-himik14:11:26

Why not have it inside re-frame's app-db?