Всем привет, нужен совет, вот у меня есть компонент Input, в котором я использую styled-components, в одном месте мне нужно, чтобы он был с определённым фоном и с Label, а в другом чисто инпу, как лучше, разделить это на два разных инпута или чисто через props в одну кучу всё закинуть ?

props и в стилях варианты в зависимости от пропсов. если ты используешь что то вроде эмоушен — оно удалит рантайм где можно

Кто шарит за react-multi-carousel ? Чет при перерендере карточек он ломается

props и в стилях варианты в зависимости от пропсов. если ты используешь что то вроде эмоушен — оно удалит рантайм где можно

Эмоушен? Можно чуть поподробнее?

Эмоушен? Можно чуть поподробнее?

emotion.sh

Эмоушен? Можно чуть поподробнее?

https://emotion.sh/docs/styled Эта зараза относительно умная и пытается не создавать рантайм если это возможно. Из минусов — оно использует внутри стайлик и нельзя postcss на стили навесить. А стайлик на порядок хуже с grid для ie11 например.

https://emotion.sh/docs/styled Эта зараза относительно умная и пытается не создавать рантайм если это возможно. Из минусов — оно использует внутри стайлик и нельзя postcss на стили навесить. А стайлик на порядок хуже с grid для ie11 например.

Я правильно понимаю, что это styled-components, только в разы лучше? Я просто использую styled-components перманентно и хотел бы знать есть ли смысл переходить на emotion и что я получу|потеряю

переходить — не имеет никакого. в новом проекте — можна получишь меньший размер бандлов и лучший перформанс за счет исключения рантайма потеряешь — ничего.

https://emotion.sh/docs/styled Эта зараза относительно умная и пытается не создавать рантайм если это возможно. Из минусов — оно использует внутри стайлик и нельзя postcss на стили навесить. А стайлик на порядок хуже с grid для ie11 например.

грид для ие11 — просто не надо её postcss-ом делать. это самоограничивающая тебя жопа. а остальное сносно отрабатывает

грид для ие11 — просто не надо её postcss-ом делать. это самоограничивающая тебя жопа. а остальное сносно отрабатывает

я то руками делаю — так как postcss нет. но с postcss тоже самое вполне ок работает. так что я бы сказал что эмоушен не позволил мне секономить пол рабочего дня на этом

Вообще, тоже пользуюсь Emotion, но с тех пор, как она давала скорость в разы выше SC. Сейчас разница практически незаметна, в деталях Emotion приятнее.

переходить — не имеет никакого. в новом проекте — можна получишь меньший размер бандлов и лучший перформанс за счет исключения рантайма потеряешь — ничего.

Оу, буду знать. Спасибо огромное. Я-то думал, что styled-components умнее и быстрее всех своих "коллег". Благодарю

Ребят что расскажите про react 17, что нового по асинхронному рендерингу компонентов, что это за штука рендеринг компонентов по временой шкале. есть инфа что это и главное как это будет работать? за любую инфу буду рад

https://immutable-js.github.io/immutable-js/docs/#/Map/concat

проблема была все таки в саге - takeEvery вместо takeLatest... ;)

проблема была все таки в саге - takeEvery вместо takeLatest... ;)

В любом случае ты неправильно результат объединял

В любом случае ты неправильно результат объединял

ну... я его объеденением еще не занимался... не мог на начальном этапе понять, почему в Network несколько респонсов, а в экшене консолишь и только последний. ... Там и у саги под капотом есть так называемый debounce для оптимизации...

помогите справиться с перформанс проблемой, пожалуйста. как по такому стектрейсу понять, где у меня проблема?

помогите справиться с перформанс проблемой, пожалуйста. как по такому стектрейсу понять, где у меня проблема?

Може нет отписок от листнеров ? В любом случае начни с реакт профайлера

@popuguy как роутинг решил?

Може нет отписок от листнеров ? В любом случае начни с реакт профайлера

как это загуглить? react profiler?

@popuguy как роутинг решил?

Никак

как это загуглить? react profiler?

По вкладками своими дальше просто в тулзах глянь)

а, стоп...

По вкладками своими дальше просто в тулзах глянь)

извиняюсь, а куда смотреть?

По вкладками своими дальше просто в тулзах глянь)

а, на эти оранжевые "коммиты"?

помогите справиться с перформанс проблемой, пожалуйста. как по такому стектрейсу понять, где у меня проблема?

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

