Solid.js Counter with onMount Hook - Solid-js Typing CST Test
Loading…
Solid.js Counter with onMount Hook — Solid-js Code
Uses Solid.js onMount hook to log initial counter state.
import { createSignal, onMount } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
onMount(() => console.log('Mounted with count =', count()));
return (
<div>
<h2>Counter: {count()}</h2>
<button onClick={() => setCount(count() + 1)}>+</button>
<button onClick={() => setCount(count() - 1)}>-</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.
More Solid-js Typing Exercises
Solid.js Counter ComponentSolid.js Counter with LocalStorageSolid.js Counter with Computed ParitySolid.js Counter with Signal WatchSolid.js Counter with Conditional ThemeSolid.js Counter with Derived StyleSolid.js Counter with Event DispatcherSolid.js Counter with Input BindingSolid.js Counter with Slot Controls