Skip to main content
Version: 4.3

RenderElement

type RenderElement<ElementData> = (data) => ReactNode;

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 / ...).

Type Parameters

Type ParameterDefault type
ElementDataunknown

Parameters

ParameterType
dataElementData

Returns

ReactNode

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub