Hi everyone! I'm having a problem with reagent / figwheel where (I think) my event listeners are getting compounded when figwheel reloads. I have a component with a function in :component-did-mount that attaches an event listener to window resize. After a few saves/reloads with a few of the components mounted my browser shows a noticeable decrease in performance when resizing the window. Any idea how to get around this?

I know more about React than I do Reagent, so I might be wrong, but I think you should be able to remove the event listener in componentWillUnmount?

Is it as sample as removing the event in the unmount?

Ah. Okay, that leads to my next question. I was under the impression that you could only remove named functions from events. Is that right?

yeah, you need a reference to the function to pass into removeEventListener (again, my brain is in JS-land, there might be a different "remove event" function in Google Closure library)

Hmmm, I'll have to think about that. I'm partialing a function on mount which I assume returns a new function.

Maybe I can store the reference somewhere. 🙂

Can someone explain when to use plain Reagent and when to use Reagent with Re-Frame?

@artur if you want something that helps you with managing your app state as well as views then reagent+re-frame. if you already have state management or don't want re-frame's event-stream-reduction-to-a-single-source-of-truth model, then just reagent

☝️ +1

At clojureD Falko Riemenschneider talked something about predictable state vs unpredictable. What does this mean?

as I'm horribly used to om.dom from dom creation, I'm sruggling with the hiccup syntax can someone see why this can't work in reagent?

(defn base-theme [& components]
  (apply ui/mui-theme-provider {}
         components))

(defn root []
  [base-theme
   [:p {:key "a"} "a"]
   [:p {:key "b"} "b"]])

My eyes hurt when I see for loops, but if that's the only way around it, then I will write them.

Can you also show the contents or signature of ui/mui-theme-provider?

it's returns a react element (def mui-theme-provider (r/adapt-react-class (aget js/MaterialUI "MuiThemeProvider"))) could be any react element, it's a question how to make reagent understand a sequence and apply it to one react element

I might be wrong but as far as I understand adapt-react-class returns a react.impl.NativeWrapper You so are actually doing something like

(defn root []
  [react-native-wrapper {}
   [:p {:key "a"} "a"]
   [:p {:key "b"} “b”]])

@fernandohur ok I found out that this is not any react-element, this can only accept one react-element, thougt it returned a div. So yes maybe it works, at least I found parenthesis version of reagent

(r/create-element "div" #js{:className "foo"}
      "Hi " (r/as-element [:strong "world!"])

hi, while reading this link https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29 I have this doubt

when view is rerendered because of @create-new? change, shouldn't search-box not call it's render function because the component is created in [] in view?

or is it that search-box render is called but then reagent sees that is does not have any state change and simple does not look for dom changes

if view is rerendered, so are all of its children

dereffing create-new causes the whole component to be rerendered

however, this is usually not a performance problem, as the DOM is not touched so long as the component returns the same element tree

if you see performance issues, you can spin off the body of the when form as a separate component

(personally I'd consider that premature optimization unless you see high CPU load)