#atom

A declarative JavaScript UI library with a fine-grained reactivity system

Core Idea: Solid.js is a declarative JavaScript library that uses a fine-grained reactivity system and compilation approach to achieve high performance without using a virtual DOM, while maintaining a familiar JSX syntax.

Key Elements

Core Architecture

• Fine-grained reactivity

  • Precision updates to only what changes
  • Signal-based reactivity model
  • No component re-rendering
  • Granular dependency tracking

• Compilation approach

  • JSX compiles to optimized DOM instructions
  • No Virtual DOM reconciliation
  • Direct DOM manipulation
  • Minimal runtime footprint

• Mental model

  • Components render once, then reactive system takes over
  • Separation of reading and writing with signals
  • Explicit reactive computations

Key Features

• Signals

  • Core primitive for reactive state
  • Getter/setter pair for reactivity

  import { createSignal } from "solid-js";
  
  function Counter() {
    const [count, setCount] = createSignal(0);
    
    return (
      <button onClick={() => setCount(count() + 1)}>
        Clicks: {count()}
      </button>
    );
  }
  

• Effects

  • Run side effects when dependencies change
  • Automatically track dependencies

  import { createSignal, createEffect } from "solid-js";
  
  function Logger() {
    const [count, setCount] = createSignal(0);
    
    createEffect(() => {
      console.log("Count is now:", count());
    });
    
    return <button onClick={() => setCount(count() + 1)}>Increment</button>;
  }
  

• Memos

  • Cached computations that update when dependencies change
  • Optimize derived values

  import { createSignal, createMemo } from "solid-js";
  
  function DoubleCounter() {
    const [count, setCount] = createSignal(0);
    const doubledCount = createMemo(() => count() * 2);
    
    return (
      <div>
        <p>Count: {count()}</p>
        <p>Doubled: {doubledCount()}</p>
        <button onClick={() => setCount(c => c + 1)}>Increment</button>
      </div>
    );
  }
  

• Resources

  • Handle async data fetching
  • Built-in loading and error states

  import { createResource } from "solid-js";
  
  function UserProfile({ userId }) {
    const [user, { refetch }] = createResource(() => 
      fetch(`/api/users/${userId}`).then(r => r.json())
    );
    
    return (
      <div>
        {user.loading && <p>Loading...</p>}
        {user.error && <p>Error: {user.error.message}</p>}
        {user() && <div>Name: {user().name}</div>}
      </div>
    );
  }
  

Performance Benefits

• No unnecessary re-rendering
• Minimal memory footprint
• Direct DOM updates
• Excellent performance in benchmarks
• Small bundle size

Ecosystem

• Solid Router - Routing solution
• Solid Start - Full-stack framework
• Solid Element - Custom elements integration
• SolidHack - React compatibility layer
• Solid Primitives - Community-built reactive primitives

React Similarities and Differences

• Similar JSX syntax and component model
• Different reactivity system (signals vs. hooks)
• No reconciliation or re-rendering overhead
• More explicit reactivity but similar mental model

Additional Connections

• Broader Context: Modern Frontend Rendering Approaches (signal-based reactivity)
• Applications: Building Reactive UIs (practical implementation)
• See Also: Svelte (similar performance approach, different syntax)

References

1. Solid.js Official Documentation
2. Ryan Carniato (creator) articles and presentations
3. Framework performance benchmarks

#solidjs #javascript #framework #frontend #reactivity #webdevelopment

Connections:

Sources:

• From: Why Virtual DOM Is No Longer Needed