Multiple re-renders of tooltip

[daangelov]

Using the latest beta version (3.0.0-beta.34)

When applying custom tooltip with options tooltip render, the tooltip is being rendered more than a hundred times causing the tooltip to slightly move (flicker).

Here is a minimal example:

https://codesandbox.io/s/react-charts-tooltip-render-bug-t9yet?file=/src/App.js

import React from "react";
import { Chart } from "react-charts";

export default function App() {
  const data = [
    {
      label: "Series",
      data: [
        { primary: 1, secondary: 82 },
        { primary: 2, secondary: 93 },
        { primary: 3, secondary: 28 },
        { primary: 4, secondary: 3 },
        { primary: 5, secondary: 40 },
        { primary: 6, secondary: 89 }
      ]
    }
  ];

  const primaryAxis = React.useMemo(
    () => ({
      getValue: (datum) => datum.primary
    }),
    []
  );

  const secondaryAxes = React.useMemo(
    () => [
      {
        getValue: (datum) => datum.secondary
      }
    ],
    []
  );

  return (
    <div className="App" style={{ minHeight: 400 }}>
      <Chart
        options={{
          data,
          primaryAxis,
          secondaryAxes,
          tooltip: {
            render: () => {
              console.log("render");

              return <h1>tooltip</h1>;
            }
          }
        }}
      />
    </div>
  );
}

You can see in the console that on changing the hovered data, the console.log is called more than a hundred times.