извиняюсь, а куда смотреть?

если по цпу лагать начинает, то в Ranked посмотри, чьи апдейты дольше всего проходят, оптимизируй

извиняюсь, а куда смотреть?

Очень много маленьких операций в эдиторе, очевидно

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

ну, не знаю, как по памяти, но работает медленно.

Очень много маленьких операций в эдиторе, очевидно

так эдитор серенький, значит он же не ререндерился даже, нет?)

так эдитор серенький, значит он же не ререндерился даже, нет?)

Да но чарт им забит?

Да но чарт им забит?

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

хмм

проще в ранкеде посмотреть, где дольше всего апдейты занимали и посмотреть, почему

проще в ранкеде посмотреть, где дольше всего апдейты занимали и посмотреть, почему

Ты уточняй что это вкладка профайлера)

Ты уточняй что это вкладка профайлера)

ну на скрине видно же, Ranked) ладно ЕТО ВКЛАДКА ПРОФАЙЛЕРА

проще в ранкеде посмотреть, где дольше всего апдейты занимали и посмотреть, почему

ну, вроде с табой проблема. начал с переписывания на функциональный комп.

ну, вроде с табой проблема. начал с переписывания на функциональный комп.

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

ну, вроде с табой проблема. начал с переписывания на функциональный комп.

Больше всего просадки там где больше всего разницы меджу ступенькой и ее детьми. У вас это: Typography и MyButton

ну, вроде с табой проблема. начал с переписывания на функциональный комп.

Покажите MyButton, мне дико интересно что может работать полторы ms в кнопке

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

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

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

Нормально - никак.

ясно

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

Нормально - никак.

If you DO want to use validation in production, you can choose to use the development version by importing/requiring prop-types/prop-types instead of prop-types

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

ну, типографи - просто надстройка над материалом, мне кажется, надо копать в другом месте.

ну, типографи - просто надстройка над материалом, мне кажется, надо копать в другом месте.

да, и то, почему ее апдейты занимают почти треть времени - большой вопрос)

Покажите MyButton, мне дико интересно что может работать полторы ms в кнопке

ой, лол, это не та. (а чё их две...)

Да

Привет всем! Кто-ниб знает когда именно срабатывает onKeyPress, т.е если просто поставить его на компонет и на странице, потом нажать кнопку будет ли что-ниб,

Подскажите пожалуйста, мне нужно передать firebase в componentDidMount. Firebase инициализирую в отдельном классе. Затем в компонентах использую FirebaseContext.Consumer внутри render(). Соотвественно при обращении где-то вне render, обратиться не получается. Как быть?

Ребята, это нормально, что я пробрасываю событие через Context React?

import { AnswerClickedContext } from '../../../../containers/Quiz/Quiz'; const withContext = Component => props => ( <AnswerClickedContext.Consumer> {clickHandler => <Component onClickHandle={clickHandler} {...props}/>} </AnswerClickedContext.Consumer> ); const AnswerItem = ({ answer, onClickHandle }) => <li className={classes.AnswerItem} onClick={() => onClickHandle(answer.id)}> {answer.text} </li>; export default withContext(AnswerItem);

да

Подскажите пожалуйста, мне нужно передать firebase в componentDidMount. Firebase инициализирую в отдельном классе. Затем в компонентах использую FirebaseContext.Consumer внутри render(). Соотвественно при обращении где-то вне render, обратиться не получается. Как быть?

Надо, значит, оборачивать сам компонент в FirebaseContext.Consumer. Например, при экспорте писать не export default MyComponent; А export default props => <FirebaseContext.Consumer> {firebaseContext => <MyComponent {...firebaseContext} {...props} />} </FirebaseContext.Consumer>

Подскажите пожалуйста, мне нужно передать firebase в componentDidMount. Firebase инициализирую в отдельном классе. Затем в компонентах использую FirebaseContext.Consumer внутри render(). Соотвественно при обращении где-то вне render, обратиться не получается. Как быть?

Или использовать хук useContext (и useEffect вместо componentDidMount)

Надо, значит, оборачивать сам компонент в FirebaseContext.Consumer. Например, при экспорте писать не export default MyComponent; А export default props => <FirebaseContext.Consumer> {firebaseContext => <MyComponent {...firebaseContext} {...props} />} </FirebaseContext.Consumer>

