reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Sean Poulter 2020-05-14T04:03:16.458100Z

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

aisamu 2020-05-14T13:06:55.459600Z

Works fine here (not latest reagent, though)

Sean Poulter 2020-05-14T13:11:00.459900Z

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

aisamu 2020-05-14T14:16:11.460700Z

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

👍 1
Sean Poulter 2020-05-14T16:26:29.461Z

Yep! Thanks.

2020-05-14T07:13:43.458700Z

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

Sean Poulter 2020-05-15T15:24:54.463900Z

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

juhoteperi 2020-05-14T07:17:39.459200Z

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

👍 1
Sean Poulter 2020-05-14T13:15:42.460100Z

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 Poulter 2020-05-14T13:19:47.460300Z

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

Sean Poulter 2020-05-14T13:22:14.460500Z

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

unbalanced 2020-05-14T19:23:37.461600Z

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