[Dúvida] Memo em coisas estatícas do componente? | React: otimizando a performance

Tenho uma dúvida sobre quando utilizar o useMemo, estou trabalhando em um componente muito similar ao do curso, com filtros busca e ordens

a questão é que quando eu digito uma letra por exemplo no input, o componente todo re-renderiza, inclusive o título do componente, que é mostrado piscando na print abaixo, isso me incomoda

Colocando esse título (tag h2) em uma variável com o useMemo, eu consigo evitar isso de acontecer, e o título não é renderizado mais de uma vez visto que ele nunca muda, mas isso é necessário? não sei se isso já e o exagero ou se ainda é um ganho de perfomance

Estou perguntando isso pois achei estranho que no componente visto em aula o título não pisca assim, apenas a seção toda pisca.

Agradeço se alguém conseguir esclarecer pra mim por favor :)

Componente:

Código

import Cards  from "./Cards.tsx";
import Categorys from "./Categorys.tsx";
import Orders from "./Orders";

function SearchFilter() {
    const { display } = useToggleDisplayState();

    const [searchBarStatus, setSearchBarStatus] = useState("");
    const [categoryStatus, setCategoryStatus] = useState("");
    const [orderStatus, setOrderStatus] = useState("");

    return (
        <>
            {display ? (
                <NewWrapper>
                    <NewContainer>
                        <Titulo>
                            SearchFilter
                            <Link id="secao7"></Link>
                        </Titulo>
                        <SearchBar
                            type="text"
                            placeholder="Nome do personagem"
                            onChange={(event) => setSearchBarStatus(event.target.value)}
                            value={searchBarStatus}
                        ></SearchBar>
                       <Categorys categoryStatus={categoryStatus} setCategoryStatus={setCategoryStatus}/>
                       <Orders orderStatus={orderStatus} setOrderStatus={setOrderStatus}/>
                       <Cards categoryStatus={categoryStatus} orderStatus={orderStatus} searchBarStatus={searchBarStatus}/>
                    </NewContainer>
                </NewWrapper>
            ) : null}
        </>
    );
}

export default SearchFilter;

Oi Lucas, tudo bem?

*Desculpe a demora em retornar. *

O useMemo é uma função do React que pode ser usada para memorizar o resultado de uma computação cara, evitando que ela seja repetida em renderizações subsequentes, a menos que as dependências mudem. Usar o useMemo para memorizar o título do componente pode ser uma boa solução para evitar que ele seja renderizado várias vezes durante a digitação no input.

Entretanto, é importante lembrar que o useMemo deve ser usado com cuidado e apenas quando realmente necessário. Em muitos casos, a sua utilização pode trazer poucos benefícios em termos de performance ou até mesmo diminuir a performance do componente.

No caso específico do título do componente, se ele não muda, é uma boa prática usá-lo como dependência do useMemo para garantir que ele não seja recalculado desnecessariamente. Para isso, basta envolver o título em uma chamada de useMemo, passando o título como argumento e uma array de dependências vazia, como mostrado abaixo:

const titulo = useMemo(() => {
  return <h2>Título do componente</h2>;
}, []);

Dessa forma, o título será renderizado apenas uma vez, na primeira vez que o componente for renderizado, e depois disso ele será memorizado e não será recalculado em renderizações subsequentes.

É importante lembrar que o useMemo deve ser usado com cuidado e apenas quando necessário, pois ele adiciona uma sobrecarga adicional ao componente. Em geral, é recomendado usar o useMemo apenas para cálculos mais pesados ou para evitar a criação desnecessária de objetos ou funções em cada renderização.

No entanto, se o título do componente é a única coisa que não deve ser renderizada novamente, uma solução mais simples seria extrair o título para fora do componente e passá-lo como uma prop. Dessa forma, o título não seria recalculado em cada renderização do componente. Algo assim:

function SearchFilter({ title }) {
  const { display } = useToggleDisplayState();
  const [searchBarStatus, setSearchBarStatus] = useState("");
  const [categoryStatus, setCategoryStatus] = useState("");
  const [orderStatus, setOrderStatus] = useState("");

  return (
    <>
      {display ? (
        <NewWrapper>
          <NewContainer>
            {title}
            <SearchBar
              type="text"
              placeholder="Nome do personagem"
              onChange={(event) => setSearchBarStatus(event.target.value)}
              value={searchBarStatus}
            ></SearchBar>
            <Categorys
              categoryStatus={categoryStatus}
              setCategoryStatus={setCategoryStatus}
            />
            <Orders orderStatus={orderStatus} setOrderStatus={setOrderStatus} />
            <Cards
              categoryStatus={categoryStatus}
              orderStatus={orderStatus}
              searchBarStatus={searchBarStatus}
            />
          </NewContainer>
        </NewWrapper>
      ) : null}
    </>
  );
}

const titulo = <h2>Título do componente</h2>;

function App() {
  return <SearchFilter title={titulo} />;
}

Espero que tenha te ajudado.

Um abraço e bons estudos.

Mergulhe em programação