refactor: functional data prop is removed

src/chart.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useRef, forwardRef } from 'react';
 import type { ForwardedRef, MouseEvent } from 'react';
 import { Chart as ChartJS } from 'chart.js';
-import type { ChartData, ChartType, DefaultDataPoint } from 'chart.js';
+import type { ChartType, DefaultDataPoint } from 'chart.js';
 
 import type { ChartProps, TypedChartComponent } from './types';
 import {
@@ -12,10 +12,6 @@ import {
   setDatasets,
 } from './utils';
 
-const noopData = {
-  datasets: [],
-};
-
 function ChartComponent<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
@@ -26,7 +22,7 @@ function ChartComponent<
     width = 300,
     redraw = false,
     type,
-    data: dataProp,
+    data,
     options,
     plugins = [],
     getDatasetAtEvent,
@@ -39,16 +35,9 @@ function ChartComponent<
   ref: ForwardedRef<ChartJS<TType, TData, TLabel>>
 ) {
   type TypedChartJS = ChartJS<TType, TData, TLabel>;
-  type TypedChartData = ChartData<TType, TData, TLabel>;
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<TypedChartJS | null>();
-  /**
-   * In case `dataProp` is function use internal state
-   */
-  const [computedData, setComputedData] = useState<TypedChartData>();
-  const data: TypedChartData =
-    computedData || (typeof dataProp === 'function' ? noopData : dataProp);
 
   const renderChart = () => {
     if (!canvasRef.current) return;
@@ -81,7 +70,7 @@ function ChartComponent<
 
     if (!chart) return;
 
-    getDatasetAtEvent &&
+    if (getDatasetAtEvent) {
       getDatasetAtEvent(
         chart.getElementsAtEventForMode(
           event.nativeEvent,
@@ -91,7 +80,9 @@ function ChartComponent<
         ),
         event
       );
-    getElementAtEvent &&
+    }
+
+    if (getElementAtEvent) {
       getElementAtEvent(
         chart.getElementsAtEventForMode(
           event.nativeEvent,
@@ -101,7 +92,9 @@ function ChartComponent<
         ),
         event
       );
-    getElementsAtEvent &&
+    }
+
+    if (getElementsAtEvent) {
       getElementsAtEvent(
         chart.getElementsAtEventForMode(
           event.nativeEvent,
@@ -111,17 +104,8 @@ function ChartComponent<
         ),
         event
       );
-  };
-
-  /**
-   * In case `dataProp` is function,
-   * then update internal state
-   */
-  useEffect(() => {
-    if (typeof dataProp === 'function' && canvasRef.current) {
-      setComputedData(dataProp(canvasRef.current));
     }
-  }, [dataProp]);
+  };
 
   useEffect(() => {
     if (!redraw && chartRef.current && options) {

src/types.ts

@@ -20,12 +20,7 @@ export interface ChartProps<
   TLabel = unknown
 > extends CanvasHTMLAttributes<HTMLCanvasElement> {
   type: TType;
-  /**
-   * @todo Remove function variant.
-   */
-  data:
-    | ChartData<TType, TData, TLabel>
-    | ((canvas: HTMLCanvasElement) => ChartData<TType, TData, TLabel>);
+  data: ChartData<TType, TData, TLabel>;
   options?: ChartOptions<TType>;
   plugins?: Plugin<TType>[];
   redraw?: boolean;

test/chart.test.tsx

@@ -65,26 +65,6 @@ describe('<Chart />', () => {
     expect(chart.config.type).toEqual('bar');
   });
 
-  it('should pass props onto chart if data is fn', () => {
-    const dataFn = jest.fn(c =>
-      c
-        ? data
-        : {
-            datasets: [],
-          }
-    );
-
-    render(<Chart data={dataFn} options={options} type='bar' ref={ref} />);
-
-    expect(chart.config.data).toMatchObject(data);
-    expect(chart.config.options).toMatchObject(options);
-    expect(chart.config.type).toEqual('bar');
-
-    expect(dataFn).toHaveBeenCalledTimes(1);
-    expect(dataFn).toHaveBeenCalledWith(expect.any(HTMLCanvasElement));
-    expect(update).toHaveBeenCalledTimes(1);
-  });
-
   it('should pass new data on data change', () => {
     const newData = {
       labels: ['red', 'blue'],