D3 + React = Awesome!
Swizec Teller, a geek with a hat (@Swizec), recently gave an outstanding presentation about bringing React into D3. It was truly awesome! D3 and React fit together really well, and React improves a lot of things for D3: a component-like syntax, more understandable structuring, ease of modification and maintenance, and others.
For instance, you don’t need to use the complicated D3 data-setup functions, such as enter() anymore. This is because React takes over the DOM manipulation, and all you need to add are basic D3 shapes to render your data visually in a familiar React component structure. This makes things easier since React is declarative and resembles HTML. You can also take advantage of DevTools’ React panel on Chrome to easily see where all of your visual data components are being rendered.
But is it really worth adding another technology to D3? We still need to use D3 for anything number-related and any data calculations, and essentially any mouse/touch listeners, so what else does React bring?
With declarative, isolated chunks of code, it becomes simple to factor out reusable D3 pieces like histograms and labels, and reuse them in other places. It is usually easier to work with smaller pieces of code, and React components help you focus on what is going into components (props) and what is coming out of them (rendered HTML), which at times can be tricky with D3. React helps ensure that your D3 components act like you expect them to because it makes it easier to control what is going into them. Similarly, the output of a React component render() can be thought of as the state of your D3 data, which can be mutated when the incoming data changes.
The complexity of dynamically changing D3 visualizations also becomes easier to manage with React since D3 works well with React’s component lifecycle methods like componentWillMount(). In general, since React rendering is based on diffs, it makes it easier to implement dynamic visualization changes. D3 mouse events are also easier to work with in React.
If you are going to do some crazy D3 + React visualizations, don’t forget to remove data that doesn’t actually get rendered on the screen as it can slow the browser environment down, and of course, do use the paint flashing mode in Dev Tools to see the different GPU layers involved in your renderings!