"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Browserslist: caniuse-lite is outdated. Please run:

npx update-browserslist-db@latest

Why you should do it regularly: https://github.com/browserslist/update-db#readme

npx update-browserslist-db@latest

pnpm up caniuse-lite

407.31 KB (-100.86 KB) build/bundle-1.js
369.3 kB (-34.64 kB) build/bundle-2.js
220.67 KB (-18.86 kB) build/bundle-3.js

children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider key="charts" /*👈*/ createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider key="personal" /*👈*/ createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

State is tied to a position in the render tree

Состояние привязано к определённой позиции в дереве рендера.

When you give a component state, you might think the state “lives” inside the component. But the state is actually held inside React. React associates each piece of state it’s holding with the correct component by where that component sits in the render tree.

Когда вы добавляете состояние (state) компоненту, может показаться, что это состояние «находится» внутри самого компонента. Однако на самом деле состояние хранится внутри React. React сопоставляет каждую единицу состояния с нужным компонентом, исходя из того, где этот компонент находится в дереве рендера.

События из порталов распространяются в соответствии с деревом React, а не деревом DOM. Например, если вы нажмёте внутри портала, и портал обёрнут в `<div onClick>`, сработает этот обработчик `onClick`. Если это вызывает проблемы, либо остановите распространение события (stopPropogation()) внутри портала, либо переместите сам портал выше в дереве React.

const Action = () => {}; // ES6
const action = new Action(); // Action is not a constructor

var Action = function () {} // ES5
var action = new Action(); // Всё ОК

let openAction = function () {}
window.openAction() // window.openAction is not a function

// Раньше let заменялся на var и всё работало
var openAction = function () {}
window.openAction() // всё ок

class Queue {
  executing;

  run(thenable) {
    const promise = new Promise(async (resolve, reject) => {
      // пытаемся получить значние promise
      while (this.executing != promise) {
        // ...
      }
      // ...
    });
  }
}

// Cannot access 'promise' before initialization
new Queue().run(Promise.resolve())