Esconder elementos ou não renderizar ?

Boa tarde, Estou com uma duvida sobre qual a maneira correta em resolver o seguinte problema.

Tenho um gráfico que aparece na versão desktop porem queria fazer para quando o usuário acessar pelo celular o gráfico sumir.

Pesquisando achei duas maneiras.

1- Usar os atributos .d-sm-none .d-md-block (Bootstrap) Dessa forma funciona, quando acessado por uma resolução que determinei, ele esconde. Porem se eu abrir o console do desenvolvedor pelo Chrome e olhar ele esta la, porem invisível na interface.

Resolve o problema, porem fico com uma duvida, ele fica apenas invisível mas é renderizado, ou seja o navegador gasta processamento nele renderizando mas o deixa oculto? ou ele não é nem renderizado ? Podendo colocar outros Formulários que iram desconsiderar em questão de espaçamento.

2- Utilizar o window.innerWidth e window.innerHeight (JavaScript) Dessa forma eu consigo colocar para renderizar se a tela do usuário for maior que X e Y

     var w = window.innerWidth;
        var h = window.innerHeight;
        if(h >= 1280 || w >= 720 ){
            return(
                <div>
                    //Codigo..
                </div>
            );
        }

Obs: Estou usando o React e Bootstrap.