sync()

Synchronize state updates to the DOM.

Live Demo

Import

import { sync } from 'flexium/core'

Signature

// 1. Force Flush
function sync(): void

// 2. Sync Updates
function sync<T>(fn: () => T): T

Usage

Basic Usage

const [firstName] = use('John')
const [lastName] = use('Doe')
const [age] = use(25)

// Without sync: 3 separate updates
firstName.set('Jane')
lastName.set('Smith')
age.set(30)

// With sync: 1 combined update
sync(() => {
  firstName.set('Jane')
  lastName.set('Smith')
  age.set(30)
})

In Event Handlers

function UserForm() {
  const [name] = use('')
  const [email] = use('')
  const [errors] = use({})

  const handleSubmit = () => {
    sync(() => {
      name.set('')
      email.set('')
      errors.set({})
    })
  }

  return (
    <form onsubmit={handleSubmit}>
      {/* form fields */}
    </form>
  )
}

Reset Multiple States

const [items] = use([])
const [filter] = use('')
const [sortBy] = use('name')
const [page] = use(1)

function resetFilters() {
  sync(() => {
    filter.set('')
    sortBy.set('name')
    page.set(1)
  })
}

With Return Value

const result = sync(() => {
  count.set(prev => prev + 1)
  total.set(prev => prev + 100)
  return 'done'
})

console.log(result) // 'done'

Nested Syncs

sync(() => {
  a.set(1)

  sync(() => {
    b.set(2)
    c.set(3)
  })

  d.set(4)
})
// All updates happen together

Parameters

Parameter	Type	Description
fn	() => T	Function containing state updates

Returns

• The return value of the provided function

Behavior

• sync() (no args): Force flushes pending effects immediately
• sync(fn): Syncs updates inside fn, then flushes immediately
• Reading state inside sync returns the pending value

When to Use

Use sync() when:

• Updating multiple related states together
• Resetting form or filter states
• Handling events that modify multiple values
• Optimizing performance-critical updates
• Measuring DOM immediately after updates

Notes

• Event handlers in Flexium are automatically synced
• Async operations break out of the sync context
• Syncing is automatic within synchronous code blocks in many cases

See Also

• use()
• use()