SolidJS vs React: Comparando Modelos de Componentes y Rendimiento

Al elegir un framework frontend, entender cómo maneja el renderizado de componentes y el rendimiento es crucial. Para los desarrolladores de React que consideran SolidJS, las diferencias en los modelos de componentes y sistemas de reactividad impactan directamente el rendimiento de la aplicación y la experiencia de desarrollo.

Este artículo compara los modelos de componentes de SolidJS y React, enfocándose en sus mecanismos de renderizado, características de rendimiento y diferencias prácticas en el código.

Modelos de Componentes: Diferencias Fundamentales

React y SolidJS adoptan enfoques fundamentalmente diferentes para el renderizado de componentes, a pesar de su sintaxis JSX similar.

Modelo de Componentes de React

React utiliza un modelo basado en renderizado con estas características clave:

• Los componentes son funciones que se ejecutan en cada cambio de estado
• Usa un DOM Virtual para minimizar las actualizaciones reales del DOM
• Se basa en diffing para determinar qué cambió
• Los componentes re-renderizan todo su subárbol por defecto

function Counter() {
  const [count, setCount] = useState(0);
  
  // Esta función se ejecuta en cada renderizado
  console.log("Component rendering");
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

En este ejemplo, toda la función del componente se re-ejecuta cada vez que count cambia, y el proceso de reconciliación de React determina qué actualizaciones del DOM son necesarias.

Modelo de Componentes de SolidJS

SolidJS utiliza un modelo de compilación reactiva con estas características:

• Los componentes se ejecutan solo una vez durante la inicialización
• No hay DOM Virtual ni algoritmo de diffing
• Crea un grafo reactivo de dependencias
• Actualiza solo los nodos específicos del DOM afectados por cambios de estado

function Counter() {
  const [count, setCount] = createSignal(0);
  
  // Esta función se ejecuta solo una vez
  console.log("Component initializing");
  
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

En SolidJS, la función del componente se ejecuta solo una vez. El sistema reactivo rastrea qué partes del DOM dependen de qué señales, actualizando solo esos nodos específicos cuando los valores cambian.

Sistemas de Reactividad Comparados

Los sistemas de reactividad de React y SolidJS determinan cómo los cambios de estado se propagan a la interfaz de usuario.

Reactividad Basada en Hooks de React

React utiliza un sistema de reactividad de grano grueso:

• El estado se gestiona a través de hooks como useState y useReducer
• Los cambios de estado desencadenan el re-renderizado de componentes
• React depende de la memoización (useMemo, useCallback, React.memo) para prevenir re-renderizados innecesarios
• El flujo de datos se gestiona a través de props y contexto

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn React", completed: false },
    { id: 2, text: "Build app", completed: false }
  ]);

  // Todo este componente se re-renderiza cuando todos cambia
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? {...todo, completed: !todo.completed} : todo
    ));
  };

  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={() => toggleTodo(todo.id)} 
        />
      ))}
    </ul>
  );
}

// Este componente se re-renderiza cuando las props cambian
function TodoItem({ todo, onToggle }) {
  console.log(`Rendering: ${todo.text}`);
  return (
    <li>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={onToggle} 
      />
      <span>{todo.text}</span>
    </li>
  );
}

Reactividad de Grano Fino de SolidJS

SolidJS utiliza un sistema de reactividad de grano fino:

• El estado se gestiona a través de primitivas reactivas como createSignal y createStore
• Las actualizaciones son granulares, dirigiéndose solo a los nodos del DOM afectados
• No hay necesidad de memoización extensiva
• Las dependencias reactivas se rastrean automáticamente

function TodoList() {
  const [todos, setTodos] = createStore([
    { id: 1, text: "Learn SolidJS", completed: false },
    { id: 2, text: "Build app", completed: false }
  ]);

  const toggleTodo = (id) => {
    setTodos(id, "completed", completed => !completed);
  };

  return (
    <ul>
      <For each={todos}>
        {(todo) => (
          <TodoItem todo={todo} onToggle={[toggleTodo, todo.id]} />
        )}
      </For>
    </ul>
  );
}

function TodoItem(props) {
  // Esto se registra solo una vez durante la inicialización
  console.log(`Creating: ${props.todo.text}`);
  
  return (
    <li>
      <input 
        type="checkbox" 
        checked={props.todo.completed} 
        onChange={() => props.onToggle[0](props.onToggle[1])} 
      />
      <span>{props.todo.text}</span>
    </li>
  );
}

Benchmarks de Rendimiento y Análisis

Los diferentes modelos de componentes llevan a diferencias significativas de rendimiento entre React y SolidJS.

Rendimiento de Renderizado

Según el JS Framework Benchmark, SolidJS consistentemente supera a React en la mayoría de métricas:

• Renderizado inicial: SolidJS es típicamente 30-40% más rápido
• Rendimiento de actualización: SolidJS puede ser 2-5x más rápido para actualizaciones parciales
• Uso de memoria: SolidJS usa significativamente menos memoria debido a su enfoque compilado

Operaciones del DOM

