Александр
норм способ да?
Почему бы и нет
Vladimir
ну если ссылка за сайтом ,то да
Serhii
Господа, вопрос есть. Стартуем новый проект, и есть требование - SEO. И тут у меня встал выбор - nextjs vs нативный hydrate из ReactDOMServer. Что проще, плюсы, минусы, подводные камни? С ssr раньше не сталкивался, для меня пока что это темный лес
Volodymyr
чето я не понимаю этих мемо штук… const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); };const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); }; есть банальный хендлер на он чейндж const [state, setState] = React.useState<State>({ originLabel: !!route ? route.origin.label : '', originAdress: '', originCoords: null, destinationLabel: !!route ? route.origin.label : '', destinationAdress: '', destiantionCoords: null }); есть банальный стейт формы <input disabled={!!route} ref={originEl} name="originAdress" placeholder="Address" type="text" onChange={React.useCallback(onType, [state.originAdress])} /> есть банальный инпут в котором я говорю onChange={React.useCallback(onType, [state.originLabel])} ```и у меня один хуй когда я ввожу чето в одно из полей формы, перерендеривается все… хотя сверху обмазал React.memo че я делаю не так? как добится того, типа я ввожу что то в форму и перерендериваеца только одна. а не все
Serhii
Спасибо. После чисто клиентского реакта сложно вкатиться? Или в целом все так же?
Artem
Спасибо. После чисто клиентского реакта сложно вкатиться? Или в целом все так же?
я уже полгода плачу в prerender.io, потому что не все гладко, когда у бизнеса есть другие задачи, а проекту пара лет
Dmitriy
Ребят нубвопрос. Мне либа предоставляет обработчик готовый. Например файнал форм для кастомного поля. Как мне не оверрайдить а расширить этот обработчик? Например onBlur
🦜
Спасибо. После чисто клиентского реакта сложно вкатиться? Или в целом все так же?
вкатиться не сложно, там есть Learn и куча примеров в репе. Главное внимательно читать доку
Sergey
подкиньте плз идейку: есть компонент родитель (контейнер) у него есть ref, который через ридакс кидается ребенку (таблица). Ребенок-таблица должен подписаться на евент прокрутки родителя, чтобы при прокрутке родителя выполнялся метод. В случае когда был доступен componentWillRecievProps все было ясно-понятно, но сейчас чета не могу родть алгоритм.... из getDerivedStateFromProps нельзя вызвать метод класса-таблицы, только если метод статичный... но мне статичный не нужен...
Artem
нужно понимать принцип изоморфного кода
у меня план работ в понимании был немного другой))) 1. Очистить код от всего браузерно-специфичного добра типа window, DOM манипуляций, прямых обращений к location, history, document и т.д., на сервере ничего из этого нет. Да и вообще это плохая практика. 2. Следующий шаг — осознать, что каждый раз при выполнении кода нужно иметь свежий контекст. В противном случае запросы от разных клиентов будут перекрываться. 3.Крайне желательно данные хранить либо локально, либо в Redux Store, но никак не в общем коде, там — только статичные вещи, не меняющиеся от запроса к запросу. Крайне желательно проанализировать код на предмет утечек памяти, на сервере это быстро станет критичным. 4.Проверить и убедиться, что все используемые библиотеки умеют работать из-под сервера.
Александр
вкатиться не сложно, там есть Learn и куча примеров в репе. Главное внимательно читать доку
Главное внимательно читать доку...ох сколько вопросов бы отпало, если бы люди чуть чаще следовали этому дельному совету
Artem
а gatsby кто-нить прикручивал для статики?
Александр
чето я не понимаю этих мемо штук… const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); };const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); }; есть банальный хендлер на он чейндж const [state, setState] = React.useState<State>({ originLabel: !!route ? route.origin.label : '', originAdress: '', originCoords: null, destinationLabel: !!route ? route.origin.label : '', destinationAdress: '', destiantionCoords: null }); есть банальный стейт формы <input disabled={!!route} ref={originEl} name="originAdress" placeholder="Address" type="text" onChange={React.useCallback(onType, [state.originAdress])} /> есть банальный инпут в котором я говорю onChange={React.useCallback(onType, [state.originLabel])} ```и у меня один хуй когда я ввожу чето в одно из полей формы, перерендеривается все… хотя сверху обмазал React.memo че я делаю не так? как добится того, типа я ввожу что то в форму и перерендериваеца только одна. а не все
Для начало очень и очень плохо инлайнить вызов useCallback, если у вас будет conditional отображение компонентов, то могут нарушиться Rules of Hooks
🦜
Gatsby style?
я хз как там
Volodymyr
Kirill
Ребят, всем привет, какую либу использовать для локализации?
Serhii
Спасиб
🦜
чекни FormApi.blur
Александр
Ilya
razzel голый и мертвый
голый и слава богу) А почему мертвый? последняя публикация в npm 2 меясца
Kirill
linguijs
а в чем отличие между той же i18n?
Александр
через реф короче. без валью
Сурово, а зачем так?
Ilya
вокруг него ничего нет, поэтому мертвый
а что надо вокруг? Если стартовать с нуля проект с ssr - самое сложно как раз накрурить все конфиги для вебпака. Все остальено проблем не вызывает.
Volodymyr
Сурово, а зачем так?
чтобы автофил из гугл карт прикрутить… сложная история
Mikhail
https://bundlephobia.com/result?p=i18n@0.8.3 ну нафиг
Ilya
нормальный роутинг, кодсплитинг, чанки цсс
роутинг вопрос к кокртеной фреймворку/библиотеке на котором все будет рендериться. кодсплитинг, чанки цсс вроде тоже не проблема. Но пока сильно не тыкал
Александр
Serhii
у меня план работ в понимании был немного другой))) 1. Очистить код от всего браузерно-специфичного добра типа window, DOM манипуляций, прямых обращений к location, history, document и т.д., на сервере ничего из этого нет. Да и вообще это плохая практика. 2. Следующий шаг — осознать, что каждый раз при выполнении кода нужно иметь свежий контекст. В противном случае запросы от разных клиентов будут перекрываться. 3.Крайне желательно данные хранить либо локально, либо в Redux Store, но никак не в общем коде, там — только статичные вещи, не меняющиеся от запроса к запросу. Крайне желательно проанализировать код на предмет утечек памяти, на сервере это быстро станет критичным. 4.Проверить и убедиться, что все используемые библиотеки умеют работать из-под сервера.
Перечитал ещё раз, не совсем понял про чистый контекст. Что имеется ввиду, можешь пояснить пожалст?
Ilya
чето я не понимаю этих мемо штук… const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); };const onType = e => { setState({ ...state, [e.currentTarget.name]: e.currentTarget.value }); }; есть банальный хендлер на он чейндж const [state, setState] = React.useState<State>({ originLabel: !!route ? route.origin.label : '', originAdress: '', originCoords: null, destinationLabel: !!route ? route.origin.label : '', destinationAdress: '', destiantionCoords: null }); есть банальный стейт формы <input disabled={!!route} ref={originEl} name="originAdress" placeholder="Address" type="text" onChange={React.useCallback(onType, [state.originAdress])} /> есть банальный инпут в котором я говорю onChange={React.useCallback(onType, [state.originLabel])} ```и у меня один хуй когда я ввожу чето в одно из полей формы, перерендеривается все… хотя сверху обмазал React.memo че я делаю не так? как добится того, типа я ввожу что то в форму и перерендериваеца только одна. а не все
вроде onChange={React.useCallback(onType, [state.originAdress])} вообще не законно. Все хуки должны быть объевлены в начале
Александр
вроде onChange={React.useCallback(onType, [state.originAdress])} вообще не законно. Все хуки должны быть объевлены в начале
Законно, пока там условного рендеринга не появится, но чтобы избежать проблем, да, надо до возврата JSX все определять.
Volodymyr
Ща попробую
Ilya
Законно, пока там условного рендеринга не появится, но чтобы избежать проблем, да, надо до возврата JSX все определять.
в любом случае так делать не стоит. Не проверять же каждый раз код кода добавляешь условия
Dmitriy
@artalar Сколько звезд у либы?)
Dmitriy
чекни FormApi.blur
А ты ен куришь что для rff такое Decorator ?
rovnyart
Блин, все равно не пойму, ну неужели кроме глушения правила ниче нельзя сделать по-нормальному?
Александр
вынести loadIntegrations во вне
rovnyart
ну да, у меня дата провайдер в пропсах, функция загрузки в пропсах
rovnyart
во вне чего?
rovnyart
о, спасибо, вот так вот проде збсь стало
Александр
ну да, у меня дата провайдер в пропсах, функция загрузки в пропсах
если loadIntegrations в пропсах, то она может поменяться так? если так то результат useEffect должен менятся тоже так? Логично же, если вы *знаете точно очень* что оно не поменяется, то напишите комментарий с подавлением этой проверки на следующей строки и комментарием желательно объясняющим вашу уверенность
arts
о, спасибо, вот так вот проде збсь стало
В async/await здесь смысла вообще нет.
rovnyart
а не, не стало збсь, это я просто глушилку забыл убрать*(((
rovnyart
теперь оно хочет обратно в useEffect
🦜
теперь оно хочет обратно в useEffect
https://overreacted.io/a-complete-guide-to-useeffect/
rovnyart
loadIntegrations в пропсах, потому что мой дата провайдер - это hoc, оно никогда не поменяется
Александр
rovnyart
Если указать в deps оно бесконечно начинает загружать
rovnyart
Запросы шокт на сервак бесконечно
Александр
ну так это потмоу что она новая каждый раз видимо:)
Александр
проблема у вас выше
Александр
надо чтобы loadIntegrations не создаваль заново каждый раз
Александр
Покажите код где создается эта loadIntegrations, может прояснится что-то
Konstantin
Привет, немного не по реакт вопрос. Кто-нибудь подключал услуги интернет-эквайринга на сайт для физ.лица без ИП?
Konstantin
Нужно всего на пару недель
Andrey
а не, не стало збсь, это я просто глушилку забыл убрать*(((
зачем инит пихать в депсы, если он создается каждый рендер?