Code Examples | Justin/Notes

Click Increment in either preview to update both counters.

SolidJS

import { createSignal } from 'solid-js'

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

  return (
    <section>
      <button onClick={() => setCount((n) => n + 1)}>
        Increment ({count()})
      </button>
      <p>Current count: <span>{count()}</span></p>
    </section>
  )
}

Both count() bindings update directly. SolidJS does not call Counter() again.

Current count: 0

React

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <section>
      <button onClick={() => setCount((n) => n + 1)}>
        Increment ({count})
      </button>
      <p>Current count: <span>{count}</span></p>
    </section>
  )
}

React calls Counter() again and compares the result.