# Feature request: React-style reconciliation

**URL:** <https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512>\
**Category:** Feedback\
**Created:** [June 25, 2020, 10:42pm UTC](https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512 "2020-06-25T22:42:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![harris](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/harris/32/3326_2.png) [@harris](https://talk.observablehq.com/u/harris)\
**Post date:** [June 25, 2020, 10:42pm UTC](https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512/1 "2020-06-25T22:42:17Z")

</div>

Are there any thoughts on implementing [React-style DOM reconciliation](https://reactjs.org/docs/reconciliation.html) on cell rendering? I imagine this is sort of complicated but I could imagine benefits—particularly animation benefits:

- Cells with a _lot_ of elements might be more efficient to rerender if not every node needs to be recreated each time—might enable more complex animations that use Observable’s reactivity (though only if the diffing algorithm didn’t eat up the performance savings)
- Could animate elements using CSS transitions + Observable reactivity, if for example an element changed class but Observable was able to identify that it was the same element with a new class

I imagine this is non-trivial to implement, but I’m wondering if it’s something Observable is thinking about.

---

<div class="post-metadata">

**Author:** ![a10k](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/a10k/32/2609_2.png) [@a10k](https://talk.observablehq.com/u/a10k)\
**Post date:** [June 27, 2020, 7:00pm UTC](https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512/2 "2020-06-27T19:00:40Z")

</div>

Hi Harris, you can use react inside observable, so any components the need the performance you mention can use react to render? [https://observablehq.com/@j-f1/react](https://observablehq.com/@j-f1/react) so when the cells updates, react will handle the dom updates as needed.

Otherwise, for most data viz notebooks, I never found the dom nodes re-rendering an issue, in fact using canvas in the yield and drawing the whole thing rather than using an existing canvas also works perfectly smooth for most notebooks at a good fps.

---

<div class="post-metadata">

**Author:** ![harris](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/harris/32/3326_2.png) [@harris](https://talk.observablehq.com/u/harris)\
**Post date:** [June 27, 2020, 7:25pm UTC](https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512/3 "2020-06-27T19:25:23Z")

</div>

Yeah, I’ve looked at that React notebook a bit! I tried to use it a bit, but found it a little clunky (layering Observable’s reactivity on top of React’s reactivity made it a little confusing for me to decide which one to rely on for updating particular components, etc.), but I should give it another go now that I have a better understanding of Observable.

The example I’m thinking of where performance has been an issue is a county-level U.S. choropleth that I’d like to animate over time. It’s just a lot of SVG shapes to rerender every frame. I imagine switching to canvas would make it smoother, but it would introduce some code complexity. I might give that a try though. 😅

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [June 29, 2020, 7:12pm UTC](https://talk.observablehq.com/t/feature-request-react-style-reconciliation/3512/4 "2020-06-29T19:12:18Z")

</div>

Hi @harris,

Another option that might work really smoothly for your use case is to work with D3’s new `selection.join` feature.

You can minimize DOM operations on large SVG visualizations where every element isn’t changing at once, and also animate the **enter** , **update** and **exit** states:

> **[selection.join](https://observablehq.com/@d3/selection-join)**
>
> An Observable notebook by D3.

It would be great if one of us (or one of you oh-so-helpful folks on the forums) wrote a little example showing how to use `selection.join` on a map with many counties, states or countries…