Size: a a a

React — русскоговорящее сообщество

2020 November 26

IN

Igor N in React — русскоговорящее сообщество
Mark
А сама функция находящаяся в кастомном хуке, которая должна быть хендлером, должна именоваться как хендлер, или все таки как просто функция, открывающая/закрывающая модалку? Т.к. функция находится отдельно от компонента и о нем ничего по сути не знает
Вот тут интересная дискуссия с artalar https://t.me/react_js/963886
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Как избежать постоянного создания функции в render?
onDeleted={() => onDeleted(item.id)}
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
useCallback ?
источник

DS

Dmitriy Shuleshov in React — русскоговорящее сообщество
Alexey Masyukov
Как избежать постоянного создания функции в render?
onDeleted={() => onDeleted(item.id)}
useMemo
useCallback
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Dmitriy Shuleshov
useMemo
useCallback
там же параметр передается item.id, он при каждом рендере разный. Можно пример подобного подхода?
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Alexey Masyukov
там же параметр передается item.id, он при каждом рендере разный. Можно пример подобного подхода?
по тому коду, который мы видим совершенно не очевидно, что он разный
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Можно использовать PureComponent, или useRef, но стоит ли?
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Дмитрий Шевченко
по тому коду, который мы видим совершенно не очевидно, что он разный
я думал, что это очевидно при такой записи
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Дмитрий Шевченко
Можно использовать PureComponent, или useRef, но стоит ли?
забыл подход который использовал, никак вспомнить немогу
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Если он на КАЖДЫЙ рендер разный - мемоизировать нету смысла
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Дмитрий Шевченко
Если он на КАЖДЫЙ рендер разный - мемоизировать нету смысла
Это да. Вспомнил один из подходов.
const delete = () => (id) => this.props.onDelete(id)
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
onClick={delete(id)}
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Alexey Masyukov
onClick={delete(id)}
А что толку?
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Дмитрий Шевченко
А что толку?
тоже об этом подумал) Просто лежал в заметках
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Ща
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Можно так: пользоваться всплытием event и не вешать обработчики на каждый элемент, а повесить его на весь список. Отлавливая события на списке понимать с какого элемента он пришел, получаеть id элемента и с ним работать
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
class MyComponent extends React.PureComponent
{
 delete = () => this.props.onDelete ( this.props.item.id );

 render ()
 {
   ...
   onClick={ this.delete }
   ...
 }
}
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Типа того, как вариант
источник

AM

Alexey Masyukov in React — русскоговорящее сообщество
Дмитрий Шевченко
class MyComponent extends React.PureComponent
{
 delete = () => this.props.onDelete ( this.props.item.id );

 render ()
 {
   ...
   onClick={ this.delete }
   ...
 }
}
тогда все равно нужно строить кучу компонентов при ренде, что еще дороже создания лишней функции
источник

ДШ

Дмитрий Шевченко... in React — русскоговорящее сообщество
Я твой код не вижу, сам решай как лучше. Я тебе вариант предложил.
источник