Почему в React возникает задержка ввода (текстовая область) при установке фонового изображения? ⇐ CSS

[Гость]

Компоненты независимы: когда я нажимаю клавиатуру, происходит суперзадержка ввода, когда я удаляю фоновое изображение, задержки нет. Является ли это причиной повторного рендеринга фонового изображения?
Когда я продолжаю вводить данные, загрузка процессора очень высока, и количество узлов DOM начинает увеличиваться:


main.jsx:< /p>
const router = createBrowserRouter([
{
path: "/",
element: ,
},
]);

ReactDOM.createRoot(document.getElementById("root")).render(



);

home.jsx
export default function Home() {
const style = {
position: 'absolute',
top: 0,
left: 0,
width: '100vw',
height: '100dvh', // dvh:
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
zIndex: -1,
}

return (



)
}

inputbar.jsx
export default function InputBar() {
const [text, setText] = useState('');

function onChange(e) {
setText(e.target.value);
}

return (




)
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... ound-image