React hooks using recharts AreaChart Console Warning

Question

I implemented AreaChart from recharts on my app like this:

import React from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import PropTypes from 'prop-types';

const CustomAreaChart = (props) => {
  const {
    data,
    xDataKey,
    yDataKey,
    areaDataKey,
    options,
  } = props;

  return (
    <ResponsiveContainer>
      <AreaChart
        data={data}
        width={options.width}
        height={options.height}
        margin={options.margin}
      >
        <XAxis dataKey={xDataKey} />
        <YAxis dataKey={yDataKey} />
        <Tooltip content={options.renderTooltipContent} />
        <Area
          type={options.areaType}
          dataKey={areaDataKey}
          stroke={options.areaStrokeColor}
          fill={options.areaFillColor}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
};

CustomAreaChart.propTypes = {
  data: PropTypes.array.isRequired,
  areaDataKey: PropTypes.string.isRequired,
  xDataKey: PropTypes.string,
  yDataKey: PropTypes.string,
  options: PropTypes.object,
};

CustomAreaChart.defaultProps = {
  xDataKey: null,
  yDataKey: null,
  options: {
    width: 500,
    height: 400,
    margin: {
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
    },
    renderTooltipContent: null,
    areaType: 'monotone',
    areaStrokeColor: null,
    areaFillColor: null,
  },
};

export default CustomAreaChart;

It works fine now, but I got this warning in console(chrome).

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See "some link" for details.

• Move data fetching code or side effects to componentDidUpdate.

• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: "some link"

• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Animate, Area, AreaChart, Text

I'm using react 16.9.0.

Do you have any suggestions to remove this warning?

Answer 1

You seem to have those warnings from recharts packages.

Therefore, if you really want to reduce those annoying warnings, you need to replace the packages with those which never produce warnings.

Let me list down some alternatives below.

http://reactcommunity.org/react-chartjs/index.html

https://react-charts.js.org/examples/area

https://react-google-charts.com/area-chart

https://www.npmjs.com/package/react-simple-charts