Всем привет! А подскажите как выполнить функцию в useEffect при инициализации компонента без ререндера ?

Посмотри вот это https://ru.reactjs.org/docs/hooks-reference.html#uselayouteffect

У меня на странице авторизации есть проверка логина/пароля. Получается мне нужно на кнопку при условии, что лог/пас верен привязывать ссылку ?

правильно будет сказать что-то типа «направить по необходимому url”

правильно будет сказать что-то типа «направить по необходимому url”

Ну в общих чертах понятно. Если не получится, можно в личку обратиться ?

Ну в общих чертах понятно. Если не получится, можно в личку обратиться ?

Da

Всем привет! А подскажите как выполнить функцию в useEffect при инициализации компонента без ререндера ?

Yo, в учебных целях или в проде используете хуки?

Yo, в учебных целях или в проде используете хуки?

в проде

в проде

Не видел ещё ни разу в проде, во многих компаниях только косятся на хуки, но боятся нового

Не видел ещё ни разу в проде, во многих компаниях только косятся на хуки, но боятся нового

с чего-то надо начинать

Не видел ещё ни разу в проде, во многих компаниях только косятся на хуки, но боятся нового

Много компаний опросил ?)

Много компаний опросил ?)

Много, по собесам очень много компаний видел

Много, по собесам очень много компаний видел

Неповезло

кек 2 раза вызывается создание Как такое может быть ? (компонент монтируется один раз)

кек 2 раза вызывается создание Как такое может быть ? (компонент монтируется один раз)

при этом useEffect сэтим депсом срабатывает 1 раз

кек 2 раза вызывается создание Как такое может быть ? (компонент монтируется один раз)

Читай доку. Тебе не гарантируется что функция будет вызвана только 1 раз. useMemo может вызываться хоть при каждом рендере.

нахрен она нужна если ничего не гарантирует

нахрен она нужна если ничего не гарантирует

Задавай этот вопрос разрабам реакта.

зачем нужен хук useImperativeHandle, никак не могу понять

зачем нужен хук useImperativeHandle, никак не могу понять

Без понятия что это за хук. Ни разу не пользовался.

кек <React.StrictMode> это. какая то сстранная тема приложение ререндерит 2 раза с ним

при этом эффект тригерит раз мб проблема не только в мемо

кек <React.StrictMode> это. какая то сстранная тема приложение ререндерит 2 раза с ним

кек это специально так сделали

Не видел ещё ни разу в проде, во многих компаниях только косятся на хуки, но боятся нового

у нас 4 проекта в проде

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

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

https://habr.com/ru/post/354806/

https://habr.com/ru/post/354806/

Спасибо, читал ) Отрисовать график не проблема, а вот как нагрузку уменьшить при риалтайм обновлении, вот вопрос.

Спасибо, читал ) Отрисовать график не проблема, а вот как нагрузку уменьшить при риалтайм обновлении, вот вопрос.

Честно - не знаю, отказались от D3, в пользу Recharts, единственное что приходит на ум - мемоизация уже имеющихся данных, но поможет ли на практике - не понятно

Честно - не знаю, отказались от D3, в пользу Recharts, единственное что приходит на ум - мемоизация уже имеющихся данных, но поможет ли на практике - не понятно

о, кстати да. Надо попробовать.

Ребята, как сделать пагинацию для загружающегося контента по клику. Клик - добавка в массив элементов. Какой подход, логика какая?

Ребята, как сделать пагинацию для загружающегося контента по клику. Клик - добавка в массив элементов. Какой подход, логика какая?

клик -> достать нужный контент -> заменить старый контент 🤔

клик -> достать нужный контент -> заменить старый контент 🤔

Может библиотека какая есть. Типо передается массив всего и из этого уже рендерится компонент с пагинацией.

ребят, как стилизировать React-table?

Может библиотека какая есть. Типо передается массив всего и из этого уже рендерится компонент с пагинацией.

есть

есть

Можешь показать какую, такую что сам пользовался.

Можешь показать какую, такую что сам пользовался.

вот человек выше про react-table спрашивал, там есть например. Или react-paginate

вот человек выше про react-table спрашивал, там есть например. Или react-paginate

Ну а как им пользоваться куда передается массив элементов?

Ну а как им пользоваться куда передается массив элементов?

