SolidJS vs React: Comparing Component Models and Performance

When choosing a frontend framework, understanding how it handles component rendering and performance is crucial. For React developers considering SolidJS, the differences in component models and reactivity systems directly impact application performance and development experience.

This article compares SolidJS and React’s component models, focusing on their rendering mechanisms, performance characteristics, and practical code differences.

Component Models: Fundamental Differences

React and SolidJS take fundamentally different approaches to component rendering, despite their similar JSX syntax.

React’s Component Model

React uses a render-based model with these key characteristics:

• Components are functions that run on every state change
• Uses a Virtual DOM to minimize actual DOM updates
• Relies on diffing to determine what changed
• Components re-render their entire subtree by default

function Counter() {
  const [count, setCount] = useState(0);
  
  // This function runs on every render
  console.log("Component rendering");
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, the entire component function re-executes whenever count changes, and React’s reconciliation process determines what DOM updates are needed.

SolidJS’s Component Model

SolidJS uses a reactive compilation model with these characteristics:

• Components run only once during initialization
• No Virtual DOM or diffing algorithm
• Creates a reactive graph of dependencies
• Updates only the specific DOM nodes affected by state changes

function Counter() {
  const [count, setCount] = createSignal(0);
  
  // This function runs only once
  console.log("Component initializing");
  
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

In SolidJS, the component function executes just once. The reactive system tracks which parts of the DOM depend on which signals, updating only those specific nodes when values change.

Reactivity Systems Compared

The reactivity systems of React and SolidJS determine how state changes propagate to the UI.

React’s Hook-Based Reactivity

React uses a coarse-grained reactivity system:

• State is managed through hooks like useState and useReducer
• State changes trigger re-rendering of components
• React relies on memoization (useMemo, useCallback, React.memo) to prevent unnecessary re-renders
• Data flow is managed through props and context

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

  // This entire component re-renders when todos change
  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>
  );
}

// This component re-renders when props change
function TodoItem({ todo, onToggle }) {
  console.log(`Rendering: ${todo.text}`);
  return (
    <li>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={onToggle} 
      />
      <span>{todo.text}</span>
    </li>
  );
}

SolidJS’s Fine-Grained Reactivity

SolidJS uses a fine-grained reactivity system:

• State is managed through reactive primitives like createSignal and createStore
• Updates are granular, targeting only affected DOM nodes
• No need for extensive memoization
• Reactive dependencies are tracked automatically

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) {
  // This logs only once during initialization
  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>
  );
}

Performance Benchmarks and Analysis

The different component models lead to significant performance differences between React and SolidJS.

Rendering Performance

According to the JS Framework Benchmark, SolidJS consistently outperforms React across most metrics:

• Initial rendering: SolidJS is typically 30-40% faster
• Update performance: SolidJS can be 2-5x faster for partial updates
• Memory usage: SolidJS uses significantly less memory due to its compiled approach

DOM Operations

The key performance difference stems from how DOM operations are handled:

• React: Creates a virtual representation of the DOM, diffs it against the previous version, then applies changes
• SolidJS: Compiles components into direct DOM operations with no intermediate representation

This difference becomes more pronounced with:

• Large lists of items
• Frequent state updates
• Complex component trees

Real-World Component Examples

Let’s examine how these differences play out in a practical example: a filterable list.

React Implementation

function FilterableList() {
  const [items] = useState([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = useState("");
  
  // This calculation runs on every render
  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>
  );
}

In React, when the filter changes:

1. The entire component re-renders
2. The filtering logic re-executes
3. React diffs the previous and new list
4. Only changed DOM nodes are updated

SolidJS Implementation

function FilterableList() {
  const [items] = createSignal([
    "Apple", "Banana", "Cherry", "Date", "Elderberry"
  ]);
  const [filter, setFilter] = createSignal("");
  
  // This creates a derived signal that recalculates only when dependencies change
  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>
  );
}

In SolidJS, when the filter changes:

1. Only the filter signal updates
2. The filteredItems memo recalculates
3. The For component efficiently updates only the list items that need to change
4. No component re-rendering occurs

Memory Usage and Bundle Size

The component models also affect memory usage and bundle size:

Memory Footprint

• React: Higher memory usage due to component instances, fiber nodes, and the virtual DOM
• SolidJS: Lower memory usage as components are compiled away after initialization

Bundle Size

• React: Core library is ~40KB (minified + gzipped)
• SolidJS: Core library is ~7KB (minified + gzipped)

This difference can be significant for performance-critical applications, especially on mobile devices.

Optimization Techniques

Each framework requires different optimization approaches due to their component models.

React Optimization

React developers need to be familiar with several optimization techniques:

• React.memo to prevent unnecessary component re-renders
• useMemo to cache expensive calculations
• useCallback to stabilize function references
• Careful state management to avoid re-rendering large component trees

// Optimized React component
const ExpensiveComponent = React.memo(({ data, onAction }) => {
  // Component logic
});

function ParentComponent() {
  const [data, setData] = useState([]);
  
  // Stabilize function reference
  const handleAction = useCallback((id) => {
    // Action logic
  }, []);
  
  // Cache expensive calculation
  const processedData = useMemo(() => {
    return data.map(item => expensiveProcess(item));
  }, [data]);
  
  return <ExpensiveComponent data={processedData} onAction={handleAction} />;
}

SolidJS Optimization

SolidJS requires fewer explicit optimizations:

• createMemo for caching expensive calculations
• Proper signal usage to ensure granular updates

// SolidJS component with minimal optimization needed
function ParentComponent() {
  const [data, setData] = createSignal([]);
  
  // Function doesn't need stabilization
  const handleAction = (id) => {
    // Action logic
  };
  
  // Cache expensive calculation
  const processedData = createMemo(() => {
    return data().map(item => expensiveProcess(item));
  });
  
  return <ExpensiveComponent data={processedData()} onAction={handleAction} />;
}

Conclusion

The fundamental difference between React and SolidJS lies in their component models. React’s render-based approach provides a simpler mental model but requires more optimization for performance-critical applications. SolidJS’s reactive compilation model delivers superior performance with less optimization effort but requires understanding reactive programming concepts.

Your choice between these frameworks should consider your application’s performance requirements, team expertise, and ecosystem needs. React offers maturity and a vast ecosystem, while SolidJS provides performance advantages and a more efficient reactivity model.

Both frameworks have their strengths, and understanding their component models helps you make an informed decision for your next project.

FAQs