artalar
Просто на хуках, когда что-то сложное нужно сделать, начинается сильная головная боль....
Kurzdor
народ, я слышал что юзать index от map очень плохо и нужно юзать что то типа uuid, но не представляю как это должно работать когда я получаю данные с сервера и их маплю?
а там даже и айди вида 1-2-3-4-5
Daniil
Если только ты массивом манипулируешь
Kurzdor
Просто на хуках, когда что-то сложное нужно сделать, начинается сильная головная боль....
function useStateRef(initialValue) {
const [ref, setState] = useState(initialValue)
const callback = useCallback(
ref => {
setState(ref)
},
[ref, setState]
)
callback.current = ref
return callback
}
https://codesandbox.io/s/3q2nvl3vop
Kurzdor
так, я вроде затупил и запостил штуку которая делает не то что хочешь
Ilya
Жаль useState не возвращает третьим элементом рефку на стейт 🤔 а то мне нужно одно значение из стейта в колбеке, но значение меняется чаще чем колбек вызывается
так ведь можно свой хук для этого и написать
artalar
На классах это было бы проще)
artalar
Daniil
написать на классах? 🤔
Kurzdor
https://gist.github.com/erkobridee/d1202079d23c9531c7b94f2138095b77
1
2
https://blog.castiel.me/posts/2019-02-19-react-hooks-get-current-state-back-to-the-future/
3
https://codesandbox.io/s/qk8rn54l94
artalar
МИКСИНЫ
Kurzdor
Ilya
МИКСИНЫ
вот тут есть пример как стейт кладут в useRef https://github.com/nathanbuchar/react-hook-thunk-reducer/blob/master/src/thunk-reducer.js
artalar
народ, я слышал что юзать index от map очень плохо и нужно юзать что то типа uuid, но не представляю как это должно работать когда я получаю данные с сервера и их маплю?
а там даже и айди вида 1-2-3-4-5
fetch().then(list => list.map((el, id) => ({…el, id})))
Этого достаточно
Kurzdor
а, боже, в принице можно опиратся на id от бакенда
чота я туплю
artalar
fetch().then(list => list.map((el, id) => ({…el, id})))
Этого достаточно
Тут ключевой момент в том что мы ID проставляем сразу же после получения с бека, можно даже на сетевом домене это делать, тогда никаких коллизий не будет.
Igor
Всем привет! Есть некий объект - инстанс класса сторонней тулзы, через который можно пользоваться инструментами этой тулзы, данный инстанс нужно прокинуть в несколько компонентов. Вопрос - стоит ли хранить его в state компонента? Или лучше записать в свойства компонента, через this?
Igor
Будет ли хранение в стейте являться хорошей практикой?
Ilya
Всем привет! Есть некий объект - инстанс класса сторонней тулзы, через который можно пользоваться инструментами этой тулзы, данный инстанс нужно прокинуть в несколько компонентов. Вопрос - стоит ли хранить его в state компонента? Или лучше записать в свойства компонента, через this?
звучит так, что хочется положить в контекст и сделать хуки для доступа к нужным методам
Daniil
Тут ключевой момент в том что мы ID проставляем сразу же после получения с бека, можно даже на сетевом домене это делать, тогда никаких коллизий не будет.
Какой id? Ты же индексами манипулируешь)
Kurzdor
Kurzdor
Какой id? Ты же индексами манипулируешь)
не, если бы он не юзал так, а вот так при рендере
{
arr.map((el, index) => (<Element data={el} key={index}>))
}
то если удалится какой то элемент, к примеру 3, то
будет перерендер 4, 5, 6 и тд
и это основная ошибка
а так, решение арталара норм вполне
Kurzdor
если бэк не отдает свои idшники
Daniil
Разве только при таком кейсе, и то, точно ли не будет другого уникального значения?
Kurzdor
народ, а есть статья которая расписывает проблемы оптимизации приложения на хуках?
и покажет возможные проблемы
Sergey
artalar
Какой id? Ты же индексами манипулируешь)
И?)) Если их проставлять на сетевом уровне до работы с данными - никаких проблем от слова совсем
artalar
Ну, конечно, если нет догрузки!
artalar
Ну, конечно, если нет догрузки!
Но догрузка в системах без uuid / cursor (так же уникальный) чет не представляется
Kurzdor
Но догрузка в системах без uuid / cursor (так же уникальный) чет не представляется
да, nanoid лучше ес чо
artalar
если догрузка то можно тоже делать такие махинации
Нужно тогда уже к индексу прибавлять каунт
Daniil
И?)) Если их проставлять на сетевом уровне до работы с данными - никаких проблем от слова совсем
Ох уж эти проблемы фронтендеров
artalar
лол
Kurzdor
Igor
звучит так, что хочется положить в контекст и сделать хуки для доступа к нужным методам
Kurzdor
Ilya
Kurzdor
в App
foo
setFoo
в Map через контекст пробрасываем setFoo
в мапе setFoo(чота там)
в input через контекст получаем данные с стейта
или юзаем Redux
foo это в стейте
setFoo это метод чтобы вызывать в чайлд компоненте
Kurzdor
@artalar ты также делаешь когда нужно такое делать?
artalar
шо?
artalar
Скажу сразу, у меня реатом))
Kurzdor
я про вопрос
и мое решение без петуха(redux)
Igor
ого, не ожидал что сразу два человека врубятся, спасибо!)
в общем мой вопрос в том, насколько правильно хранить этот foo в стейте, учитывая то, что foo в моём случае - это объект ymaps - инстанс класса карт с кучей методов и полей, поэтому интересно, какие подводные камни могут быть у такого подхода
Kurzdor
ого, не ожидал что сразу два человека врубятся, спасибо!)
в общем мой вопрос в том, насколько правильно хранить этот foo в стейте, учитывая то, что foo в моём случае - это объект ymaps - инстанс класса карт с кучей методов и полей, поэтому интересно, какие подводные камни могут быть у такого подхода
тогда подумайте над такой структурой
App
UsersMap?
Input
Map
вообщем через пропсы/ и тд общайтесь между компонентов
Павел
Народ. У меня складывается сложная ситуация с моим приложением. Его нужно доделать, но времени у меня почти не осталось (отпуск почти кончился). Обещал хорошему человеку сделать до 25 числа бесплатно... Если кто-то из вас может оказать посильную помощь за символическую денежку - напишите мне в личку. Это приложение должно собирать ответы пользователя по категориям, формировать на их основе сообщение и отправлять в ВК. Дизайн я сделал. Логику экранов тоже описал. react-redux вроде раскидал правильно. Мне с моим минимальным опытом и скоростью разработки будет долго копаться. Может кто-то за пару часов сможет хотя бы сверстать требуемое на vk-ui. Если вы в Ркасноярске, то с удовольствием с вами встречусь.
Igor
бесплатно...
Ivan
Anonymous
Serega
боль))
🤴👷♂️🦸♂️🧚♀️
Kurzdor
а кто то знает где можно посмотреть пример приложения на хуках где используются все хуки?
state/effect/context/ref/useCallback/useImperativeHandle/useLayoutEffect/useMemo
Kurzdor
найболее интересует применение useCallback, useMemo, useImperativeHandle
Igor
найболее интересует применение useCallback, useMemo, useImperativeHandle
https://codedojo.ru/courses/react-hooks
Anonymous
Всем привет. Вопрос: если у меня Single Page приложение, разве сохранять информацию о сессии в LocalStorage это безопасно?
Anonymous
Да
Anonymous
Одинаково безопасно, кроме http only cookie но с ней иногда никак
Anonymous
Одинаково безопасно как и ...?
Anonymous
Куку ты из кода достать не можешь
Anonymous
так точно, если httpOnly - не могу. Вот меня и интересует вопрос безопасности, мне видится что любое хранилище к которому js браузера имеет доступ - не безопасно
Nikolai