Stop Solid.js Reactive Updates Breaking: Problem → Fix → Tips

The Problem

Solid.js is a powerful JavaScript framework that offers fine-grained reactivity, but its reactive system can feel fragile when you're not careful. Developers frequently encounter situations where reactive updates mysteriously stop working, leaving UI elements frozen and unresponsive. This happens because Solid.js tracks dependencies automatically, and breaking that tracking chain causes reactivity to fail silently.

The most common culprits are:

1. Accessing signals outside of reactive contexts - Reading a signal value in a non-reactive scope means changes won't trigger updates
2. Untracked accesses - Accidentally preventing dependency tracking when you need it
3. Stale closures - Functions capturing old signal values instead of current ones
4. Breaking the reactive chain - Storing signal values in regular variables instead of keeping them reactive
5. Improper effect dependencies - Effects not re-running when they should because dependencies aren't properly tracked

Let's explore each problem and its solution.

Problem 1: Accessing Signals Outside Reactive Contexts

The Issue

import { createSignal, createEffect } from 'solid-js';

const [count, setCount] = createSignal(0);

// ❌ BROKEN: This reads count outside a reactive context
const doubled = count() * 2;
console.log(doubled); // Logs 0, but never updates

setCount(5);
console.log(doubled); // Still logs 0 - not reactive!

When you read a signal value directly in non-reactive code, Solid.js can't track that dependency. The variable doubled becomes a static value, not a reactive computation.

The Fix

import { createSignal, createEffect, createMemo } from 'solid-js';

const [count, setCount] = createSignal(0);

// ✅ FIXED: Use createMemo for derived values
const doubled = createMemo(() => count() * 2);

createEffect(() => {
  console.log('Doubled:', doubled()); // Logs 0, then 10
});

setCount(5); // Now doubled updates and effect re-runs

Key insight: Any computation that depends on signals must live inside a reactive context like createMemo, createEffect, or JSX expressions.

Problem 2: Untracked Accesses Breaking Reactivity

The Issue

import { createSignal, createEffect } from 'solid-js';

const [user, setUser] = createSignal({ name: 'Alice', age: 30 });
const [filter, setFilter] = createSignal('name');

// ❌ BROKEN: Effect only tracks 'filter', not 'user'
createEffect(() => {
  const field = filter();
  const value = user()[field]; // This access isn't tracked!
  console.log(`${field}: ${value}`);
});

setUser({ name: 'Bob', age: 31 }); // Effect doesn't re-run
setFilter('age'); // Effect re-runs, but only because filter changed

The problem here is that user() is accessed inside a conditional-like pattern. Solid.js can't predict which property you'll access, so it doesn't track the dependency properly.

The Fix

import { createSignal, createEffect } from 'solid-js';

const [user, setUser] = createSignal({ name: 'Alice', age: 30 });
const [filter, setFilter] = createSignal('name');

// ✅ FIXED: Explicitly track both dependencies
createEffect(() => {
  const field = filter();
  const userData = user(); // Explicitly read the whole object
  const value = userData[field];
  console.log(`${field}: ${value}`);
});

setUser({ name: 'Bob', age: 31 }); // Effect re-runs
setFilter('age'); // Effect re-runs

Alternatively, use createMemo to make the dependency explicit:

import { createSignal, createMemo, createEffect } from 'solid-js';

const [user, setUser] = createSignal({ name: 'Alice', age: 30 });
const [filter, setFilter] = createSignal('name');

// ✅ FIXED: Separate concerns with createMemo
const selectedField = createMemo(() => {
  return user()[filter()];
});

createEffect(() => {
  console.log('Field value:', selectedField());
});

Problem 3: Stale Closures in Event Handlers

The Issue

