TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published


    The missing React Hook to handle form initial values that depend on dynamic data from SWR, React Query, and more

    The Problem

    You use a data fetching libraries like useSWR() and useQuery() and want to set initialState dynamically after some data has been fetched.


    Suppose you have an index page and an edit page for some products.

    When you navigate to an edit page from /products to /products/:id/edit, ideally you want to write code like this and call it a day.

    const opts = { suspense: true }
    const { data: product } = useSWR(`/products/${id}`, opts)
    const [name, setName] = useState(
    // ...

    However, the above code does NOT work properly.

    If product name has changed and you have a stale cache, useSWR() will return stale data on first render and your state will not be updated after revalidation.

    Evne if you don't use suspense and split components into parent / child, you still have to handle the problem of staleness somehow. What to do?

    Related discussions of the problem

    The Solution

    Use useForm() to automatically handle updates to initialValue until user starts editing the value.

    const options = { suspense: true }
    const { data: product } = useSWR(`/products/${id}`, options)
    const [name, setState] = useForm(
    // or even without suspense you can write almost exactly the same
    const { data: product } = useSWR(`/products/${id}`)
    const [name, setName] = useForm(product?.name ?? '')
    // ...

    How does it work?

    The simplified version of the hook is like this:

    function useForm(initialValue) {
      const [isChanged, setIsChanged] = useState(false)
      const [state, setState] = useState(undefined)
      return [
        isChanged ? state : initialValue,
        (state) => {

    In addition to the above, this library supports TypeScript, functional state updater pattern, and a reset function to revert back to initialState.

    import { useFormState } from 'react-hooks-use-form-state'
    const [state, setState, reset] = useFormState(dynamicData)
    setState((prevState) => nextValue)
    // For example, you can clear state on modal open
    const onModalOpen = { reset() }


    yarn add react-hooks-use-form-state
    npm install react-hooks-use-form-state


    npm i react-hooks-use-form-state

    DownloadsWeekly Downloads






    Unpacked Size

    15.8 kB

    Total Files


    Last publish


    • javascripter_