Formik: useFieldArray in 2.0

[slorber]

2.0 has useField, but does not have useFieldArray, which would be more convenient than the render prop helper

[slorber]

BTW, it would be convenient to be able to use a non-context-based way to retrieve the arrayHelper

const form = useFormik()
form.getArrayHelper("friends");

As with useFormik it's more likely we won't have a formik provider in the tree, see https://github.com/jaredpalmer/formik/issues/1477

[jaredpalmer]

Agree. Good idea

[RodolfoSilva]

Maybe:

const formikbag = useFormik()
formikbag.getFieldArrayHelper("friends");

[GoPro16]

Didn't see this issue get tagged with v2 or not. If its up for the next release I would love to try and help out here on this one.

[davidroeca]

V2 user here--would love to see useFieldArray work its way in. Also happy to help.

[Ericnr]

would love to see this too

[joshsalverda]

In the meantime, creating a custom hook really boosted performance compared to FieldArray for me (using immutability-helper and it's still a wip, but at least it's a start):

import {useField, useFormikContext} from 'formik'
import update from 'immutability-helper'

const useFieldArray = props => {
  const [field, meta] = useField(props)
  const {setFieldValue} = useFormikContext()

  const push = value => {
    const newFieldArray = update(field.value, {
      $push: [value]
    })
    setFieldValue(field.name, newFieldArray)
  }

  const swap = (indexA, indexB) => {
    // TODO
  }

  const move = (from, to) => {
    // TODO
  }

  const insert = (index, value) => {
    // TODO
  }

  const unshift = value => {
    const newFieldArray = update(field.value, {
      $unshift: [value]
    })
    setFieldValue(field.name, newFieldArray)
  }

  const remove = index => {
    const newFieldArray = update(field.value, {
      $splice: [[index, 1]]
    })
    setFieldValue(field.name, newFieldArray)
  }

  const pop = () => {
    // TODO
  }

  const replace = (index, value) => {
    // TODO
  }

  return [
    field,
    meta,
    {
      push,
      swap,
      move,
      insert,
      unshift,
      remove,
      pop,
      replace
    }
  ]
}

export {useFieldArray}

[alienfacepalm]

This is a great concept, did it ever get completed? I'd love to use this in my project. Thanks!

[joshsalverda]

Not sure if you're asking me (or maybe Jared for an official one?), but in case anyone wants it, my custom hook: https://gist.github.com/joshsalverda/d808d92f46a7085be062b2cbde978ae6

Sorry in advance if you're not already using immutability-helper...

I think it's 1-1 with what formik provides. Can likely be improved, but it seems to be working fine for my use cases and all my tests pass so I'm happy 😄Not too worried since once this is officially implemented I'll end up deleting it anyways.

Had to use a ref to store an extra array since field.value didn't seem to update fast enough in things like loops where you might be pushing a lot of values in. Not sure if there's a better way to handle that 🤷‍♂

[washingtonsoares]

Any updates on that?

[joshsalverda]

Just a note for anyone using my custom hook above: I discovered a pretty nasty bug that you may run into. If your array never changes then it's all good, but if it does change then you will run into it. Has to do with the ref I'm using, if field.value changes outside of the hook the ref won't get updated. There is probably a fix for it but I haven't had a chance to really dig into it too much yet.

Tried to look into implementing the hook inside formik directly but I'm not used to the typescript syntax, so not even sure where to start 😅

Edit: Updated the gist above with some code that should fix the syncing issue mentioned in this comment

[sayjeyhi]

Any updates?

[thadeu]

Just a need this also +1

[mdecurtins]

+1 This would be really helpful. I like to break up forms into sub-components, and the useFormikContext() hook is great for enabling this, but when I wrap some child components inside of a <FieldArray>, I would love to be able to have a useFieldArray() hook that is wired up to the right array specified by the name prop of <FieldArray>.

[sibelius]

another implementation https://gist.github.com/sibelius/1e89ed674332d412f2001c184a17701e

[mordechaim]

another implementation https://gist.github.com/sibelius/1e89ed674332d412f2001c184a17701e

It's important to memoize the functions and return value since eslint warns that they must be added to the useEffect dependencies and will run on each render