React Redux: лучший шаблон дизайна для обновления магазина с вводом диапазона HTML

Question

Я пытаюсь обновить значение элемента в массиве элементов в хранилище Redux, используя ввод диапазона. Я хотел бы узнать, как лучше всего делать это эффективно. В магазине есть выбранный товар и n количество других подобных товаров. Проблема здесь в том, что обновление очень сильно тормозит, очевидно, из-за количества повторных отрисовок при каждом приращении входных элементов step значение.

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

Каков рекомендуемый шаблон проектирования в этом сценарии?

Вот минимальный пример.

const initialState = {
     selectedItem : {
     id: "someId",
     opacity:0
      },
     items: [
        {
        id: "someId",
        opacity:0
        },
    //...many more items
    ]  
   }

В представлении есть map элементов.

function Demo () {
const dispatch = useDispatch()
const items = useSelector(GET_ITEMS)
const selected = useSelector(GET_SELECTED)

return (
 <React.Fragment>
   <input type="range" value={selected.opacity} min={0} max={1} step={0.01} onChange($event) => {
     dispatch(updateValue($event.target.value))
 } />
    {items.map(item => (<div key={item.id}>{item.id}</div>))}
 </React.Fragment>
)
}