Обработка событий по лицам без функциональных компонентов в React

Question

Я встретил двух подходов для обработки событий от лиц без функциональных компонентов:

1)

const SomeInputComponent = ({ onTextChange }) => (

    <input type='text' onChange={(e) => onTextChange (e.target.value)} /> 

); 

2)

const SomeInputComponent = ({ onTextChange }) => { 

    const handleChange = (e) => { 
    onTextChange(e.target.value); 
    } 

    return (
    <input type='text' onChange={handleChange} /> 
); 
}; 

Какой из них более предпочтительным? Каковы плюсы и минусы?

Answer 1

Мое мнение, что это в основном о читаемости, повторное использование и т.д. Лично я стараюсь использовать вариант 2, но если это действительно простой компонент, и я никогда не буду повторно использовать обработчик иногда я пойти на вариант 1.

Однако я не доволен этим и стараюсь придерживаться второго варианта. Зачем? Потому что часто я думаю, что я не буду повторно использовать обработчик, или я думаю, что он всегда будет одним лайнером, но потом я переписываю его, потому что я его повторно использую, или добавляю к нему больше кода (часто просто console.log). Это тратит время.

Так что я для согласованности. Всегда используйте опцию 2.