Из-за чего здесь утечка памяти?

Question

[Дмитрий Максимюк]

Делаю игру, в нём есть магазин, в котором есть несколько панелей, указывает, что в данном коде, утечка:

const Businesses = () => {
  // массив бизнесов
  const getBusinesses = useRecoilValue(GET_BUSINESSES)
  const businesses = getBusinesses.map((item: any) => <ShopItems
      key={`id${item.id}`}
      img={item.img}
      title={item.title}
      requirements={`Стоимость: ${item.costString} ${SYMBOLS_RUB}`}
      status={`Доходность: ${item.earningsString} ${SYMBOLS_RUB}/час`}
    />)

  return (
    <Div>
      {businesses}
    </Div >
  )
}

У меня предположение, что из-за map, но... сколько его использовал, такого не было...
Возникает только тогда, когда я повторно перехожу в раздел с этим компонентом

Спасибо за помощь!

Answer 1

[Антон Иванов]

Обычно такая ошибка возникает в результате выполнения асинхронной операции внутри хука useEffect. Чтобы решить проблему внутри хука должен быть return. См тут https://ru.reactjs.org/docs/hooks-effect.html компоненты со сбросом эффектов

Comments

[Дмитрий Максимюк]

Но я не юзаю useEffect. Компонент до Businesses

const Shop = ({ id }: TProps) => {
  const client = useRecoilValue(CLIENT);
  const panel = useRecoilValue(SUBNAVIGATION_BAR_SELECT)

  // eslint-disable-next-line
  useMemo(() => client.emit('GET_ITEMS'), [])

  return (
    <Panel id={id} >
      <PanelHeader separator={true}>
        <PanelHeaderContent status='Крутые шмотки только тут!' before={true} aside>
          Магазин
        </PanelHeaderContent>
      </PanelHeader>
      <CardMyBalance />
      <Filter />
      <Separator />
      {
        panel === "businesses" ? <Businesses /> :
          panel === "promotions" ? <Promotions /> :
            panel === "home" ? <Home /> :
              panel === "cars" ? <Cars /> :
                panel === "clothes" ? <Clothes /> :
                  panel === "smartphones" ? <Smartphones /> :
                    panel === "market" ? <Market /> : null
      }
    </Panel >
  )
}

[WbICHA]

Дмитрий Максимюк,

{
        panel === "businesses" ? <Businesses /> :
          panel === "promotions" ? <Promotions /> :
            panel === "home" ? <Home /> :
              panel === "cars" ? <Cars /> :
                panel === "clothes" ? <Clothes /> :
                  panel === "smartphones" ? <Smartphones /> :
                    panel === "market" ? <Market /> : null
      }

Матерь божья, за меньшее срок дают, а ты ЭТО всем демонстрируешь.

[Дмитрий Максимюк]

WbICHA, другого я ничего не придумал, что бы выводить нужный компонент в зависимости от значения. Есть предложение как улучшить код?
Да и я не скрываю, что я учусь, а этот ответ вообще не в тему был, я спросил про утечку, как её пофиксить, а в твоем случае, критикуешь - предлагай.

[WbICHA]

Дмитрий Максимюк, основы программирования: switch.

[Дмитрий Максимюк]

WbICHA,

[Дмитрий Максимюк]

WbICHA, и в чем же будет разница между switch и обычным if? По сути, никакой, только там конструкция switch, а тут обычная проверка значения. И даже спорить не буду, что так можно, но разницы - никакой. Приведи хотя бы один аргумент в пользу switch, кроме читаемости, так как этот пункт индивидуальный.

[abberati]

Дмитрий Максимюк, между свичом и множественным if нет никакой разницы, кроме читабельности и семантики. Хз, что значит «это индивидуально», но факт достаточно очевидный — свич читабельнее и понятнее

[Дмитрий Максимюк]

abberati, я готов с этим поспорить.
1. Не сильно важно, но, мой вариант сокращает кол-во строк. Одно такое условие можно уместить в одну строку, но, проект делает чисто себе, поэтому я перенёс строки так, как будет читаться лучше всего именно мне, для дальнейшей поддержки.
2. Саму конструкцию switch нет возможности разместить в разметке, следствие чего, больше строк и стоит создать еще одну переменную, которая примет в себя ReactNode, дабы передать значение в разметку.
3. Если бы я писал логику, где требуется масштабирование в дальнейшем, я заюзал бы switch, но, даже если захотеть, легко изменяется, но повторюсь, это не требуется в дальнейшем.
4. Самое главное, название темы одно а обсуждается: if и switch.
Больше на эту тему не хочу вести диалог, хотя с радостью готов выслушать реально убедительные аргументы.

upd: решил посчитать кол-во строк, мое решение - 7, хотя можно и в одну, switch - 12 =) Удачи!

[WbICHA]

Дмитрий Максимюк,
1. Сейчас какой год чтобы считать количество строк? Давай ещё и символы считать, называй переменные a, b, c, d и т.д. Более того, уменьшение количества строк чаще ведёт к снижению читабельности, а не наоборот.
2. Во-первых, есть, во-вторых, ей там вообще нечего делать, так что ты всё верно про переменную написал.
3. Писать нормально ─ это дело привычки, если ты её не вырабатываешь даже в своих проектах, где у тебя нет сроков, обязанностей и т.д., то в реальных задачах ты об этом тем более не будешь думать.
4. И что? Обсуждение в комментариях, решить основную проблему мы никак не мешаем.

П.с.: про то, что ты даже преттиером не пользуешься, я вообще молчу. А еслинт с плагинами вообще отвадил бы большую часть говнокода.

[abberati]

Дмитрий Максимюк, лаконичность кода является преимуществом, если добавляет выразительность. Как использование .map вместо for. Если лаконичность не добавляет выразительности или ослабляет её (как в твоём случае), то это не преимущество, а недостаток.

Но это твоя жизнь, твои правила, тут ты полностью прав

Answer 2

[abberati]

Но я не юзаю useEffect

Ты — нет. В указанном компоненте есть вызов одного единственного (кастомного) хука — useRecoilValue. Кастомные хуки — это функции, вызывающие обычные хуки, например useEffect

Comments

[Дмитрий Максимюк]

Честно скажу, еще не успел проверить свою теорию, но насколько понимаю, мне нужно сделать следующее:

let panel = useRecoilValue(STATE)
useEffect(() => {
  return (() => panel = useRecoilValue(STATE)
}), [])

[abberati]

Дмитрий Максимюк, нет, тебе вообще не это нужно делать. Это приведёт к другой ошибке — неконсистентный вызов хуков. Тебе нужно либо хорошенько вчитаться в документацию этой экспериментальной библиотеки, либо забить на утечку, либо не пользоваться экспериментальной библиотекой.

[Дмитрий Максимюк]

abberati, хорошо, спасибо! Первый раз чувствую себя беспомощным в решении утечки.

[abberati]

Дмитрий Максимюк, потому что не твой код её породил

[Дмитрий Максимюк]

abberati, что забавно...
Из документации: