React é de longe o maior framework de front-end Javascript no desenvolvimento web moderno. Embora Svelte tenha crescido constantemente em popularidade nos últimos anos. O que torna Svelte tão especial.

• Sintaxe muito fácil de aprender
• Em vez de enviar a estrutura para o navegador, o código é compilado para js padrão, resultando em um pacote MUITO menor e código extremamente rápido.

SolidJS é um framework de interface de usuário cuja sintaxe é muito semelhante ao React, mas é compilado para javascript moderno, como o Svelte permite que as pessoas obtenham a velocidade e os tamanhos dos pacotes do Svelte, mas usem a sintaxe React a que estão acostumados.

Configurando um Projeto SolidJS

Basta executar o seguinte comando para gerar um novo projeto ...

npm init solid app ProjectName

ou para texto datilografado

npm init solid app-ts ProjectName

O que é igual

• A estrutura do arquivo do projeto gerado deve se parecer muito com um aplicativo criar-reagir
• JSX ainda funciona como JSX

Portanto, no React, você normalmente usaria o gancho useState para gerar uma variável de estado e o processo ainda funciona da mesma forma no SolidJS, exceto que agora usamos a função createSignal.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Ciclo de vida e createEffect

É aqui que o pensamento em sólido difere muito do pensamento em reação. No React, o componente inteiro é uma função que é executada novamente cada vez que você atualiza o estado, tornando possíveis loops infinitos ao alterar o estado em chamadas de função no corpo da função do componente. No React, a solução para isso é mover esse tipo de código em seu próprio fechamento com o gancho useEffect para ser executado quando desejado, não em cada renderização da função do componente.

O sólido não usa um DOM virtual e nas atualizações de estado não executa a função do componente novamente. Em vez disso, o código reativo é encapsulado em chamadas createEffect que, em seguida, executam novamente a função quando qualquer sinal dentro delas é atualizado. O benefício disso é ...

• Você pode fazer chamadas Fetch / Axios sem ter que envolvê-los em useEffect para evitar loops infinitos
• JSX irá compilar automaticamente em chamadas createEffect, por isso eles serão atualizados quando o estado for atualizado.

O bom disso é que as atualizações são mais granulares, tornando desnecessária a despesa de um dom virtual (apenas o código que depende dos dados atualizados será alterado sem a necessidade de executar nenhuma comparação).

Bottom Line

O Solid mantém o que há de excelente na Sintaxe React, mas também faz uso das abordagens de aprimoramento de desempenho do Svelte. Eu não ficaria surpreso em ver o SolidJS crescer na mesma linha de Frameworks como Svelte e React!