• Как закончить функционал сортировки списка (React)?

    @antsam
    вместо useEffect вам нужен useMemo
    const sortedCompanyList = useMemo(
        () => sort(companyList, activeIcon),
        [companyList, activeIcon]
    )

    Желательно что функция sort(companyList, activeIcon) возвращала новый массив а не мутировала companyList.
    Да, и почитайте про мемоизацию и хук useMemo
    Ответ написан
  • Как с нуля развернуть существующий проект на React имея готовый билд??

    @antsam
    Если кодовой базе проекта больше года, то вот Вам мой позитивный совет - пишите заново. Это может оказаться проще чем восстанавливать этого динозавра и потом рефакторить весь тот легаси код и переводить подключенные библиотеки на новые версии.
    Основная ценность именно в сбилженых рабочих файлах (я надеюсь оно же запускается). Как правило основное время тратится на то чтобы понять как оно должно выглядеть и работать. А если уже есть пример того как оно должно работать, то реализовать все с чистого листа - может даже будет лучше.
    Ответ написан
    Комментировать
  • Где и как лучше хранить логику работы с api в React приложении?

    @antsam
    Много есть вариантов которые вполне можно использовать. Однозначно правильного и всеми принятого решения нет.
    Если проект на редаксе, то делают через мидлвары. Или thunk, или saga - что тоже мидлвары.
    Если вопрос чисто по апи, то посмотрите в сторону Apollo.
    Меня ни один вариант не устраивал. У меня свой - непопулярный.
    Я в своем последнем проекте провел жирную линию между UI и бизнесс логикой. Готовил статью по этому поводу, но все руки не дойдут ее закончить. Хоть тут отпишусь )

    Если в кратце то начиная с корневого компонента я разделил все на актеры и UI. Ветка с актерами отвечает за бизнесс логику, а ветка с UI только за отрисовку (то для чего реакт и был создан)
    У этих двух слоев общий стор (например с помощью редакса).
    UI слой берет данные из стора и по действиям пользователя меняет состояние.
    Слой актеров смотрит на изменение состояния и выполняет соответсвующие изменения в сторе. В том числе делает запросы на сервер и сохраняет результат в сторе.

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

    Такой подход с актерами очень удобен в отличии от редакс мидлвар, т.к. можно использовать функционал реакта, а именно хуки.
    А чтобы не перепутать актеров с UI компонентами я их пишу немного в другом стиле - без jsx и оборачиваю в специально для этого созданный модуль react-ghost (типа "призрак")
    Ответ написан
    Комментировать
  • В чём разница между reselect и хуками useCallback и useMemo?

    @antsam
    Reselect логично использовать для глобальной мемоизации - когда одно и тоже мемоизированное значение нужно использовать в разных компонентах(контейнерах) программы. Поэтому реселект используют совместно с редаксом, т.к. редакс - это состояние всего приложения.

    useMemo и useCallback - есть смысл использовать для мемоизации данных которые вычисляются для одного конкретного компонента (или его детей) и нигде больше не нужны.
    Ответ написан
    Комментировать
  • Как убрать вложенность объекта?

    @antsam
    result.map(({ products: { newArray }, ...item}) => ({ ...item, products: newArray }))

    Или если не уверен что весде есть свойство 'products':
    result.map((item) => ({ ...item, products: item?.products?.newArray }))
    Ответ написан
    Комментировать
  • Как мне отключить mousedown для всего блока?

    @antsam
    $( "body" ).on('mousedown', '.mian_block :not(.content_block)', function(e) {
    alert('f');
    })
    Ответ написан