The new React 16.3 brings some changes to the ecosystem that change how we go about integrating React and D3 to build data visualizations.

componentWillReceiveProps, componentWillUpdate and compnentWillMount are on their way out. They were great for making React and D3 happy together, but they cause issues with the async rendering that the React team is planning for React 17.

How it Works

The core issue we're working around is that when you pass new props into a component, React re-renders. This happens instantly. Because the re-render is instant, you don't have time to show a nice transition going into the new state.

You can solve this by rendering your component from state instead of props and keeping that state in sync.

Something like this:

We define a Ball class-based component. Its state has a single attribute, x, which is set to the props.x value by default. That way our Ball component starts off rendered at the position the caller wants.

Next, we create a new circleRef using the React 16.3 ref API. We use this reference to give D3 control of the DOM so it can run our transition.