Лагают отслеживаемые инпуты в useState

Question

у меня есть такой state:

const [data, setData] = useState([
    { name: 'март', value: 233 },
    { name: 'апрель', value: 200 },
    { name: 'июнь', value: 233 },
     ...
    ])

я итерируюсь от этого массива с помощью map:

{data?.map(input => (
<input 
   value={input.value} 
   onChange={({target}) => {
       input.value = target.value
       setData(...data)
   }} />
)}

все в принципе работает, но лагает жутко

пробовал менять стейт только при onBlur создав отдельный компонент с отдельным useState для каждого месяца но приложение лагает на пару секунд при каждом блюре все равно

возможно ли поменять один конкретный месяц не задевая другие и не запуская перерисовку?

Answer 1

У меня не лагает...

const {useState} = React;
//import {useState} from 'react';
//import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

//
function App(props) {
    const [data, setData] = useState([
        { id: 1, name: 'март', value: 233 },
        { id: 2,  name: 'апрель', value: 200 },
        { id: 3,  name: 'июнь', value: 233 },
    ])
    return (
        <form>
            {data.map((input, i) => (
                <input 
                    key={input.id}
                    value={input.value} 
                    onChange={({target}) => {
                        data[i] = {...data[i], value: target.value}
                        setData([...data])
                    }} 
                />
            ))}
        </form>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>


<div id='root'></div>

БЛОГ НА HUSL

Лагают отслеживаемые инпуты в useState

Ответы (1 шт):