import { createSignal } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  // ❌ BROKEN: Handler captures stale count value
  const handleClick = () => {
    console.log('Count is:', count()); // Always reads current value, but...
    setCount(count() + 1); // This might use stale value in batched updates
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

While this specific example works, the pattern becomes problematic with async operations or when handlers are memoized.

The Fix

import { createSignal } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  // ✅ FIXED: Use updater function to avoid stale values
  const handleClick = () => {
    setCount(prev => prev + 1); // Always uses current value
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Or for more complex scenarios:

import { createSignal, createEffect } from 'solid-js';

export default function DataFetcher() {
  const [id, setId] = createSignal(1);
  const [data, setData] = createSignal(null);

  // ✅ FIXED: Effect properly tracks id changes
  createEffect(async () => {
    const currentId = id(); // Capture in effect scope
    const response = await fetch(`/api/data/${currentId}`);
    const result = await response.json();
    setData(result); // Uses correct id value
  });

  return (
    <div>
      <button onClick={() => setId(id() + 1)}>Next</button>
      <pre>{JSON.stringify(data(), null, 2)}</pre>
    </div>
  );
}

Problem 4: Breaking the Reactive Chain

The Issue

import { createSignal } from 'solid-js';

const [items, setItems] = createSignal([1, 2, 3]);

// ❌ BROKEN: itemList is now static
const itemList = items();
itemList.push(4); // Mutates array but doesn't trigger reactivity

// Later...
setItems([...items(), 5]); // Creates new array, but itemList still references old one

The Fix

import { createSignal, createMemo, For } from 'solid-js';

const [items, setItems] = createSignal([1, 2, 3]);

// ✅ FIXED: Keep reactivity alive with createMemo
const itemList = createMemo(() => items());

// In JSX:
export default function ItemList() {
  const [items, setItems] = createSignal([1, 2, 3]);

  return (
    <ul>
      <For each={items()}>
        {(item) => <li>{item}</li>}
      </For>
    </ul>
  );
}

// Or for derived lists:
const filteredItems = createMemo(() => 
  items().filter(item => item > 2)
);

Problem 5: Effects Not Re-running

The Issue

import { createSignal, createEffect } from 'solid-js';

const [search, setSearch] = createSignal('');
const [results, setResults] = createSignal([]);

// ❌ BROKEN: Effect doesn't re-run when search changes
createEffect(() => {
  // search() is read, but effect might not re-run due to batching
  const query = search();
  if (!query) return;

  fetchResults(query).then(setResults);
});

The Fix

import { createSignal, createEffect } from 'solid-js';

const [search, setSearch] = createSignal('');
const [results, setResults] = createSignal([]);

// ✅ FIXED: Explicitly track dependency
createEffect(() => {
  const query = search(); // Explicitly read at effect start

  if (!query) {
    setResults([]);
    return;
  }

  fetchResults(query).then(setResults);
});

// Or use createResource for async operations:
import { createResource } from 'solid-js';

const [data] = createResource(search, async (query) => {
  if (!query) return [];
  return fetchResults(query);
});

Essential Tips to Prevent Reactivity Breakage

1. Always Read Signals in Reactive Contexts

// ❌ Bad
const value = signal();
doSomething(value);

// ✅ Good
createEffect(() => {
  const value = signal();
  doSomething(value);
});

2. Use Updater Functions for State Updates

// ❌ Bad
setCount(count() + 1);

// ✅ Good
setCount(prev => prev + 1);

3. Leverage createMemo for Derived Values

// ✅ Best practice
const doubled = createMemo(() => count() * 2);
const filtered = createMemo(() => items().filter(x => x > 5));

4. Use createResource for Async Operations

// ✅ Handles loading, error, and data states
const [data] = createResource(id, fetchData);

5. Avoid Storing Signal Values in Variables

// ❌ Bad
const value = signal();
const stored = value(); // Now static

// ✅ Good
const stored = createMemo(() => signal());

6. Be Explicit About Dependencies

// ✅ Clear what triggers re-runs
createEffect(() => {
  const a = signalA();
  const b = signalB();
  console.log(a, b);
});

7. Use createEffect Cleanup for Side Effects

// ✅ Proper cleanup
createEffect(() => {
  const id = userId();
  const unsubscribe = subscribeToUser(id);
  return () => unsubscribe(); // Cleanup function
});

Conclusion

Solid.js reactivity is powerful but requires understanding how dependency tracking works. The key is keeping signal accesses within reactive contexts, using createMemo for derived values, and leveraging createEffect and createResource for side effects. By following these patterns and avoiding the common pitfalls outlined above, you'll build robust, responsive applications that maintain reactivity throughout their lifecycle.