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.

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!); />)
}

Thank you Juho! That narrows it down to a problem on my end.