Recommended Free Tools
Solid’s signals make state reactive without rerunning a component every time a value changes. In this hands-on guide, you’ll scaffold a SolidStart app, create signals and effects, render a list, and fetch data with createResource—including how to make a fetch run again when its source changes. The walkthrough follows Matthew Tyson’s Solid introduction for InfoWorld, published August 27, 2025.
Scaffold a SolidStart project
SolidStart is Solid’s official way to scaffold a new project, and the setup described in the InfoWorld walkthrough supports server-side rendering. Create a project from your terminal:
npm create solid@latestFollow the prompts to choose a project template, then move into the created project directory and start the development server:
cd your-project-name
npm run devReplace your-project-name with the directory created by the scaffold command. The walkthrough also presents a TypeScript template option; use the prompt or template command offered by the version of the scaffold you run.
#1 Best Overall
Create signals and update state
A signal pairs a getter with a setter. Call the getter to read its current value; call the setter to change it. Solid tracks signal reads made by reactive consumers such as JSX, then updates the parts of the interface that depend on the changed value.
const [count, setCount] = createSignal(0);In a component template, read the value by calling count(), not by treating count as a plain number:
<button onClick={() => setCount(count() + 1)}>
Count: {count()}
</button>The event handler reads the current count and passes the incremented value to the setter. The JSX expression is tracked, so when the signal changes Solid updates the displayed count.
Rank #2
Solid signals compared with React state
| Approach | State read | Update pattern | Practical distinction |
|---|---|---|---|
React useState |
Read the state variable returned by the hook. | Call its setter with the next value. | State is used within React’s component-rendering model. |
Solid createSignal |
Call the getter, such as count(). |
Call the setter, such as setCount(nextValue). |
Reactive reads identify the consumers that need updating; changing a signal does not require rerunning the whole component. |
Use effects for tracked work outside JSX
A Solid component function executes once when the component is created. JSX expressions that read signals remain reactive, but ordinary statements in the component body do not rerun just because a signal changes. Use createEffect when work outside the JSX template needs to respond to a tracked signal read.
createEffect(() => {
console.log(count());
});The effect reads count(), so Solid tracks that dependency and runs the effect again when the count changes. Use effects for reactive work that belongs outside the template; keep UI output in JSX expressions.
Fetch data with createResource
createResource turns an asynchronous fetch into a reactive resource. Pair it with Suspense to show pending UI and ErrorBoundary to provide fallback UI if rendering encounters an error.
const [items] = createResource(async () => {
const response = await fetch("/api/items");
if (!response.ok) throw new Error("Could not load items");
return response.json();
});Here, the fetcher returns the parsed response data, and a non-success response is raised as an error rather than treated as a successful result. The resource’s pending and failure cases can be handled around the part of the template that uses it:
<ErrorBoundary fallback={error => <p>Could not load items: {error.message}</p>}>
<Suspense fallback={<p>Loading items…</p>}>
<For each={items()}>
{item => <p>{item.name}</p>}
</For>
</Suspense>
</ErrorBoundary>This assumes each returned item has a name property. Adapt the URL and displayed fields to the API you are using.
Render iterable data with For
Solid’s <For> is its idiomatic control-flow component for rendering an iterable. It receives the collection through each and a function that describes how to render each item. It makes the repeated UI clear while keeping the collection’s reactive updates under Solid’s fine-grained model.
Rank #4
Refetch when a signal changes
To make a resource load new data when a value changes, pass a source signal as the first argument to createResource. Solid calls the fetcher with the source value and reruns it when that value changes.
const [query, setQuery] = createSignal("solid");
const [results] = createResource(query, async value => {
const response = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
if (!response.ok) throw new Error("Search failed");
return response.json();
});The source here is query; its current value is supplied to the fetcher as value. A control can update the source, which triggers the resource to fetch again:
<input
value={query()}
onInput={event => setQuery(event.currentTarget.value)}
/>Use the resource result in JSX as in the earlier example, with a Suspense fallback for pending UI and an ErrorBoundary fallback for errors. The important distinction is that the resource source establishes the dependency: you do not need to manually call the fetcher from an effect just to refetch when that source changes.
Choose the right rendering and scaffolding approach
Solid’s approach favors explicit reactive reads and targeted DOM updates. These choices affect how you write and inspect an app:
| Choice | When it fits | Trade-off |
|---|---|---|
createSignal rather than React useState |
When using Solid’s signal-based reactive model. | Remember to call the getter, such as count(), wherever the current value is needed. |
<For> rather than an ordinary map loop |
When rendering an iterable as Solid control flow. | The template uses Solid-specific syntax rather than only JavaScript array mapping. |
| Manual setup rather than AI-assisted scaffolding | When you want to control the project structure and generated code yourself. | AI assistance can produce a starting point quickly, but you still need to inspect the generated complexity and understand the Solid patterns it uses. |
The January 2025 State of JavaScript survey is reported in Tyson’s article as showing 90% developer satisfaction with Solid. Treat that as a survey finding, not a guarantee about an individual project’s fit.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
