A minimalistic ClojureScript interface to React.js

Any tips for debugging why a certain use of a component is being unmounted/remounted? I have a text field that when I focus it the first time and type one character, I lose focus because the component gets unmounted and remounted, but subsequent focus/typing is totally fine. I did some searching and see many similar reports in react, but I'm not quite sure what I'm doing wrong in reagent.

aisamu 2020-05-15T13:16:22.463500Z

Losing focus/jumping cursors are common issues with controlled components, but the "only on the first time" part puzzles me. Do you have a small reproducible example?


No, not an isolated example. I managed to work around my problem, but without a great deal of understanding. I will see if it is possible to extract a minimal example. Thanks!

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