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 #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

[lukehillonline]

+1 I would massively benefit from this right now

[davidroeca]

Why were our comments deleted? Is mentioning a competing library frowned upon here? This has been an open issue for nearly two years, and not every form library fits every use case. I have benefited from using formik and value the contributions made here, but silencing candid discussion in github issues concerns me quite a bit.

[johnrom]

controlled forms are a pretty bad idea at scale

I don't know about this. I think controlled forms are fine when they are performant. The issues is that v2 is not very performant due to an over-reliance on Context. You can see two methods we're debating over here: #2931 under /packages/@formik/reducer-refs/src/hooks/useFormik.ts and /packages/formik/src/Formik.ts:useFormik. We're also pondering one that uses useMutableSource for concurrent mode, though there is no prototype for that yet.

The argument for controlled forms is that you can modify the state of the form based on dependent fields and other methods of combining programmatic updates with user input, and track where those edits come from in a way that is traceable, replayable, etc. Think a zip field that autofills your city and state. There are performant ways to do this, which we are discussing with fervor for a v3 API above.

There's an argument for uncontrolled forms as well, but I don't think the argument should be that they're better, just that they're different and work better for some use cases and not others. Such is the case with the react-hook-form api and the formik api.

In terms of a useFieldArray, this is definitely how FieldArray will work, if a FieldArray component even makes sense after exposing the hook. I'd probably deprecated it in v3 and remove it in v4 after exposing the hook for use in your custom components.

[johnrom]

@davidroeca I don't personally condone the deletion of comments from open source communities. There has been a lot of off-topic chatter related to react-hook-form lately, seems people like it a lot! And there's no problem with that. As a contributor to Formik, there can definitely be some frustration around users who've recently switched deciding to add off-topic comments related to it, like

"hey, how do I do X in Formik?"
"idk just switched to react-hook-form and loving it" - someone not participating in current Formik discussion

I don't believe our Code of Conduct (the Contributor Covenant) clarifies what to do in this exact circumstance. I personally feel as though off-topic comments should be hidden if they don't contribute to conversation (with a reason, and NOT deleted!), but in the event that someone said something like "react-hook-form accomplishes it like X, and it works really well", it's quite easy to both show appreciation for another package (even a "competing library"!) and contribute to Formik's discussion simultaneously.

These are just my views and do not reflect those of the repository owner.

[johnrom]

If you want to see what the FieldArray API might look like over Formik v3, I have a prototype here:

https://github.com/jawnstreams/formik/pull/22/files

[davidroeca]

off-topic comments should be hidden if they don't contribute to conversation (with a reason, and NOT deleted!), but in the event that someone said something like "react-hook-form accomplishes it like X, and it works really well", it's quite easy to both show appreciation for another package (even a "competing library"!) and contribute to Formik's discussion simultaneously.

Seems like a more reasonable approach.

Looking forward to v3!

[brunormferreira]

some update?

[createdbymahmood]

any update on this ?

[johnrom]

I have a release candidate for v3 here which implements useFieldArray and uses it in FieldArray.

https://github.com/jaredpalmer/formik/pull/3231/files#diff-6e6b5046e39251f2d076677d7c80216dd3fe9311dff284336c2589646fe3efe0