1import { useState, memo } from 'react';
2
3const ExpensiveChart = memo(function ExpensiveChart({ data, style, onBarClick }) {
4  console.log('Chart rendered');
5  return (
6    <div style={style}>
7      {data.map((item) => (
8        <div
9          key={item.id}
10          style={{ height: item.value + 'px', background: style.color }}
11          onClick={() => onBarClick(item)}
12        />
13      ))}
14    </div>
15  );
16});
17
18function Dashboard() {
19  const [selectedBar, setSelectedBar] = useState(null);
20  const [theme, setTheme] = useState('light');
21
22  const chartData = [
23    { id: 1, label: 'Янв', value: 120 },
24    { id: 2, label: 'Фев', value: 85 },
25    { id: 3, label: 'Мар', value: 200 },
26  ];
27
28  return (
29    <div>
30      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
31        Сменить тему
32      </button>
33      <ExpensiveChart
34        data={chartData}
35        style={{ color: theme === 'light' ? '#4a90e2' : '#90caf9', padding: 16 }}
36        onBarClick={(item) => setSelectedBar(item)}
37      />
38      {selectedBar && <p>Выбран: {selectedBar.label}</p>}
39    </div>
40  );
41}