Executando verificação de segurança...
1
HenriikOliveira
1 min de leitura ·

Como posso melhorar meu component react?

Para melhorar este componente responsável pela barra de navegação do site, criado com React e TypeScript e também responsável por renderizar a versão mobile e desktop, qual seria uma abordagem ou técnicas que poderiam ser utilizadas para tornar o código mais eficiente e fácil de manter?

export default function Navbar() {
  const [bodyWidth, setBodyWidth] = useState(window.innerWidth);

  const optionsText = [
    "home",
    "company",
    "marketplace",
    "features",
    "team",
    "contact",
  ];

  function resizeEvent() {
    setBodyWidth(window.innerWidth);
  }

  useEffect(() => {
    window.addEventListener("resize", resizeEvent);

    return () => window.removeEventListener("resize", resizeEvent);
  }, []);

  return (
    <Container classPersonalization="containerPersonalizeNavbar">
      <div className="navbar_containerLogo">
        <img className="navbar_logo" src={logo} alt="Logo" />
        <p className="navbar_textMain">Landwind</p>
      </div>

      {bodyWidth <= 1024 ? (
        <>
          <label htmlFor="checkboxMenuMobile" className="labelMenuMobile">
            <FiMenu />
          </label>
          <input
            type="checkbox"
            name="checkboxMenuMobile"
            id="checkboxMenuMobile"
          />
          <div className="navbar_contaierOptionsMobile">
            {optionsText.map((option, index) => (
              <a className="navbar_options" key={option + index} href="#">
                {option}
              </a>
            ))}
          </div>
        </>
      ) : (
        <div className="navbar_containerOptions">
          {optionsText.map((option, index) => (
            <a className="navbar_options" key={option + index} href="#">
              {option}
            </a>
          ))}
        </div>
      )}

      <div className="navbar_containerButtons">
        <StarGithub />
        <ButtonBlue text="Download" classPersonalization="buttonblueNavBar" />
      </div>
    </Container>
  );
}
Carregando publicação patrocinada...
1
1
1
MattFerreira

Sim seria o melhor, principalmente pensando no lado de performance (imaginando q esse componente possa ser utilizado em um projeto grande), pq cada vez vc conseguir criar as regras de renderização (principalmente essas baseadas no tamanho da tela) com somente CSS, melhor será a performance das páginas.

Indo nessa linha de fazer a renderização condicional por CSS, oq vejo q vc possa melhorar o código desse componente é separar o código q é usado em mobile e em desktop em componentes diferentes, até pra ficar separado as responsabilidades de cada coisa. Ex:

// antes
{bodyWidth <= 1024 ? (
       <>
         <label htmlFor="checkboxMenuMobile" className="labelMenuMobile">
           <FiMenu />
         </label>
         <input
           type="checkbox"
           name="checkboxMenuMobile"
           id="checkboxMenuMobile"
         />
         <div className="navbar_contaierOptionsMobile">
           {optionsText.map((option, index) => (
             <a className="navbar_options" key={option + index} href="#">
               {option}
             </a>
           ))}
         </div>
       </>
     ) : (
       <div className="navbar_containerOptions">
         {optionsText.map((option, index) => (
           <a className="navbar_options" key={option + index} href="#">
             {option}
           </a>
         ))}
       </div>
     )}

// depois
function Navbar() {
...
    return (
    ...
    <>
     <NavbarContentMobile />
     <NavbarContentDesktop />
    </>
    ....
    )
1
1
1
1