reselect - комуто реально помог?

reselect - комуто реально помог?

говорят есть такие ¯\_(ツ)_/¯

посоны, а кто-то решал проблему биндинга ф-ции внутри jsx которая в итоге вызывает лишние рендеры

все выносят в компоненты или как-то еще? я говорю про такой кейс https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips

https://github.com/atomixinteractions/eslint-config-base/releases/tag/v4.2.0

посоны, а кто-то решал проблему биндинга ф-ции внутри jsx которая в итоге вызывает лишние рендеры

стрелки юзаем handleClick = () => {} <div onClick={this.handleClick} />

это да, а когда нужно прокинуть параметр

в handle

посоны, а кто-то решал проблему биндинга ф-ции внутри jsx которая в итоге вызывает лишние рендеры

а проблема-то в чём?

байндь в конструкторе

проблемы в том, что каждый рендер создается новая ф-ция, из-за которого дальше shouldCOmponentUpdate считает, что ему нужно перерендерить

https://daveceddia.com/avoid-bind-when-passing-props/

класс проперти заходит, когда не нужно прокидывать никакие параметры

когда нужно, либо создавать +1 компонент, либо ?

() => {} это тоже создание каждый раз новой на каждый рендер

Может кто объяснить разницу работы проимисов с await и через then? 1) const response = await fetch(...) const { errors, data } = await response.json(); return { errors, data } 2) fetch(...).then(data=>).errors(...)

Для сложных асинхронных функций лучше делать async/await, иначе на промисах это будет выглядить не очень красиво и читаемо. А из этого вытекает то, что желательно стараться писать везде async/await для единообразия.

в конструкторе ок, но параметры не пробрасывает опять же

я не верю что никто это не решал, проблема стара как мир, и уже год как должен валяться пакет в npm

но его почему то нет

какие ещё параметры?

биндинг ф-ция с прокидыванием параметров

вызывает лишний рендер

я сверху описывал, с парой ссылок

если биндинг в рендере, то да

но обычно пропсы же всех интересуют

reselect - комуто реально помог?

Если делать что-то сложнее todo листа, то актуально)

а они доступны как this.props

https://stanko.github.io/webpack-babel-react-revisited/

но обычно пропсы же всех интересуют

речь о кейсах, когда не пропсы нужны https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips

в общем все списки

Ликбез по типизации в языках программирования | Библиотека программиста https://proglib.io/p/literacy-project-type-checking/

проблемы в том, что каждый рендер создается новая ф-ция, из-за которого дальше shouldCOmponentUpdate считает, что ему нужно перерендерить

а у тебя что, везде sCU? :)

речь о кейсах, когда не пропсы нужны https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips

тогда нужно какой-нибудь кэш

я просто пытаюсь понять, либо это проблема слишком ничтожна чтобы ее решать, либо она уже кем-то решена, либо ее может нет

проблемы в том, что каждый рендер создается новая ф-ция, из-за которого дальше shouldCOmponentUpdate считает, что ему нужно перерендерить

ну и читать https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 грамотно пояснено всё

Ликбез по типизации в языках программирования | Библиотека программиста https://proglib.io/p/literacy-project-type-checking/

я человек простой, не вижу golang в списке сразу закрываю

тогда нужно какой-нибудь кэш

да я поэтому и решил тут спросить, потому что уже написана коллегой тулза для идемпотентого бинда

вот не знаю таких к сожалению

но чет мне оно не нра

Gordey не вижу смысла в либе если речь о списках — да, создавать list-item компонент в sCU надо не проверять коллбеки

а у тебя что, везде sCU? :)

нет, все на pure

нет, все на pure

очень зря!

ну и читать https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 грамотно пояснено всё

спс, почитаю

Gordey не вижу смысла в либе если речь о списках — да, создавать list-item компонент в sCU надо не проверять коллбеки

да вот не хотят коллеги на каждый список иметь еще один лишний компонент, когда можно написать свою версию бинда

https://github.com/azu/idempotent-bind/blob/master/src/idempotent-bind.js примерно о нем речь

да вот не хотят коллеги на каждый список иметь еще один лишний компонент, когда можно написать свою версию бинда

не вижу вообще проблемы и на чём с экономить хочется если очень не хочется компонент создавать, можно data-атрибут вешать и в хэндлере считывать :)

решение не лучше и не хуже либы для байндинга

ну и читать https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 грамотно пояснено всё

Ну кстати да. Преждевременные оптимизации - зло.

И кстати не факт, что с этим идемпотентным байдингом будет быстрее.

может он сам тормозит не по детски

а в каждом элементе списка парочка элементов всего

