Async validation debounce

This recipe implements debounced validation for a field. Thanks to reatom’s concurrency mechanism, each new validation call automatically cancels the previous one. The field waits 300ms before making an API request to check if a username is already taken.

import { reatomField, sleep, abortVar, wrap } from '@reatom/core'

const usernameField = reatomField('', {
  validate: async ({ state }) => {
    await wrap(sleep(300));
    const response = await wrap(fetch(`/api/usernames?username=${state}`));
    const { taken } = await wrap(response.json());
    if(taken) return 'This username already taken'
  }
}, 'usernameField')