сори, в данную минуту немножко занят, чтобы почитать документацию вместо тебя (

Подскажите кто знает, в документации говорится о нежелательности использования индексов в качестве ключей при рендере коллекций и далее 2 ссылки на кодпен, в первой говорится что типо вы можете встретить такие то проблемы если юзать индексы а вторая ссылка что тип там уже юзаются айдишники и это решает проблемы примеры из первой ссылки и мне не совсем ясно какие проблемы я тыкал и сравнивал элементы несколько раз и там и там одинаковый результат что я упустил? Спасибо

Подскажите кто знает, в документации говорится о нежелательности использования индексов в качестве ключей при рендере коллекций и далее 2 ссылки на кодпен, в первой говорится что типо вы можете встретить такие то проблемы если юзать индексы а вторая ссылка что тип там уже юзаются айдишники и это решает проблемы примеры из первой ссылки и мне не совсем ясно какие проблемы я тыкал и сравнивал элементы несколько раз и там и там одинаковый результат что я упустил? Спасибо

Там же понятно написано Если нет, то забей и юзай айдишники

Подскажите кто знает, в документации говорится о нежелательности использования индексов в качестве ключей при рендере коллекций и далее 2 ссылки на кодпен, в первой говорится что типо вы можете встретить такие то проблемы если юзать индексы а вторая ссылка что тип там уже юзаются айдишники и это решает проблемы примеры из первой ссылки и мне не совсем ясно какие проблемы я тыкал и сравнивал элементы несколько раз и там и там одинаковый результат что я упустил? Спасибо

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Подскажите кто знает, в документации говорится о нежелательности использования индексов в качестве ключей при рендере коллекций и далее 2 ссылки на кодпен, в первой говорится что типо вы можете встретить такие то проблемы если юзать индексы а вторая ссылка что тип там уже юзаются айдишники и это решает проблемы примеры из первой ссылки и мне не совсем ясно какие проблемы я тыкал и сравнивал элементы несколько раз и там и там одинаковый результат что я упустил? Спасибо

Скорее всего ,если ты юзаешь index в качестве ключа,то при работе с коллекцией,когда ты удалишь елемент из списка,то это индекс передеается другому елементу,проще говоря,id привязывается непосредственно к елеенту ,а index это просто ячейка памяти,в которой хранится елемент.А там хз)

Ребят, кто имел дело с CryptoJS ? Не пойму почему моя функция шифрования при одном и том же ключе шифрования всегда возвращает данные результаты const getEncryptedValue = value => { const encrypted = CryptoJS.AES.encrypt(String(value), "mycryptokey").toString(); return encrypted || ""; };

кто может глянуть и помоч с дропдауном? при открытии и нажатии на него снова, он перестает работать, я так думаю из-за лисенера а при открытии и нажатии на кнопку внутри, не делается переход и дает ошибку: https://codesandbox.io/s/crazy-heisenberg-l7prp Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

кто может глянуть и помоч с дропдауном? при открытии и нажатии на него снова, он перестает работать, я так думаю из-за лисенера а при открытии и нажатии на кнопку внутри, не делается переход и дает ошибку: https://codesandbox.io/s/crazy-heisenberg-l7prp Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

зачем вообще тут использовать addEventListener

кто может глянуть и помоч с дропдауном? при открытии и нажатии на него снова, он перестает работать, я так думаю из-за лисенера а при открытии и нажатии на кнопку внутри, не делается переход и дает ошибку: https://codesandbox.io/s/crazy-heisenberg-l7prp Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

а зачем тут вообще использовать button?

зачем вообще тут использовать addEventListener

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

Link to=«»

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

статью о JQuery ?

статью о JQuery ?

пример с реактом был, на классах, там в сетстейте вторым аргуметом вешали лисенер

1 это почитай про клик аутсайд 2 это прочитай про линк ту

1 это почитай про клик аутсайд 2 это прочитай про линк ту

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

