curran / curran/d3-component

Performance & clarity concerns with context object

Open
#83 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
110
Forks
10
PR merge metrics
No merged PRs in 30d

Description

One thing that doesn't quite feel right is how so many new objects are created during the render pass when using a *context* object:

```js
// Computes the data to pass into the data join from component invocation arguments.
function dataArray(data, context) {
data = Array.isArray(data) ? data : [data];
return context ? data.map(d => Object.assign(Object.create(context), d)) : data;
}
```

What if instead of creating new objects and shallow merging each datum with the context object, we split up the API such that the lifecycle hooks refer to the context object explicitly, rather than having stuff from the context object implicitly end up on `d`?

Before:
```js
const myComponent = d3.component("div")
.render((selection, d) => {
selection
.text("d")
.on("click", d.onClick);
});
```

After:
```js
const myComponent = d3.component("div")
.render((selection, d, context) => {
selection
.text("d")
.on("click", context.onClick);
});
```

Pros:

* Clear separation of "data" and programmatic elements like callbacks (which would go on the context).
* The data array is unmodified, no surprises when inspecting the datum objects.

Cons:

* Custom logic will be required to specify a data property for all data elements.
* More burden on developers to think about what goes where.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.