Fork me on GitHub
#reagent
<
2020-05-14
>
Sean Poulter04:05:16

No one's using the React Dev Tools to highlight updates? 😢

aisamu13:05:55

Works fine here (not latest reagent, though)

Sean Poulter13:05:00

Thanks. What version are you using? I’m on v0.6.0. I wonder if that’s the issue. 😕

aisamu14:05:11

Oh, that's an old one! Currently on 0.9.1. IIRC, it used to work on 0.8.x as well

👍 4
David Pham07:05:43

Do you have a specific problem in mind? Usually, println works for me 🙂

Sean Poulter13:05:42

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.

Sean Poulter13:05:47

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 &gt; Popover &gt; Popper.js wrapper

unbalanced19:05:37

wow! Is react dev tools supposed to able to help with that somehow?

Sean Poulter15:05:54

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. 😕

juhoteperi07:05:39

@sean.poulter Whats your problem with React dev tools highlighting? Should work fine with Reagent.

👍 4
Sean Poulter13:05:14

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