function-built-in-the-markup
This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.
Reported when a function literal is written into a JSX attribute — in the attribute, on one side of a ternary or a ??, or in a local one line up — so its identity is fresh every render, and the listener is removed and re-added or the child can never compare its prop equal.
The framework reports the same fault while running, as RMD020 — but only once the line actually runs. This is the same fault proved from the source instead.
A function written in the markup is built during the render, so the source is the same and only the identity is fresh. On an element the diff sees a changed listener and takes the old one off and puts the new one on, every render. On a component it is a prop that can never compare equal, so the child renders again whenever its parent does.
Moving it does not fix it. A const at the top of render(), an arm of a ternary and a
fallback behind ?? are the same function built at the same moment, and all of them are
reported.
Give it a stable identity instead. A bound method is the answer for almost every case —
onclick={this.save} — because Ramonda binds your methods to the instance when the component
is built, so there is no constructor and no arrow-field to write.
PER ROW, that is not open to you, because the handler has to know which row it is. @memoized
is the one that works: it caches by its arguments, per instance, so asking twice hands back the
same function. The decorated method RETURNS the handler rather than being one.
A CALL is never reported, which is why both of those are silent — and neither is a field
holding an arrow, which is one identity per instance rather than per render. arrow-fields
reports that one, where it is written.
The page is correct either way, which is why this is a warning: what it costs is work, not
output. RMD020 reports the same fault at runtime, in a development build.
Next
- All rules — the other checks this one runs beside.
- Checking your app — how to run it, and what it proves.