React дизайн списка с состоянием, где каждый элемент зависит от предыдущего

Я думаю, что вы значительно усложняете это. Я думаю, что лучший подход — просто запомнить используемые вами данные в форме, которая будет соответствовать реквизитам компонента. Сделайте что-то вроде:

const formattedData = useMemo(() => doMyCalculations(stateList), [stateList])

А затем просто сопоставьте это formattedData, которое должно быть массивом объектов (или массивами, если это лучше подходит для вашего случая).

<div>
{formattedData.map((data) => {
    return <ItemComponent .../>
})}
</div>

Прямо сейчас вы запоминаете и компонент, и функцию для его создания, которые представляют собой две разные версии одного и того же.

Кроме того, если вы установите состояние в хуке useEffect, который запускается прямо при рендеринге и изменяет состояние списка, частью которого является объект, вы создадите бесконечный цикл. Вам нужно рассчитать эти данные заранее или только при взаимодействии с пользователем или что-то, что запускается при определенных условиях... а не сразу при рендеринге. Это вызовет повторный рендеринг, который, в свою очередь, вызовет еще одно изменение в списке, что, в свою очередь, вызовет повторный рендеринг... и вы окажетесь в черной дыре.

Почему это вызывает бесконечный цикл

itemList, содержащий функции, генерирующие ItemComponent, зависит от части состояния stateList. В каждом ItemComponent есть useEffect хук, который запускается сразу после каждого рендеринга. В этом хуке useEffect вы устанавливаете состояние, которое изменяет часть состояния stateList. Не имеет значения, измените ли вы только один элемент в массиве, это изменит часть состояния stateList, что приведет к повторному рендерингу всех дочерних элементов, одним из которых является ItemComponent. Это, в свою очередь, снова активирует хук useEffect, который, в свою очередь, снова установит состояние, что, в свою очередь, вызовет еще один повторный рендеринг.

Если вы можете предоставить более подробную информацию о том, чего именно вы пытаетесь достичь и для чего вам нужен этот крючок useEffect, я могу дать вам более полный пример того, как вы хотели бы это сделать.

Редактировать:

Чтобы добиться чего-то, при котором строки меньше i обновляются без необходимости повторного выполнения дорогостоящих вычислений, вы можете сделать одно из двух. Либо передайте часть состояния родительскому компоненту (который у вас почти сейчас есть) и запомните данные в дочернем компоненте (которые не будут пересчитываться, даже если компонент будет повторно отображать), либо вы можете поместить Помимо запоминания данных в дочернем компоненте, вместо этого вычислите все данные в родительском компоненте, но проверьте, является ли индекс элемента индексом, который следует обновить, и если нет, используйте существующее значение. В обоих случаях потребуется повторная визуализация, но в обоих случаях вам не придется выполнять дорогостоящие вычисления для индексов, которые не следует обновлять. В первом случае вы можете столкнуться с некоторыми трудностями при попытке запустить перехватчик useMemo на основе кликнутого индекса, особенно без добавления дополнительных состояний, что, вероятно, увеличит количество рендерингов, но последний вариант будет выглядеть следующим образом:

<div>
{formattedData.map((data, i) => {
    return <ItemComponent ... index = {i} updateState = {setStateList} stateList = {stateList} />
})}
</div>

И в ItemComponent:

const ItemComponent = ({index, updateState, stateList, ...props}) => {
   const theExpensiveComputation = (item) => doStuff(item)

   const handleUpdate = () => {
        updateState(stateList.map((item, i) => i < index ? theExpensiveComputation(item) : item))
    }
   return (<div>...</div>)
}