подскажите пожалуйста. пытался прикрутить jest, написал тест, в котором были импорты каких-то констант. jest этих констант не видел, жаловался, что не может read property X of undefined. импорт был вида import { a, b } from '../../constants'. я поставил явный путь: import { a, b } from '../../constants/actions/myActions'. ошибка ушла, пришла другая, аналогичная. я пытался решить через настройки package.json. в конце психанул, забил на настройку, решил везде указать явные пути. но очередной ошибке этот фикс не помог. то есть там явно было указано "импорт { раз, два } from...", он его всё равно не видел. то есть ошибка не в том, что jest не определяет файлы index.js в котором только export * from './a'; export * from './b' такая же ошибка была во время попытки прикрутить код сплиттинг (react-code-sclitting), что наталкивает на мысль, что проблема не в jest, а в самой конфигурации. но где может быть ошибка в сборке в create-react-app? help please, что я делаю не так?

у кто-то была проблема с ререндерингом компонента при c использованием recompose ? Когда достаю значения из redux`s store в HOC функции - 2 раза ререндериться компонент(

У меня есть бэк, который отправляет в ответ jwt и его срок. Фронт на реакте принимает и дальше.. Вопрос в том какая правильная стратегия для хранения этого jwt (во всех статьях разное мнение). Я например могу со стороны бэка возращать куки и сохранять их, но как я понял это не удобно ибо сессия будет не постоянная. Рефреш токен например буду хранить там же. Как сделать сессию постоянной без постоянных запросов об авторизации?

У меня есть бэк, который отправляет в ответ jwt и его срок. Фронт на реакте принимает и дальше.. Вопрос в том какая правильная стратегия для хранения этого jwt (во всех статьях разное мнение). Я например могу со стороны бэка возращать куки и сохранять их, но как я понял это не удобно ибо сессия будет не постоянная. Рефреш токен например буду хранить там же. Как сделать сессию постоянной без постоянных запросов об авторизации?

Хранишь в http-only куках токен и никогда не задумываешься о них на фронте.

Хранишь в http-only куках токен и никогда не задумываешься о них на фронте.

я бы по рукам бил тому, кто в LS кладет токены

я бы по рукам бил тому, кто в LS кладет токены

С локал сторадж - это понятно, что плохо.

Хранишь в http-only куках токен и никогда не задумываешься о них на фронте.

А рефреш токен тогда держать постоянным?

А рефреш токен тогда держать постоянным?

Как тебе удобно так и держи. Суть в том, что фронт в принципе не работает с токеном. А дальше организуй всё как тебе хочется.

Как тебе удобно так и держи. Суть в том, что фронт в принципе не работает с токеном. А дальше организуй всё как тебе хочется.

Я понял, спасибо)

я бы по рукам бил тому, кто в LS кладет токены

А в чем проблема ? Секьюрити ?

А в чем проблема ? Секьюрити ?

в первую очередь, да

Куки точно так же можно украсть

Кстати, если фронт и бэк на одном порту крутятся, то корсы настраивать не над?

украдешь httponly куку, дам сотку

украдешь httponly куку, дам сотку

А если он пишет бэк))))

А если он пишет бэк))))

а это уже лайфхак ))

Есть люди с проектом в котором юзается персист? (не просто токен в локал сторадж, а полноценная бд в индекс дБ) С множеством таблиц и бд Вопрос такой Выхожу из приложения и очищаю бд. Но мне нужно тут же писать в неё (условно тут же). Что делать в этом случае? Ведь я вышел. Где то в фоне удаляется бд. При лргине мне нужна уже новая ссылка на бд (recreate). Но бд может не удалится и я захожу в неё. Увижу я по идее старые данные. Какие подходы есть для таких вещей?

@XaveScor ты писал про raf, я не смог найти применения к ресайзу, можно ссылку?

@XaveScor ты писал про raf, я не смог найти применения к ресайзу, можно ссылку?

Всмысле? Как использовать?

Всмысле? Как использовать?

как использовать вместо ресайза именно

как использовать вместо ресайза именно

Эта версия с багом небольшим, но мне фпадлу править.

коллеги, может у кого есть реализация мультплай чекбокса на хуках?

коллеги, может у кого есть реализация мультплай чекбокса на хуках?

Реализация чего?

приходит массив с объектами, рисую табличку. Отдать надо выбраные строки с данными

приходит массив с объектами, рисую табличку. Отдать надо выбраные строки с данными

возникла трудность с написанием или не пробовал еще?

возникла трудность . приходит такой бэк

делаю из него это

добавляя select

но проблема в том что он не успевает подгрузить данные с сервера.