Спасибо, попробую.

Или использовать хук useContext (и useEffect вместо componentDidMount)

Спасибо, не слышал про useEffect, почитаю про него, тоже попробую заюзать

@michaeldaineka спасибо

Подскажите пожалуйста, мне нужно передать firebase в componentDidMount. Firebase инициализирую в отдельном классе. Затем в компонентах использую FirebaseContext.Consumer внутри render(). Соотвественно при обращении где-то вне render, обратиться не получается. Как быть?

Ты ведь можешь передать то, что получил из контекста в пропсы, соответвенно и в cDM получишь

Ты ведь можешь передать то, что получил из контекста в пропсы, соответвенно и в cDM получишь

Хмм, тоже вариант, попробую. Спасибо

Ты ведь можешь передать то, что получил из контекста в пропсы, соответвенно и в cDM получишь

Еще раз спасибо, все получилось!!!

Привет. Пытаюсь настроить алиасы путей. Использую create-react-app, который убирает paths из tsconfig.json, а файл extends просто не подхватывает. Как эта штука настраивается?

Привет. Пытаюсь настроить алиасы путей. Использую create-react-app, который убирает paths из tsconfig.json, а файл extends просто не подхватывает. Как эта штука настраивается?

Попробуйте это https://github.com/risenforces/cra-alias

Попробуйте это https://github.com/risenforces/cra-alias

Для вебпака использую это: react-app-rewire-aliases Проблема не в сборке, мне выкидывают ошибку компиляции из-за того что перед запуском create-react-app чистит пути из настроек компилятора. Меня такое поведение очень удивило)

Хотя надо попробовать, там же другие хуки срабатывают. Спасибо.

привет, можно ли как-то объединить это в один эффект?

Нет

Явно разные условия. Нет ничего плохого в том что эффектом несколько А все те функции возвращают отписку?

Попробуйте это https://github.com/risenforces/cra-alias

Спасибо, сработало) Теперь ещё такой вопрос: как использовать эту утилиту, если нужно добавить свой плагин в сборку? (например вместе с react-app-rewired) Может вот этой штукой пользоваться? https://github.com/risenforces/craco-alias#migrating-from-cra-alias

Спасибо, сработало) Теперь ещё такой вопрос: как использовать эту утилиту, если нужно добавить свой плагин в сборку? (например вместе с react-app-rewired) Может вот этой штукой пользоваться? https://github.com/risenforces/craco-alias#migrating-from-cra-alias

А зачем плагины в rewired для алиасов? Он же умеет это из коробки

Спасибо, сработало) Теперь ещё такой вопрос: как использовать эту утилиту, если нужно добавить свой плагин в сборку? (например вместе с react-app-rewired) Может вот этой штукой пользоваться? https://github.com/risenforces/craco-alias#migrating-from-cra-alias

Не в курсе

Не в курсе

Эта штука тоже работает. Она требует дополнительный конфиг, зато более универсальная и позволяет подключать и другие различные плагины кроме алиасов.

Эта штука тоже работает. Она требует дополнительный конфиг, зато более универсальная и позволяет подключать и другие различные плагины кроме алиасов.

Ты без плагина все делать можешь Там же тебе только нужен config overrides

А зачем плагины в rewired для алиасов? Он же умеет это из коробки

Не увидел последнее сообщение. Я не знаю, но у меня почему-то не сработал этот rewired (смотри первое сообщение), а craco без проблем словил.

Немного оффтоп. У кого MacBook 12? Его экрана и производительности вам хватает для разработки?

Немного оффтоп. У кого MacBook 12? Его экрана и производительности вам хватает для разработки?

Экрана точно нет, но можно второй подрубить и ок Производительности должно хватать

Экрана точно нет, но можно второй подрубить и ок Производительности должно хватать

Блин) ладно) спасибо

продолжу оффтом. А чем обусловлена такая популярность маков во фронтенд девелопменте?

Ты без плагина все делать можешь Там же тебе только нужен config overrides

Любопытства ради попробовал всё же ещё повозиться с rewire. Там в любом случае придётся прописывать одинаковые пути по 2 раза: в config-overrides.js и tsconfig.json, хотя было бы удобно сработать вот по такой схеме: https://github.com/viniciusmelquiades/react-app-rewire-alias#for-typescript-users Но такого модуля уже нет. Если есть аналоги, мне будет интересно узнать.