Question 304545 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS dashboard all charts get re-renders everytime

reactJS. have created multiple charts eg bar chart, pie chart. when these charts are placed in dashboard and if i sort bar chart, pie chart also re-rendered. this reduces the performance if the dashboard contains like 5-6 charts and all charts get rendered everytime. How to make only the bar chart to render when i do sorting or limiting records of bar chart. This dashboard page is dynamic like one dashboard may contain 4 charts another dashboard may contain 10 charts.

I’m not very good in reactJS. how to achieve this in reactJS

Tags:

2

Answers


  1. 0

    You can use the useMemo() Hook. The useMemo hook in React is used for memoization, a performance optimization technique that helps in avoiding unnecessary recalculations or re-renders of a value (such as a component or computed data) unless its dependencies have changed. It’s particularly useful when you have a costly computation or rendering process that you want to avoid repeating on every render.

    import BarChart from './BarChart'; 
import PieChart from './PieChart';

const Dashboard = () => {
  // State for Bar Chart
  const [barChartData, setBarChartData] = useState();
  const [sortedData, setSortedData] = useState();

  // State for Pie Chart
  const [pieChartData, setPieChartData] = useState();

  // Function to handle sorting for the Bar Chart
  const handleSort = () => {
    // Perform sorting logic here and update the barChartData state accordingly
    const sorted = /* perform sorting */;
    setSortedData(sorted);

    // Update barChartData with sorted data
    setBarChartData(sorted);
  };

  // Function to handle limiting records for the Bar Chart
  const handleLimit = () => {
    const limited = /* perform limiting */;
    setBarChartData(limited);
  };

  // Memoized Bar Chart component
  const MemoizedBarChart = useMemo(() => (
    <BarChart data={barChartData} />
  ), [barChartData]);

  // Memoized Pie Chart component
  const MemoizedPieChart = useMemo(() => (
    <PieChart data={pieChartData} />
  ), [pieChartData]);

  return (
    <div>
      {MemoizedBarChart}

      {MemoizedPieChart}

      <button onClick={handleSort}>Sort Bar Chart</button>

      <button onClick={handleLimit}>Limit Records</button>
    </div>
  );
};

export default Dashboard;
    Login or Signup to reply.
  2. 0

    You’d want to create a memoized component.

    I’ll give you an example using chart-js.

    First, let’s create a scatter plot component. The key here is the arePropsEqual function, which is used to actually determine whether a re-render is necessary.

    const ScatterPlotChart = React.memo(({ data }) => {
  const chartData = {
    datasets: [
      {
        label: 'Scatter Plot',
        data: data,
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
      },
    ],
  };

  const options = {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
      },
      y: {
        type: 'linear',
        position: 'left',
      },
    },
  };

  return <Scatter data={chartData} options={options} />;
}, arePropsEqual);

// Define a custom comparison function for props
function arePropsEqual(prevProps, nextProps) {
  // Implement a shallow comparison of props to determine if the component should update
  return prevProps.data === nextProps.data;
}

    Then go ahead and use this component in your main Dashboard component, something like this:

    import ScatterPlotChart from './ScatterPlotChart';

const Dashboard = () => {
  // Example data for the scatter plot
  const [scatterData, setScatterData] = useState([
    { x: 1, y: 5 },
    { x: 2, y: 8 },
    { x: 3, y: 12 },
    // ... more data points
  ]);

  return (
    <div>
      <h1>Dashboard</h1>
      <ScatterPlotChart data={scatterData} />
    </div>
  );
};

    Now you shouldn’t get any more unnecessary re-renders, unless your scatter plot component’s props change.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search