How Reactivity works in Solid

In recent years, the front-end development landscape has witnessed an explosion of new ways to build client-side applications. One such new approach that has garnered substantial attention is Solid. But why? What does Solid offer that others like React don't? The answer lies, in part, in its robust reactivity system.

At the heart of this system is the createSignal function – a foundational building block of Solid's reactivity model. For those venturing into Solid, understanding this function is similar to understanding React's useState hook. This article aims to demystify the magic behind createSignal, dissecting its internals and showcasing its significance in the Solid ecosystem. Whether you're a novice curious about Solid or an experienced developer seeking a deeper understanding, this deep dive into createSignal is tailored for you.

What is Reactivity?

Before diving deep into the intricacies of createSignal, it's crucial to first understand the underlying concept that it is built upon: reactivity. In essence, reactivity is a programming paradigm where changes to one piece of data automatically update other connected data. It's like setting up a series of dominoes, where pushing one will cause a chain reaction.

Reactivity in Front-end Development:

In the world of front-end development, reactivity means that when underlying data changes, the user interface (UI) updates automatically to reflect those changes. Imagine an email application where, when you receive a new email, the unread email count updates without you needing to refresh the page. That's reactivity in action!

Traditional vs. Reactive Programming:

In traditional programming, if data changes, developers often have to manually find all the UI pieces that rely on that data and update them. This approach can be error-prone and cumbersome. With reactive programming, the system knows which parts of the UI are dependent on which pieces of data. When data changes, the system automatically updates the corresponding parts of the UI. It's efficient, less error-prone, and offers a smoother user experience.

Why Does Reactivity Matter?

The allure of reactivity lies in its promise of more intuitive code structures, fewer bugs, and improved developer productivity. Instead of juggling manual DOM updates or resorting to cumbersome methods to keep the UI in sync with data, developers can focus on building the application's logic. The framework or library handles the synchronization, ensuring the UI is always a true reflection of the application's state.

Reactivity in Solid vs. Other Libraries:

Most modern front-end libraries, including React, Vue, and Svelte, offer some form of reactivity. However, their approach and implementation differ. React, for instance, employs a virtual DOM diffing mechanism. Vue utilizes a reactive data model with observers. Solid, on the other hand, introduces fine-grained reactivity that updates only what's necessary, without the overhead of virtual DOM diffing. This can lead to more efficient updates and potentially smoother UI interactions.

Diving into createSignal

Solid's createSignal is a core building block of its reactivity system. But first, we need to understand its mechanics and how it intertwines with the library's overarching principles.

Basics of createSignal:

At its core, createSignal is a function that returns two other functions: a getter (to retrieve the value) and a setter (to update the value). These two functions allow you to establish a reactive data source. When the setter updates the value, any dependent computations or components automatically react to the change.

const [count, setCount] = createSignal(0)
console.log(count()) // Outputs: 0
setCount(5)
console.log(count()) // Outputs: 5

Reactivity in Action with createSignal:

Consider a Solid component that displays a counter. When you press a button, the counter increments. With createSignal, this dynamic behavior is straightforward:

function CounterComponent() {
  const [count, setCount] = createSignal(0)

  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
      <p>{count()}</p>
    </>
  )
}

In the example above, every time the button is clicked, setCount modifies the value, triggering a re-render of the paragraph displaying the count, without rerendering the entire component.

Derivatives and Computed Values:

Beyond basic state management, createSignal plays well with computed values. By using other utilities like createEffect or createMemo, developers can create derivative computations that automatically update when signals change.

const [count, setCount] = createSignal(0)
const doubledCount = createMemo(() => count() * 2)
console.log(doubledCount()) // Outputs: 0
setCount(5)
console.log(doubledCount()) // Outputs: 10

In this instance, doubledCount is a computed value that reacts whenever count changes.

Now that we have an understanding of how to use createSignal, we can explore more advanced techniques and best practices leveraging it in the upcoming sections.

Interplay with createEffect

Solid complements createSignal with createEffect to define side effects based on reactive data changes. Understanding how these two interact can enhance the way you architect your applications.

Understanding createEffect:

At its essence, createEffect allows developers to run side effects in response to reactive changes. Whether it's DOM updates, network requests, or logging, createEffect keeps an eye on dependencies and re-runs them when they change.

const [count, setCount] = createSignal(0)

createEffect(() => {
  console.log(`Current count is: ${count()}`)
})

setCount(3) // Logs: "Current count is: 3"
setCount(5) // Logs: "Current count is: 5"

Benefits of createEffect:

1. Automatic Dependency Tracking: Unlike other frameworks where you have to explicitly mention dependencies, Solid's createEffect automatically tracks them. If you utilize a reactive signal within an effect, Solid knows to rerun the effect when that signal changes.

2. Ensures Correctness: By rerunning effects when dependencies change, createEffect ensures your application's side effects are in sync with your state.

3. Efficient: Solid optimizes effect execution, ensuring that effects only rerun when truly necessary.

Synergy with createSignal:

Combine createSignal with createEffect, and you can define interactions that interact with external data sources, for example:

const [username, setUsername] = createSignal("")
const [userData, setUserData] = createSignal(null)

createEffect(async () => {
  if (username()) {
    const response = await fetch(`/api/users/${username()}`)
    const data = await response.json()
    setUserData(data)
  }
})

In this example, whenever username changes, the effect fetches new user data and updates the userData signal. This pattern showcases a real-world scenario where reactive programming simplifies data fetching logic.

Managing State with Stores

While createSignal and createEffect are fundamental to Solid's reactivity model, there often arises the need to manage more complex and shared state. That's where stores come in.

What is a Store?

In Solid, a store is an abstracted mechanism to hold and manage state, especially when it's shared across multiple components. Think of it as a more structured and scalable createSignal, capable of holding more complex data structures.

Basic Store Creation:

Creating a store is straightforward. Here's a simple example:

import { createStore } from "solid-js/store"

const [userStore, setUserStore] = createStore({
  name: "Alice",
  age: 25,
})

Here, userStore provides a read-only access to the store's state, and setUserStore lets you update the store.

Updating and Using Stores:

Stores can be updated using the provided setter function, and reading the store's state is as simple as accessing an object's properties:

setUserStore("name", "Bob") // Update name to Bob

console.log(userStore.name) // Logs: "Bob"

Reactivity with Stores:

Just like signals, stores are reactive. You can use them inside createEffect or any reactive context, and they will trigger updates when their values change:

createEffect(() => {
  console.log(`Hello, ${userStore.name}!`)
})

When to Use Stores Over Signals:

1. Complex State: When your state isn't just a primitive value but an object or array.
2. Shared State: When multiple components need to access or modify the same state.
3. Encapsulated Logic: When you want to co-locate the logic associated with state management, such as actions or computed values.

With the knowledge of stores, you're better equipped to structure your Solid applications. They are crucial when building larger applications, providing an organized way to handle state.

Conclusion

Solid's reactivity system offers a perfect blend of power, performance, and flexibility. It empowers developers to write efficient web applications while taking full advantage of JavaScript's dynamic capabilities. As web development continues to evolve, libraries like Solid, which focus on performance optimization and ease-of-use, will inevitably play an integral role in shaping the future of reactive programming.