Render function for elements. Receives the element's data slice only, so
the renderer re-runs ONLY when data changes, not when position,
size, angle, or other cell attributes update. Position and size are
applied by JointJS's view layer without touching React at all (SVG mode)
or by a thin wrapper div that doesn't invoke the renderer (HTML mode).
Rendered as JSX (<RenderElement {...data} />) so wrapping it in
React.memo actually short-circuits on prop equality.
The framework guarantees data is at least {} at this boundary, even
for built-in JointJS shapes that ship without a data field.
If the renderer needs the id, position, size, or other slices, use the
context hooks: useCellId(), useCell() (with optional selector), or
useCell(c => c.position / c.size / ...).
Render function for elements. Receives the element's
dataslice only, so the renderer re-runs ONLY whendatachanges, not whenposition,size,angle, or other cell attributes update. Position and size are applied by JointJS's view layer without touching React at all (SVG mode) or by a thin wrapper div that doesn't invoke the renderer (HTML mode).Rendered as JSX (
<RenderElement {...data} />) so wrapping it inReact.memoactually short-circuits on prop equality.The framework guarantees
datais at least{}at this boundary, even for built-in JointJS shapes that ship without adatafield.If the renderer needs the id, position, size, or other slices, use the context hooks: useCellId(), useCell() (with optional selector), or
useCell(c => c.position / c.size / ...).