Fork me on GitHub
#reagent
<
2017-02-27
>
joshkh00:02:19

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?

rgdelato00:02:50

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?

joshkh00:02:55

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

joshkh00:02:34

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?

rgdelato00:02:03

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)

joshkh00:02:49

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

joshkh00:02:29

Maybe I can store the reference somewhere. ๐Ÿ™‚

artur09:02:54

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

mccraigmccraig10:02:10

@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

gadfly36110:02:43

โ˜๏ธ +1

artur12:02:42

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

hlolli14:02:39

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

hlolli14:02:51

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

fernandohur14:02:24

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

hlolli14:02:43

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

fernandohur14:02:26

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โ€]])
Which I think wonโ€™t work

hlolli14:02:18

@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!"])
yummy ๐Ÿ˜„

tomaas17:02:29

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?

tomaas17:02:53

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

pesterhazy18:02:55

if view is rerendered, so are all of its children

pesterhazy18:02:23

dereffing create-new causes the whole component to be rerendered

pesterhazy18:02:07

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

pesterhazy18:02:42

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

pesterhazy18:02:10

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