[Ajuda] Looping infinito | Next.js Full stack: arquitetura de componentes Front-end

A chamada do no If causa um looping infinito, gostaria de saber como resolver:

import { BaseComponent } from "@src/theme/BaseComponent";
import { StyleSheet } from "@src/theme/StyleSheet";
import * as icons from "./svgs/_index";

const iconSizes = {
  xs: '12px',
  sm: '16px',
  md: '24px',
  lg: '32px',
  xl: '36px',
} as const;

interface IconProps {
  name: keyof typeof icons;
  styleSheet?: StyleSheet;
  size?: keyof typeof iconSizes;
}

export default function Icon({ name, size }: IconProps) {
  const CurrentIcon = icons[name];

  if(!CurrentIcon) return <>"${name}" is not a valid <Icon /></>;

  return (
    <BaseComponent
      as="svg"
      styleSheet={{
        width: iconSizes[size],
        height: iconSizes[size],
      }}
      color="inherit"
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <CurrentIcon />
    </BaseComponent>
  )
}

Icon.defaultProps = {
  size:'md',
  name: 'default_icon',
}

Oi!

Primeiro lance que percebi é que tu tá usando esse pedaço de código pra conferir se o ícone tá na pista:

if (!CurrentIcon) return <>"${name}" is not a valid <Icon /></>;

Essa checagem tá ok pra garantir que o ícone que tão passando como propriedade seja um ícone válido na sua lista. Mas, geralmente, o looping sem fim tá rolando porque essa checagem tá dentro do componente, e isso pode acionar uma renderização sem parar.

Minha dica inicial pra resolver isso seria tirar essa verificação de dentro do componente, evitando que ela rode a cada renderização.

Dá pra fazer essa verificação antes de renderizar o componente.

// ...

// Antes do componente Icon
const isValidIcon = (name: string) => {
  return Object.keys(icons).includes(name);
};

// Dentro do componente onde tu tá usando o Icon
if (!isValidIcon(name)) {
  return <>"${name}" is not a valid <Icon /></>;
}

return <Icon name={name} size={size} />;

Com isso, a verificação acontece antes de chamar o componente Icon, evitando o looping infinito causado pela checagem dentro do componente. Só ajusta o código conforme a estrutura do teu projeto.

Outra parada, notei que tá usando TypeScript pra tipagem, o que é massa. Só certifica que as definições de tipo tão certinhas pra não causar confusão que também pode gerar comportamentos malucos.

Outro ponto chave é dar uma revisada no uso do hook useEffect. Às vezes, loops infinitos acontecem quando tem efeitos colaterais disparando renderizações repetidas. Se tá usando useEffect, dá um confere pra garantir que tá tudo certinho.

Se mesmo assim o bagulho continuar zoado, pode ser que tenha algum detalhe específico do teu projeto que precise de uma análise mais profunda. Nesse caso, manda mais info sobre como tá usando o componente Icon.

Mergulhe em programação