Mutate by callback will cause IME composition bug

[kazukinagata]

Bug report

Description / Observed Behavior

I'm using mutate() with passing synchronous callback like below.
Inputing English is fine, but if I input Japanese IME, e.target.value get a bunch of duplicate characters.

function MyApp() {
  {data, mutate} = useSWR<{title: string}>('key', fetcher)
  
  const handleChange(e) => {
    e.persist()
    mutate((prev => ({...prev, title: e.target.value})), false)
  }

  return <input value={data.title} onChange={handleChange} />
}

Expected Behavior

When I input 'n' first, then 'a', the title will expected to be 'な' (Japanese).
However actual result is unstable, it may be like 'なな', 'nな', 'な' etc.

Additional Context

SWR version. @0.3.5

This bug may related to facebook/react#3926, caused by asynchronous onChange handler with IME input.

When I dig the source code, it seems that even if I pass a synchronous callback, that function is executed internally with await. https://github.com/vercel/swr/blob/master/src/use-swr.ts#L143

If I patch like below, I get a result as expected. However according to the #619, this seems to cause another bug.

data = _data(cache.get(key))
if (typeof data.then === 'function') {
  data = await data
}

[sergiodxa]

I recommend you to use keep a local copy of the state for the input in your component and use mutate when you want to actually save it. Remember SWR could revalidate your key in different scenarios, using it directly as the value of your input could cause an unexpected rollback if SWR revalidate the data.

[kazukinagata]

@sergiodxa Thank you for your comment. I read some blog posts like this https://paco.sh/blog/shared-hook-state-with-swr that shows how to share state using useSWR instead of useState.

I was happy that useSWR is an totally alternative to useState or redux, but isn't it recommended to use useSWR as an alternative to them?

[kazukinagata]

@sergiodxa As a result of research, I'm gonna try to managing local state by formik. Thank you!