atomWithDefault

import { atomWithDefault } from 'jotai/utils'

function atomWithDefault<Value>(
  getDefault: (get: Getter, options: Options) => Value,
): WritableAtom<Value, [DefaultSetStateAction<Value>], void>

type DefaultSetStateAction<Value> =
  | Value
  | typeof RESET
  | ((prev: Value) => Value | typeof RESET)

import { atom, useAtom } from 'jotai'
import { atomWithDefault, RESET } from 'jotai/utils'

const baseAtom = atom(0)
const derivedAtom = atomWithDefault((get) => get(baseAtom) * 2)

function Component() {
  const [base, setBase] = useAtom(baseAtom)
  const [derived, setDerived] = useAtom(derivedAtom)

  return (
    <div>
      <p>Base: {base}</p>
      <p>Derived: {derived}</p>
      <button onClick={() => setBase((b) => b + 1)}>Increment Base</button>
      <button onClick={() => setDerived(100)}>Set Derived to 100</button>
      <button onClick={() => setDerived(RESET)}>Reset Derived</button>
    </div>
  )
}

import { atom } from 'jotai'
import { atomWithDefault, atomWithStorage, RESET } from 'jotai/utils'

// Server-provided default
const serverConfigAtom = atom(async () => {
  const response = await fetch('/api/config')
  return response.json()
})

// User preferences with server default
const userPreferencesAtom = atomWithDefault(
  async (get) => await get(serverConfigAtom)
)

function Settings() {
  const [preferences, setPreferences] = useAtom(userPreferencesAtom)

  const handleSave = () => {
    // Save custom preferences
    setPreferences({ theme: 'dark', language: 'en' })
  }

  const handleResetToDefault = () => {
    // Reset to server defaults
    setPreferences(RESET)
  }

  return (
    <div>
      <div>Theme: {preferences.theme}</div>
      <button onClick={handleSave}>Save Custom</button>
      <button onClick={handleResetToDefault}>Reset to Server Default</button>
    </div>
  )
}

import { atom } from 'jotai'
import { atomWithDefault, atomWithStorage, RESET } from 'jotai/utils'

// Remote configuration
const remoteConfigAtom = atom({ color: 'blue', size: 'medium' })

// Local override with remote default
const localConfigAtom = atomWithDefault(
  (get) => get(remoteConfigAtom)
)

function ConfigEditor() {
  const [remoteConfig] = useAtom(remoteConfigAtom)
  const [localConfig, setLocalConfig] = useAtom(localConfigAtom)

  return (
    <div>
      <p>Remote: {JSON.stringify(remoteConfig)}</p>
      <p>Local: {JSON.stringify(localConfig)}</p>
      
      <button onClick={() => setLocalConfig({ color: 'red', size: 'large' })}>
        Override
      </button>
      <button onClick={() => setLocalConfig(RESET)}>
        Reset to Remote
      </button>
    </div>
  )
}

import { atom } from 'jotai'
import { atomWithDefault, RESET } from 'jotai/utils'

const userNameAtom = atomWithStorage<string | null>('userName', null)
const defaultNameAtom = atom('Guest')

const displayNameAtom = atomWithDefault((get) => {
  return get(userNameAtom) ?? get(defaultNameAtom)
})

function UserDisplay() {
  const [displayName, setDisplayName] = useAtom(displayNameAtom)

  return (
    <div>
      <p>Hello, {displayName}!</p>
      <button onClick={() => setDisplayName('Alice')}>Set Name</button>
      <button onClick={() => setDisplayName(RESET)}>Reset</button>
    </div>
  )
}