No one's using the React Dev Tools to highlight updates? 😢
Works fine here (not latest reagent, though)
Thanks. What version are you using? I’m on v0.6.0. I wonder if that’s the issue. 😕
Oh, that's an old one!
Currently on 0.9.1
.
IIRC, it used to work on 0.8.x
as well
Yep! Thanks.
Do you have a specific problem in mind? Usually, println works for me 🙂
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.
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
Thank you Juho! That narrows it down to a problem on my end.
wow! Is react dev tools supposed to able to help with that somehow?