Refs memberikan akses langsung ke elemen DOM. Directives menambahkan custom behavior.

Ref

function App() {
  let inputRef

  onMount(() => inputRef.focus())

  return <input ref={inputRef} />
}

Callback Ref

<input ref={el => {
  // el adalah DOM element
  setTimeout(() => el.focus(), 100)
}} />

Custom Directive (use:)

function clickOutside(el, accessor) {
  const handler = (e) => {
    if (!el.contains(e.target)) accessor()()
  }
  document.addEventListener("click", handler)
  onCleanup(() => document.removeEventListener("click", handler))
}

// Penggunaan
<div use:clickOutside={() => setOpen(false)}>Menu</div>