Когда ref callbacks определены как inline функции, они вызываются дважды при обновлениях: сначала с null, потом с DOM-элементом. Это происходит потому, что React создаёт новый экземпляр функции на каждом рендере, что заставляет его очищать старый ref и устанавливать новый.
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type='text' ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
В этом примере inline стрелочная функция создаёт новый экземпляр при каждом рендере, что заставляет ref callback срабатывать дважды без необходимости.
Определи ref callback как метод-свойство класса, используя синтаксис ES7. Это гарантирует, что экземпляр функции останется стабильным между рендерами, и callback выполнится только один раз при монтировании компонента.
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
setSearchInput = (input) => {
this.input = input
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type='text' ref={this.setSearchInput} />
<button type='submit'>Submit</button>
</form>
)
}
}
Используя метод-свойство класса, ты сохраняешь стабильную ссылку на функцию, что позволяет React распознавать её как один и тот же callback между рендерами. Это избавляет от лишней переинициализации и улучшает производительность.
Inline ref callbacks вызываются дважды во время обновлений, потому что React создает новый экземпляр функции при каждом рендере, что заставляет очистить старый ref перед установкой нового.
Новый — ещё не проверен сообществом
Вы