Solid.js Counter with LocalStorage - Solid-js Typing CST Test

Mode:

Duration:

Coding works best on desktop or with an external keyboard.

Solid.js Counter with LocalStorage — Solid-js Code

Persists counter value in localStorage using Solid.js signals.

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

function Counter() {
	const [count, setCount] = createSignal(0);
	const [isDark, setIsDark] = createSignal(false);

	onMount(() => {
		const savedCount = localStorage.getItem('count');
		if (savedCount) setCount(parseInt(savedCount, 10));
		const savedTheme = localStorage.getItem('isDark');
		if (savedTheme) setIsDark(savedTheme === 'true');
	});

	const updateAndSave = (newCount) => {
		setCount(newCount);
		localStorage.setItem('count', newCount);
	};

	return (
		<div class={isDark() ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {count()}</h2>
		<button onClick={() => updateAndSave(count() + 1)}>+</button>
		<button onClick={() => updateAndSave(count() - 1)}>-</button>
		<button onClick={() => updateAndSave(0)}>Reset</button>
		<button onClick={() => {
		setIsDark(!isDark());
		localStorage.setItem('isDark', !isDark());
		}}>Toggle Theme</button>
		</div>
	);
}

export default Counter;

Solid-js Language Guide

SolidJS is a fast, reactive JavaScript library for building user interfaces using fine-grained reactivity and a compile-time optimized rendering model. It emphasizes performance, predictable state updates, and minimal abstraction.

Primary Use Cases

▸High-performance web apps
▸Highly interactive dashboards
▸Dynamic UI widgets and embedded components
▸Single-page applications (SPAs)
▸Reactive data-driven interfaces

Notable Features

▸Fine-grained reactive system
▸JSX without VDOM diffing
▸Highly optimized compile-time output
▸Simple and predictable reactivity model
▸Small bundle size (~6-8 KB)

Origin & Creator

Created by Ryan Carniato and released publicly in 2020, inspired by Knockout, React, and fine-grained reactivity systems.

Industrial Note

SolidJS excels in high-performance UI applications, real-time dashboards, embedded widgets, and scenarios requiring extremely fast updates.

Quick Explain

▸SolidJS allows developers to build highly performant, reactive web applications using signals and fine-grained updates.
▸It uses JSX for declarative UI composition, similar to React.
▸Solid avoids a virtual DOM and instead compiles templates into optimized DOM instructions.

Core Features

▸Signals for state management
▸Effects and memos for reactive computations
▸JSX templating with compile-time compilation
▸Context API for dependency management
▸Solid Router for SPA navigation

Learning Path

▸Learn basic JavaScript + JSX
▸Understand signals and fine-grained reactivity
▸Build components and manage state
▸Learn routing, stores, global state
▸Build SSR apps using Solid Start

Practical Examples

▸Real-time stock dashboard
▸Counter app using signals
▸Chat app with live updates
▸Widget embedded in existing websites
▸Streaming SSR blog or e-commerce UI

Comparisons

▸Faster than React due to no VDOM
▸More predictable reactivity than Vue
▸More fine-grained than Svelte
▸Smaller runtime than Angular or React
▸Closer to Knockout or MobX in reactivity model

Strengths

▸Extremely high performance (beats React, Svelte, Vue in many benchmarks)
▸Predictable signal-based state updates
▸Simple mental model compared to frameworks with VDOM
▸Small bundle size and fast runtime
▸JSX familiarity for React developers

Limitations

▸Smaller ecosystem compared to React or Vue
▸Not ideal for huge enterprise apps requiring standardized patterns
▸Requires understanding of reactive primitives
▸Less community-provided tooling
▸SSR requires some learning for streaming approach

When NOT to Use

▸Enterprise apps needing mature tooling
▸Teams heavily invested in React ecosystem
▸Apps requiring many third-party integrations
▸Fully static sites better suited for Astro
▸Large organizations with strict framework guidelines

Cheat Sheet

▸createSignal() - core reactive primitive
▸createEffect() - runs on dependencies
▸createMemo() - memoized computation
▸<Show when={} fallback={}> - conditional rendering
▸Solid Router: <Route path='/'>

FAQ

▸Is Solid like React?
▸Yes, it uses JSX but avoids the VDOM.
▸Does Solid use a Virtual DOM?
▸No - it uses direct DOM updates.
▸Is Solid production ready?
▸Yes, used by many startups and projects.
▸Why is Solid so fast?
▸Fine-grained reactivity without diffing.
▸Does Solid support TypeScript?
▸Yes, first-class TypeScript support.

30-Day Skill Plan

▸Week 1: JSX, components, signals
▸Week 2: Effects, memos, derived state
▸Week 3: Routing + async data
▸Week 4: Stores + advanced reactivity
▸Week 5: SSR, hydration, and deployment

Final Summary

▸SolidJS is a fast, reactive UI library built on fine-grained reactivity.
▸It compiles JSX into highly optimized DOM operations.
▸Great for performance-critical UI and reactive interfaces.
▸Easy to learn for React users but more predictable.
▸Ideal for dashboards, widgets, and real-time applications.

Project Structure

▸src/ - main application code
▸src/components - reusable UI
▸src/routes - route-based files (if router used)
▸public/ - static assets
▸vite.config.js - build configuration

Monetization

▸High-performance SaaS dashboards
▸Embedded widgets
▸Real-time trading apps
▸Premium UI frameworks for Solid
▸Courses or consulting

Productivity Tips

▸Use signals instead of stores when possible
▸Leverage JSX compilation for performance
▸Use context sparingly
▸Keep effects pure and side-effect-only
▸Use Solid DevTools extension

Basic Concepts

▸Signals (`createSignal`)
▸Effects (`createEffect`)
▸Memos (`createMemo`)
▸Components using JSX
▸Stores for structured state

Official Docs

More Solid-js Typing Exercises

Solid.js Counter Component Solid.js Counter with Computed Parity Solid.js Counter with Signal Watch Solid.js Counter with Conditional Theme Solid.js Counter with Derived Style Solid.js Counter with Event Dispatcher Solid.js Counter with Input Binding Solid.js Counter with Slot Controls Solid.js Counter with onMount Hook

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Solid.js Counter with LocalStorage — Solid-js Code

Persists counter value in localStorage using Solid.js signals.

import { createSignal, onMount } from 'solid-js'; function Counter() { const [count, setCount] = createSignal(0); const [isDark, setIsDark] = createSignal(false); onMount(() => { const savedCount = localStorage.getItem('count'); if (savedCount) setCount(parseInt(savedCount, 10)); const savedTheme = localStorage.getItem('isDark'); if (savedTheme) setIsDark(savedTheme === 'true'); }); const updateAndSave = (newCount) => { setCount(newCount); localStorage.setItem('count', newCount); }; return ( <div class={isDark() ? 'dark-theme' : 'light-theme'}> <h2>Counter: {count()}</h2> <button onClick={() => updateAndSave(count() + 1)}>+</button> <button onClick={() => updateAndSave(count() - 1)}>-</button> <button onClick={() => updateAndSave(0)}>Reset</button> <button onClick={() => { setIsDark(!isDark()); localStorage.setItem('isDark', !isDark()); }}>Toggle Theme</button> </div> ); } export default Counter;

Solid-js Language Guide

Primary Use Cases

▸High-performance web apps
▸Highly interactive dashboards
▸Dynamic UI widgets and embedded components
▸Single-page applications (SPAs)
▸Reactive data-driven interfaces

Notable Features

▸Fine-grained reactive system
▸JSX without VDOM diffing
▸Highly optimized compile-time output
▸Simple and predictable reactivity model
▸Small bundle size (~6-8 KB)

Origin & Creator

Created by Ryan Carniato and released publicly in 2020, inspired by Knockout, React, and fine-grained reactivity systems.

Industrial Note

SolidJS excels in high-performance UI applications, real-time dashboards, embedded widgets, and scenarios requiring extremely fast updates.