La diferencia clave de rendimiento proviene de cómo se manejan las operaciones del DOM:

• React: Crea una representación virtual del DOM, la compara con la versión anterior, luego aplica los cambios
• SolidJS: Compila componentes en operaciones directas del DOM sin representación intermedia

Esta diferencia se vuelve más pronunciada con:

• Listas grandes de elementos
• Actualizaciones frecuentes de estado
• Árboles de componentes complejos

Ejemplos de Componentes del Mundo Real

Examinemos cómo estas diferencias se manifiestan en un ejemplo práctico: una lista filtrable.

Implementación en React

function FilterableList() {
  const [items] = useState([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = useState("");
  
  // Este cálculo se ejecuta en cada renderizado
  const filteredItems = items.filter(item => 
    item.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <div>
      <input 
        type="text" 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
        placeholder="Filter items..." 
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

En React, cuando el filtro cambia:

1. Todo el componente se re-renderiza
2. La lógica de filtrado se re-ejecuta
3. React compara la lista anterior y la nueva
4. Solo se actualizan los nodos del DOM que cambiaron

Implementación en SolidJS

function FilterableList() {
  const [items] = createSignal([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = createSignal("");
  
  // Esto crea una señal derivada que recalcula solo cuando las dependencias cambian
  const filteredItems = createMemo(() => 
    items().filter(item => 
      item.toLowerCase().includes(filter().toLowerCase())
    )
  );
  
  return (
    <div>
      <input 
        type="text" 
        value={filter()} 
        onInput={e => setFilter(e.target.value)} 
        placeholder="Filter items..." 
      />
      <ul>
        <For each={filteredItems()}>
          {item => <li>{item}</li>}
        </For>
      </ul>
    </div>
  );
}

En SolidJS, cuando el filtro cambia:

1. Solo la señal filter se actualiza
2. El memo filteredItems se recalcula
3. El componente For actualiza eficientemente solo los elementos de la lista que necesitan cambiar
4. No ocurre re-renderizado de componentes

Uso de Memoria y Tamaño del Bundle

Los modelos de componentes también afectan el uso de memoria y el tamaño del bundle:

Huella de Memoria

• React: Mayor uso de memoria debido a instancias de componentes, nodos fiber y el DOM virtual
• SolidJS: Menor uso de memoria ya que los componentes se compilan después de la inicialización

Tamaño del Bundle

• React: La biblioteca central es ~40KB (minificada + gzipped)
• SolidJS: La biblioteca central es ~7KB (minificada + gzipped)

Esta diferencia puede ser significativa para aplicaciones críticas en rendimiento, especialmente en dispositivos móviles.

Técnicas de Optimización

Cada framework requiere diferentes enfoques de optimización debido a sus modelos de componentes.

Optimización en React

Los desarrolladores de React necesitan estar familiarizados con varias técnicas de optimización:

• React.memo para prevenir re-renderizados innecesarios de componentes
• useMemo para cachear cálculos costosos
• useCallback para estabilizar referencias de funciones
• Gestión cuidadosa del estado para evitar re-renderizar árboles grandes de componentes

// Componente React optimizado
const ExpensiveComponent = React.memo(({ data, onAction }) => {
  // Lógica del componente
});

function ParentComponent() {
  const [data, setData] = useState([]);
  
  // Estabilizar referencia de función
  const handleAction = useCallback((id) => {
    // Lógica de acción
  }, []);
  
  // Cachear cálculo costoso
  const processedData = useMemo(() => {
    return data.map(item => expensiveProcess(item));
  }, [data]);
  
  return <ExpensiveComponent data={processedData} onAction={handleAction} />;
}

Optimización en SolidJS

SolidJS requiere menos optimizaciones explícitas:

• createMemo para cachear cálculos costosos
• Uso adecuado de señales para asegurar actualizaciones granulares

// Componente SolidJS con optimización mínima necesaria
function ParentComponent() {
  const [data, setData] = createSignal([]);
  
  // La función no necesita estabilización
  const handleAction = (id) => {
    // Lógica de acción
  };
  
  // Cachear cálculo costoso
  const processedData = createMemo(() => {
    return data().map(item => expensiveProcess(item));
  });
  
  return <ExpensiveComponent data={processedData()} onAction={handleAction} />;
}

Conclusión

La diferencia fundamental entre React y SolidJS radica en sus modelos de componentes. El enfoque basado en renderizado de React proporciona un modelo mental más simple pero requiere más optimización para aplicaciones críticas en rendimiento. El modelo de compilación reactiva de SolidJS ofrece rendimiento superior con menos esfuerzo de optimización pero requiere entender conceptos de programación reactiva.

Tu elección entre estos frameworks debe considerar los requisitos de rendimiento de tu aplicación, la experiencia del equipo y las necesidades del ecosistema. React ofrece madurez y un vasto ecosistema, mientras que SolidJS proporciona ventajas de rendimiento y un modelo de reactividad más eficiente.

Ambos frameworks tienen sus fortalezas, y entender sus modelos de componentes te ayuda a tomar una decisión informada para tu próximo proyecto.

Preguntas Frecuentes