проблемы в том, что каждый рендер создается новая ф-ция, из-за которого дальше shouldCOmponentUpdate считает, что ему нужно перерендерить

А я создаю отдельные компонента на каждый такой элемент. Внутри него handle, который вызывается и из пропсов берет и отправляет в "onChange" что нужно

А я создаю отдельные компонента на каждый такой элемент. Внутри него handle, который вызывается и из пропсов берет и отправляет в "onChange" что нужно

это решение но коллеги не хотят лишнего кода

Биндить (ну стрелки) и замыкать ничего не нужно так

Ну сделай ты этот компонент не в отдельном файле, а рядом положи

И кстати не факт, что с этим идемпотентным байдингом будет быстрее.

можно позамерять, но не планировалось на все это время тратить

это решение но коллеги не хотят лишнего кода

называйте просто это не "лишним кодом", а нормальным разделением

тогда пишите как обычно

и не заморачивайтесь

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

пусть пишут {() => this.doStuff()}, вдруг тормозов не будет вообще)

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

+

ну не "сомнительно" конечно, кейсы разные бывают

а если реально большие, то sCU сделайте с игнором функций при сравнениях

пусть пишут {() => this.doStuff()}, вдруг тормозов не будет вообще)

нет кстати на вскидку каких-то замеров по всем этим вариантам?

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

нет кстати на вскидку каких-то замеров по всем этим вариантам?

да увы че-то нет, никто не хочет делать)) я всё хотел взяться и тоже пока руки не дошли

ERROR: S client not available

Смотрите ка, перевод! https://habrahabr.ru/company/ruvds/blog/340034/

нет кстати на вскидку каких-то замеров по всем этим вариантам?

но вообще создание функций в каждом рендере по идее должно быть вообще незаметным вот если где-то оправданный sCU, то уже надо сделать, чтобы коллбек не сравнивался

Какие замеры, у всех код разный.... Это надо реальное приложение брать и переписывать, замеряя до и после

Смотрите ка, перевод! https://habrahabr.ru/company/ruvds/blog/340034/

"встроенные функции", ну ёмоё

Я не причем ?

Какие замеры, у всех код разный.... Это надо реальное приложение брать и переписывать, замеряя до и после

Поддерживаю. "Что русскому хорошо, то немцу смерть"

Поддерживаю. "Что русскому хорошо, то немцу смерть"

есть такое, но по сути принципиально кейс один — компонент, который часто ререндерится :)

Про тесты

https://www.youtube.com/watch?v=HPFARivHJRY

Вот и все

Замерять это отлично, только чертов реакт не вчера зарелизи, и часть проблем по латиницами они решают сами, другое советуют в best practice

Либо опять же проблема слишком ничтожна

Gordey а ты по-моему так и не сказал, огромные списки имеют место быть?)

или особо частые ререндеры

Я как-то писал плавный dnd... - это вообще сложная задача. Тротлил рендер больше 60 раз в секунду. И там ты понимаешь, что проблема явно не в правильных и не правильных биндингах, а в медленном доме и реакте (на таких скоростях)

Ну это у меня такой опыт

Навскидку не больше 50 элементов, но надо ещё раз пройти по всем

Сейчас реакт выпустил файбер. Можно париться сильно меньше

Навскидку не больше 50 элементов, но надо ещё раз пройти по всем

И как часто тебе рендерить их надо?

Я рендерил 60 раз в секунду, меняя кучку пропсов и делая кучу вычислений. Тормозить заметно начинало с 5 - 10 элементов на средней машине. Но это ~400 ререндеров в секунду, на каждый из которых математики на пару строк

Вообще это все, наверное, можно проще было как-то сделать.... Но я не так сильно шарю)

Я как-то писал плавный dnd... - это вообще сложная задача. Тротлил рендер больше 60 раз в секунду. И там ты понимаешь, что проблема явно не в правильных и не правильных биндингах, а в медленном доме и реакте (на таких скоростях)

если речь о том, что таскаемый компонент ререндерится на каждый фрейм и внутри тяжелый дифф, но просто напросто это тот самый кейс, когда sCU выручает больше всего

Так а как я троттлил по вашему

Проблема в том, что таскаемый компонент влиял на остальные

Вот эти ребята хорошо написал https://github.com/atlassian/react-beautiful-dnd

Но все равно, если быстро подвигать элементы и посмотреть на загрузку цпу, понимаешь что в вебе что-то не так с dnd

Не, у меня не про днд, речь о простых галереях, табах, булетах

Кароч библиотека компонент

Так а как я троттлил по вашему

троттлить и отменять дифф — вообще разное

Не, у меня не про днд, речь о простых галереях, табах, булетах

Dungeons and dragons?

drag 'n' drop

do not disturb