Solid.js Cheat Sheet

# Vite template (recommended)
npm create vite@latest my-app -- --template solid-ts
 
# atau degit (lebih cepat)
npx degit solidjs/templates/ts my-app
cd my-app && npm

npm run dev

import { createSignal } from 'solid-js';
 
function Counter() {
  const [count, setCount] = createSignal(0);
 
  return (
    <button onClick={() =>

// Solid
const [count, setCount] = createSignal(0);
console.log(count());  // 0 (panggil sebagai function)
 
// React
const [count, setCount] = useState(

const [count, setCount] = createSignal(0);
 
// Set langsung
setCount(5);
 
// Dari nilai sebelumnya
setCount(prev => prev + 1);
 
// Callback dengan return false = batalkan update

const [user, setUser] = createSignal({ name: 'Galih', age: 25 });
 
// Update properti tertentu
setUser(prev => ({ ...prev, age: 26 }));
 
// Array
const [

// Default: signal ngga trigger kalau nilai barunya sama (Object.is)
const [count, setCount] = createSignal(0);
setCount(0); // Tidak trigger re-render
 
// Disable equality check
const [obj, setObj] 

import { createSignal, createMemo } from 'solid-js';
 
function PriceCalculator() {
  const [price, setPrice] = createSignal(100);
  const [quantity, setQuantity] 

const first = createSignal(1);
const second = createSignal(2);
const sum = createMemo(() => first[0]() + second[0]());
 
// sum() = 3

import { createSignal, createEffect } from 'solid-js';
 
function Logger() {
  const [count, setCount] = createSignal(0);
 
  // Jalan saat count berubah
  createEffect(() => {
    console.

import { createEffect, onCleanup } from 'solid-js';
 
function Timer() {
  const [seconds, setSeconds] = createSignal(0);
 
  createEffect(() => {
    const

import { createRenderEffect } from 'solid-js';
 
createRenderEffect(() => {
  document.title = `Page ${currentPage()}`;
});

import { createEffect, on } from 'solid-js';
 
// Explicit dependencies
createEffect(on(count, () => {
  console.log('Count changed to:', count());
}));
 
// Defer: jangan jalan saat pertama kali
createEffect(on

import { JSX } from 'solid-js';
 
interface GreetingProps {
  name: string;
  age?: number;
}
 
function Greeting(props: GreetingProps):

// WRONG: destructuring props break reactivity di Solid
function Bad({ name }: { name: string }) {
  return <h1>{name}</h1>;
}
 
// RIGHT: akses langsung dari props
function

import { splitProps, mergeProps } from 'solid-js';
 
// splitProps: pisahkan props ke beberapa object
function Button(allProps) {
  const [buttonProps, rest] = splitProps(allProps, ['type', 

import { Show } from 'solid-js';
 
function App() {
  const [loggedIn, setLoggedIn] = createSignal(false);
 
  return (
    <Show
      when

import { For } from 'solid-js';
 
function TodoList() {
  const [todos, setTodos] = createSignal([
    { id: 1, text: 'Belajar Solid' },
    { id: 2, text: 

import { Index } from 'solid-js';
 
<Index each={items()}>
  {(item, index) => (
    <div>{index}: {item()}</div>
  )}
</Index

import { Switch, Match } from 'solid-js';
 
function StatusMessage(props) {
  return (
    <Switch fallback={<p>Unknown status</p>}>
      <Match when

import { ErrorBoundary } from 'solid-js';
 
function App() {
  return (
    <ErrorBoundary
      fallback={(err, reset) => (
        <div>
          <

import { Suspense } from 'solid-js';
import { lazy } from 'solid-js';
 
const LazyComponent = lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <

import { createContext, useContext } from 'solid-js';
 
// Bikin context
const ThemeContext = createContext<{ theme: string; toggle: () => void }>();

import { createResource } from 'solid-js';
 
// Fetcher function
async function fetchUser(id: number) {
  const res = await fetch(`/api/users/${id}`);

const [userId, setUserId] = createSignal(1);
const [user] = createResource(userId, fetchUser);
 
// userId berubah = refetch otomatis
<button onClick={() => setUserId(2

const [data, { refetch, mutate }] = createResource(fetchData);
 
// Refetch
refetch();
 
// Mutate: update data tanpa fetch
mutate({ ...data(), status: 'updated' });

const [users] = createResource(fetchUsers);
const [posts] = createResource(() => users()?.[0]?.id, fetchPosts);
 
// posts di-fetch setelah users selesai

import { createStore } from 'solid-js/store';
 
function App() {
  const [state, setState] = createStore({
    user: { name: 'Galih', settings: { dark: false } },

import { createStore, produce } from 'solid-js/store';
 
const [state, setState] = createStore({ items: [{ id: 1, qty: 1 }] });
 
// Mutate secara draft
setState(produce(s => {

import { onMount, onCleanup } from 'solid-js';
 
function Component() {
  // Setelah DOM pertama kali render
  onMount(() => {
    console.log('Mounted!');
    const observer = new IntersectionObserver(callback);

function Form() {
  const [value, setValue] = createSignal('');
 
  const handleSubmit = (e: Event) => {

// Controlled input
<input value={value()} onInput={e => setValue(e.currentTarget.value)} />
 
// bind: (Solid 1.8+)
<input bind:value={value} />

import { createSignal } from 'solid-js';
 
function Canvas() {
  let canvas: HTMLCanvasElement;
 
  // canvas langsung tersedia setelah render
  onMount(() => {
    const ctx = canvas.getContext(

src/routes/
  index.tsx        -> /
  about.tsx        -> /about
  users/
    index.tsx      -> /users
    [id].tsx       -> /users/:id

import { createRouteData } from 'solid-start';
 
export function routeData() {
  return createRouteData(async () => {
    const users = await fetch('https://api.example.com/users');