Custom Primitives — SolidJS

Membangun custom reactive primitives yang reusable — kekuatan utama Solid. Custom Hook Pattern function createCounter(initial = 0) { const [count, setCount] =…

Membangun custom reactive primitives yang reusable — kekuatan utama Solid.

Custom Hook Pattern

function createCounter(initial = 0) {
  const [count, setCount] = createSignal(initial)

  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initial),
  }
}

// Penggunaan
function App() {
  const counter = createCounter(10)
  return <p>{counter.count()}</p>
}

createLocalStorage

function createLocalStorage(key, initial) {
  const stored = localStorage.getItem(key)
  const [value, setValue] = createSignal(
    stored ? JSON.parse(stored) : initial
  )

  createEffect(() => {
    localStorage.setItem(key, JSON.stringify(value()))
  })

  return [value, setValue]
}

Naming convention: prefix create untuk reactive primitives.

Yang akan kamu pelajari