Как реализовать useState для сохранения состояния между вызовами функции

React использует массив hooks для хранения состояния между рендерами. Каждый вызов useState добавляет новое состояние в этот массив и запоминает индекс. При последующих рендерах React обращается к тому же индексу.

Пример упрощённой реализации:

let hooks = [];
let currentHook = 0;

function useState(initialValue) {
const hookIndex = currentHook++;
if (hooks[hookIndex] === undefined) {
hooks[hookIndex] = initialValue;
}

const setState = (newValue) => {
hooks[hookIndex] = newValue;
render(); // Триггерит перерендер
};

return [hooks[hookIndex], setState];
}

// Перед каждым рендером сбрасываем индекс
function render() {
currentHook = 0;
// ...логика рендера компонента
}

Ключевые моменты:
1. Состояние хранится вне компонента
2. Порядок вызовов хуков должен быть одинаковым при каждом рендере
3. При обновлении состояния инициируется перерендер