This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-14
Channels
- # announcements (3)
- # aws (7)
- # babashka (108)
- # beginners (222)
- # bristol-clojurians (3)
- # calva (8)
- # chlorine-clover (1)
- # cider (14)
- # clj-kondo (4)
- # cljdoc (6)
- # cljs-dev (89)
- # cljsrn (13)
- # clojars (6)
- # clojure (89)
- # clojure-australia (1)
- # clojure-europe (11)
- # clojure-italy (9)
- # clojure-losangeles (11)
- # clojure-nl (6)
- # clojure-spec (2)
- # clojure-sweden (1)
- # clojure-uk (9)
- # clojurescript (47)
- # conjure (18)
- # datomic (7)
- # docker (1)
- # figwheel (43)
- # figwheel-main (2)
- # fulcro (31)
- # kaocha (3)
- # leiningen (7)
- # luminus (2)
- # nrepl (14)
- # off-topic (24)
- # pathom (5)
- # pedestal (5)
- # rdf (4)
- # re-frame (49)
- # reagent (12)
- # reitit (9)
- # rum (21)
- # shadow-cljs (109)
- # tools-deps (35)
- # vim (8)
- # wasm (1)
No one's using the React Dev Tools to highlight updates? 😢
Thanks. What version are you using? I’m on v0.6.0. I wonder if that’s the issue. 😕
Yep! Thanks.
Do you have a specific problem in mind? Usually, println works for me 🙂
Yea, I wanted to highlight changes on the whole app to see unnecessary re-rerenders so my team can get a quick high-level view if it’s a problem. There’s enough components, println isn’t going to work.
I was troubleshooting why a tooltip wasn’t rendering properly and realized the second half of our component hierarchy was re-rendering every cycle? 🙈 In about 10 seconds 20 components re-rendered about 1000 times. Nothing changed on the UI. 😆 > reagent: business-level components > react: > Statistic > Tooltip > Popover > Popper.js wrapper
wow! Is react dev tools supposed to able to help with that somehow?
Yea, if you enable the “Highlight on update” option it can show you how often your components re-render. It’s a quick way to see potential perf issues. I can’t speak to how reagent handles updates (something about atoms dereferencing), but the last I checked React components re-render when the props are not strictly equal by object reference, not deep equality. That means these you can have gotchas like these:
// Creating a new object call
const Container = props => {
const arg = { key: 'value', ...props };
// ^
// If the arg changes often, downstream components will re-render.
return <NestedComponent arg={arg} />
}
// Anonymous functions are redeclared every time they are evaluated. That means the container props.onClick is different every time and will re-render.
const TopLevelComponent = () =>
(<Container onClick={() => alert('Hello, world!); />)
}
A lot of the time we don’t have to worry about it. In some cases you’ll notice it causing janky performance. In my case, it’s on a page with enough D3 charts it is starting to show. 😕@sean.poulter Whats your problem with React dev tools highlighting? Should work fine with Reagent.
Thank you Juho! That narrows it down to a problem on my end.