Почему в 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: [youtube]-sF5KsEo6gM[/youtube]
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 (




)
}

Фрагмент стека:

Код: Выделить всё

const { useState } = React;

const backgroundImage = "https://i.stack.imgur.com/tQGGM.jpg";

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

return (



)
}

function InputBar() {
const [text, setText] = useState('');

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

return (




)
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();

Код: Выделить всё

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