Хороша ли практика мутирования input элемента в React без useState?

Question

[architect_711]

Я ради интереса решил сделать компонент, что будет создавать новый Todo без useState

interface Props {
    createNewTodo: (title: string) => void
}

export default function TodosCreation({createNewTodo}: Props) {
    let inputValue: string = '';

    function onClickCreateNewTodoButtonHandler(): void {
        createNewTodo(inputValue);

        document.getElementById('create_input').value = '';
    }

    return (
        <>
            <input
                type="text"
                placeholder="Title..."
                id="create_input"
                onChange={event => inputValue = event.target.value}
            />
            <button onClick={onClickCreateNewTodoButtonHandler}>Create!</button>
        </>
    );
}

И вот не понятно, хорошо ли так делать? Все гайды как под копирку (совпадение?) при обучении управления состоянием input используют useState, но какая разница? Быть может разница в перерисовывании дерева.

Comments

[Kentavr16]

получается реакт без реактивности. И зачем он такой нужен?

Answer 1

[nokkc]

Получение элементов из DOM через querySelector или getElementBy считается плохой практикой и более идиоматичный для React-а способ - использовать useRef для функциональных / createRef для классовых компонентов.

А сам подход без использования useState называется uncontrolled components и он достаточно часто используется, основное отличие в данном случае будет в том, что изменение значения в инпуте таким образом не вызывает нового рендера и если от этого значения зависят другие компоненты/эффекты, то и они обновляться/вызываться тоже не будут.

Comments

[WbICHA]

А сам подход без использования useState называется uncontrolled components и он достаточно часто используется

Какое отношение пример автора имеет к анконтролед компонентам?

основное отличие в данном случае будет в том, что изменение значения в инпуте таким образом не вызывает нового рендера

Основное отличие в том, что при ререндере он вообще потеряет значение.

Answer 2

[Yozi]

Именно так писать с точки зрения react некорректно и, вроде, не запуская код, предположу, что не должно работать правильно, потому что onCreate возьмёт старое значение из замыкания.

Либо следует вовсе убрать onChange, можно ведь не синхронизировать переменную и взять input.value в момент создания. Тогда получится классический uncontrolled. Либо же использовать useState.