Круглые скобки вызывают функцию при вычислении JSX. Передайте ссылку onClick={toggleInput} либо обёртку, если нужны собственные аргументы.
Почему toggleInput вызывается во время рендера
Круглые скобки вызывают функцию при вычислении JSX. Передайте ссылку onClick={toggleInput} либо обёртку, если нужны собственные аргументы.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
В JSX написано <button onClick={toggleInput()}>Изменить</button>, а toggleInput меняет state. Почему обработчик выполняется до клика и как исправить?
Ответ
Круглые скобки вызывают функцию при вычислении JSX. Передайте ссылку onClick={toggleInput} либо обёртку, если нужны собственные аргументы.
Для аргумента используйте onClick={() => toggleInput(id)}. Вариант с вызовом допустим только если функция намеренно возвращает другой обработчик и не вызывает побочные эффекты при построении UI. Изменение state в render может приводить к повторным рендерам и ошибке их лимита; это не проблема порядка кликов, а неверная передача функции.