Por que utilizar o useEffect no filtro e busca?

Por que devemos utilizar o useEffect?

Compreendo que ele é utilizado para observar variáveis e rodar funções caso elas mudem.

No curso utilizamos:

    useEffect(() => {
        const novaLista = cardapio.filter(
            (item) => testaBusca(item.title) && testaFiltro(item.category.id)
        );
        setLista(novaLista);
    }, [busca, filtro]);

Porém o mesmo efeito não seria alcançável se utilizarmos a função filter direto no JSX?

return (
        <div className={styles.itens}>
            {lista
                .filter((item) => testaBusca(item.title) && testaFiltro(item.category.id))
                .map((item) => (
                    <div>
                        <Item key={item.id} {...item} />
                    </div>
                ))}
        </div>
    );

Eu testei na minha máquina, e o resultado foi o mesmo de utilizar o useEffect, então existe algum outro motivo especifico para estarmos utilizando-o no projeto da aula?