💈 useFieldArray #768

bluebill1049 · 2020-01-04T01:43:29Z

New custom hook for FieldArray:

✨ useFieldArray

https://codesandbox.io/s/react-hook-form-usefieldarray-vy8fv

  const { fields, append, prepend, remove, move, swap, insert } = useFieldArray({
    control, // optional
    name: "test"
  });

latest beta version: 4.5.0-beta.2

building the hook
unit test
automation
- normal flow
- with default values
website documenation

codesandbox-ci · 2020-01-04T01:44:35Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cc58895:

Sandbox	Source
vigorous-wescoff-lfnpi	Configuration
React Hook Form - useFieldArray	PR

codesandbox-ci · 2020-01-04T01:44:35Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7acf6f1:

Sandbox	Source
zen-gagarin-hcvbt	Configuration
React Hook Form - useFieldArray	PR

bluebill1049 · 2020-01-04T01:48:00Z

Will add units and automation later as well

JeromeDeLeon

So far so good 👍

JeromeDeLeon · 2020-01-04T02:08:20Z

src/useFieldArray.ts

+    append,
+    remove,
+    update,
+    insert,


I think it should be named as insertAt because insert is more like a generic term for insertion of values. Same goes with update

I think insert is fine, less text to type as well. we have TS support the type as the argument :)

I see. Sounds good to me :) Thanks

JeromeDeLeon · 2020-01-04T02:10:44Z

src/useFieldArray.ts

+import * as React from 'react';
+import isUndefined from './utils/isUndefined';
+
+const id = () =>


we could also name this generateId instead

sounds good

JeromeDeLeon · 2020-01-04T02:20:55Z

src/useFieldArray.ts

+  };
+
+  const insert = (index: number, value: any) => {
+    setField([...fields.slice(0, index), value, ...fields.slice(index)]);


Is it better than using splice?

const newFields = [...fields]; newFields.splice(index, 0, value); setField(newFields);

or is it about fewer lines the better or referential integrity of the values?

I try to avoid splice cause it's a mutation, slice is always return new Array

JeromeDeLeon · 2020-01-04T02:38:26Z

src/useFieldArray.ts

+    setField(
+      isUndefined(index)
+        ? []
+        : [...fields.slice(0, index), ...fields.slice(index + 1)],


JeromeDeLeon · 2020-01-04T02:40:11Z

Sorry for pushing the splice. I just want to know why you prefer it over the other?

bluebill1049 · 2020-01-04T02:45:17Z

Sorry for pushing the splice. I just want to know why you prefer it over the other?

all good :) i try to use slice if i can most of the time

JeromeDeLeon · 2020-01-04T02:46:56Z

I thought it was better and all. Thanks for answering it up. :)

bluebill1049 · 2020-01-04T02:49:32Z

I thought it was better and all. Thanks for answering it up. :)

thank you for taking a review on it @JeromeDeLeon ❤️

JeromeDeLeon · 2020-01-04T02:50:14Z

You're welcome :)

JeromeDeLeon · 2020-01-04T02:53:44Z

Looks like we need to bump it up to 6.6kb. 😄

bluebill1049 · 2020-01-04T03:04:31Z

dame it 🤧

kotarella1110

Sorry for the late!
This looks good!

bluebill1049 · 2020-01-04T05:14:27Z

Sorry for the late!
This looks good!

thanks for taking a look @kotarella1110

kotarella1110 · 2020-01-04T05:59:15Z

Would you like to be able to set prepend and append defaultValue?

bluebill1049 · 2020-01-04T06:41:22Z

Would you like to be able to set prepend and apend defaultValue?

what do you mean @kotarella1110 ? are you refer to append(defaultValue)?

kotarella1110 · 2020-01-04T07:01:57Z

Appended field value is not set after append in your codesandbox.

Is there a way to set this?

bluebill1049 · 2020-01-04T07:03:50Z

Appended field value is not set after apend in your codesandbox.

Is there a way to set this?

oh it should work try this beta version: react-hook-form@4.5.0-beta.1

bluebill1049 · 2020-01-04T07:12:11Z

oops looks like it's not working @kotarella1110 good pick up!!

bluebill1049 · 2020-01-04T07:18:43Z

<Controller
  as={<input />}
  name={`test[${index}].name`}
  control={control}
  defaultValue={item.name}
/>

@kotarella1110 that should make it work for insert. I am working over update now

bluebill1049 · 2020-01-04T07:20:25Z

hmmm i don't think we need update because it's really setValue

bluebill1049 · 2020-01-13T12:02:45Z

Still appears to be not displaying for me. Have you hit the refresh in the codesandbox preview? I sometimes find the state 'lingers' :).

read my comment above, i have updated the comment.

simmo · 2020-01-13T12:03:13Z

oooooh 👀 just seen that if you hard reload my sandbox (I've added more test items to the array), the output from line 13 on DemoField.js renders a nested output (should it?), when you change the first array item (App.js - eg { name: "0" }, > { name: "a" }, sandbox reloads but output is no longer nested.

JeromeDeLeon

lgtm! Just a minor clarifications and all 👍 . Sorry, I haven't able to support this one until today. Thanks for those who tested it out. We avoided bugs before the final release. 😄

JeromeDeLeon · 2020-01-13T11:50:44Z

src/logic/isMatchFieldArrayName.ts

@@ -0,0 +1,2 @@
+export default (name: string, searchName: string) =>
+  name.startsWith(`${searchName}[`);


Is searchName not enough? I don't think anyone will use the name more than once.

test
testmyname

safer to make sure it's an array :)

JeromeDeLeon · 2020-01-13T11:51:37Z

src/useFieldArray.ts

+import isArray from './utils/isArray';
+import { FieldValues, UseFieldArrayProps, WithFieldId } from './types';
+
+export const appendId = <


Might as well move this to logic folder if that's good to you just for consistency 😉 .

JeromeDeLeon · 2020-01-13T11:53:29Z

src/useFieldArray.ts

+
+  const swap = (indexA: number, indexB: number) => {
+    resetFields();
+    [fields[indexA], fields[indexB]] = [fields[indexB], fields[indexA]];


👍 for using destructuring to swap values

JeromeDeLeon · 2020-01-13T12:00:57Z

src/useForm.ts

@@ -985,6 +994,12 @@ export function useForm<FormValues extends FieldValues = FieldValues>({
      defaultValuesRef.current = values;
    }

+    Object.values(resetFieldArrayFunctionRef.current).forEach(
+      resetFieldArray =>
+        isFunction(resetFieldArray) &&


Is it better than doing if-then statement?

save few bytes here hehehe

simmo · 2020-01-13T12:16:36Z

read my comment above, I have updated the comment.

Thanks @bluebill1049 my bad 😄

oooooh 👀 just seen that if you hard reload my sandbox (I've added more test items to the array), the output from line 13 on DemoField.js renders a nested output (should it?), when you change the first array item (App.js - eg { name: "0" }, > { name: "a" }, sandbox reloads but output is no longer nested.

I think this might be the cause of my undefined issue as the shape changes.

bluebill1049 · 2020-01-13T12:18:25Z

thanks a lot for the testing @simmo ❤️I will address @JeromeDeLeon's comments tmr morning. almost 12pm here now going to bed. catch you guys tmr. thank you all 🌙

thoughtassassin · 2020-01-13T14:59:10Z

Looks good to me. It took me a while to understand that the indices in the fields map function are unique even if two of the indices share the same name. I am about to upgrade my project to use 4.5.0-beta.9. I'll report any issues here if I see any.

thoughtassassin · 2020-01-13T17:24:49Z

I can't say for certain but I think useFieldArray is mutating my defaultValues. I'll try to post a codepen to see if I can replicate the behavior. I don't think seeing this earlier in beta.6. Also, when I pass in the defaultValues into useForm without useFieldArray I don't see the mutation.

Yeah it looks like something is very broken. When I pass an object like this to defaultValues in userForm:

  "userId": "52qsptmbzt7dxug4",
  "email": "dkrause@adobe.com",
  "firstName": "David",
  "lastName": "Krause",
  "mageId": "",
  "systemRole": "Admin",
  "envRoles": [
    {
      "envName": "dev",
      "envRole": "Admin"
    },
    {
      "envName": "prod",
      "envRole": "View Only"
    },
    {
      "envName": "Production",
      "envRole": "Admin"
    },
    {
      "envName": "stage",
      "envRole": "View Only"
    },
    {
      "envName": "stg",
      "envRole": "Contributor"
    }
  ]
}

When I getValues from that I get back:

{
  "firstName": "David",
  "lastName": "Krause",
  "email": "dkrause@adobe.com",
  "systemRole": "Admin"
}

My envRoles are completely gone. That wasn't happening before.

simmo · 2020-01-13T19:46:15Z

@thoughtassassin Sounds like you're having the same issue as me. Are you on beta 11?

bluebill1049 · 2020-01-13T20:55:14Z

I can't say for certain but I think useFieldArray is mutating my defaultValues. I'll try to post a codepen to see if I can replicate the behavior. I don't think seeing this earlier in beta.6. Also, when I pass in the defaultValues into useForm without useFieldArray I don't see the mutation.

Yeah it looks like something is very broken. When I pass an object like this to defaultValues in userForm:
  "userId": "52qsptmbzt7dxug4",
  "email": "dkrause@adobe.com",
  "firstName": "David",
  "lastName": "Krause",
  "mageId": "",
  "systemRole": "Admin",
  "envRoles": [
    {
      "envName": "dev",
      "envRole": "Admin"
    },
    {
      "envName": "prod",
      "envRole": "View Only"
    },
    {
      "envName": "Production",
      "envRole": "Admin"
    },
    {
      "envName": "stage",
      "envRole": "View Only"
    },
    {
      "envName": "stg",
      "envRole": "Contributor"
    }
  ]
}
When I getValues from that I get back:
{
  "firstName": "David",
  "lastName": "Krause",
  "email": "dkrause@adobe.com",
  "systemRole": "Admin"
}
My envRoles are completely gone. That wasn't happening before.

can you try the latest beta?

thoughtassassin · 2020-01-13T21:06:50Z

@bluebill1049 is the latest beta.11?

bluebill1049 · 2020-01-13T21:09:08Z

@bluebill1049 is the latest beta.11?

yes quite few iterations over issues

thoughtassassin · 2020-01-13T21:55:14Z

@bluebill1049 working on it now. I think there may be an issue in my code. I am trying to isolate and identify it now.

What I am seeing is that I have a few inputs in one component and I have my field array elements in another. The component without the field array gets the components but then they disappear from the field array. However, when I comment out the component without the field array elements, the field array elements show just fine.

In the component that I have the other elements I have a wrapper around that component. It uses useFormContext. I think when that element is being initialized it is wiping out everything else.

I'll see if I can create a codesandbox to see if I can duplicate the behavior outside of my project. That having been said, I don't think that I am doing anything unusual.

I wasn't seeing this on Friday with version 6 but I think I may have started seeing before I even switched to beta.9. I am currently on beta.11 and seeing this behavior.

bluebill1049 · 2020-01-13T22:01:45Z

@bluebill1049 working on it now. I think there may be an issue in my code. I am trying to isolate and identify it now.

What I am seeing is that I have a few inputs in one component and I have my field array elements in another. The component without the field array gets the components but then they disappear from the field array. However, when I comment out the component without the field array elements, the field array elements show just fine.

In the component that I have the other elements I have a wrapper around that component. It uses useFormContext. I think when that element is being initialized it is wiping out everything else.

I'll see if I can create a codesandbox to see if I can duplicate the behavior outside of my project. That having been said, I don't think that I am doing anything unusual.

I wasn't seeing this on Friday with version 6 but I think I may have started seeing before I even switched to beta.9. I am currently on beta.11 and seeing this behavior.

Thanks for the update. See if u can reproduce in a code sandbox. I will take a look at it.

bluebill1049 · 2020-01-13T23:00:40Z

are you using the same name for the input? @thoughtassassin

thoughtassassin · 2020-01-13T23:03:03Z

@bluebill1049 Okay. So I am not crazy. I can reproduce this issue without any of the other components in my codebase. If it looks like I am doing something wrong please tell me:

https://codesandbox.io/s/react-hook-form-usefieldarray-8f2nd

You'll notice that if you delete the NonArrayFields, ArrayFields shows. But if NonArrayFields is there ArrayFields are not rendered. This codepen is reproducing the issue that I am seeing exactly. I don't think I was seeing this Friday.

bluebill1049 · 2020-01-13T23:09:12Z

Thanks will take a look at it :)

bluebill1049 · 2020-01-14T01:31:06Z

beta10 is bad :( https://codesandbox.io/s/react-hook-form-usefieldarray-udu0s

thoughtassassin · 2020-01-14T02:01:20Z

@bluebill1049 That fixed it! Thank you.

bluebill1049 · 2020-01-14T02:11:24Z

Cool! Once I fixed code review’s feedback, we are ready then

bluebill1049 · 2020-01-14T02:48:38Z

@kotarella1110 let me know if you still have any more review comments. aim to merge this tonight.

bluebill1049 · 2020-01-14T03:37:00Z

Thanks everyone :) merged

bluebill1049 added 2 commits January 4, 2020 12:40

POC for useFieldArray

cc58895

clean up code

cb3d29a

bluebill1049 assigned kotarella1110 and JeromeDeLeon Jan 4, 2020

JeromeDeLeon reviewed Jan 4, 2020

View reviewed changes

update from code review

ec645a7

bluebill1049 added 2 commits January 4, 2020 15:17

adding unit tests

bf1239a

include use context API

9769801

bluebill1049 changed the title ~~POC for useFieldArray~~ useFieldArray Jan 4, 2020

update with more unit tests

1fbd0e1

kotarella1110 previously approved these changes Jan 4, 2020

View reviewed changes

JeromeDeLeon reviewed Jan 13, 2020

View reviewed changes

fix review comment

7acf6f1

bluebill1049 dismissed simmo’s stale review via 7acf6f1 January 14, 2020 02:46

kotarella1110 self-requested a review January 14, 2020 03:04

kotarella1110 approved these changes Jan 14, 2020

View reviewed changes

bluebill1049 merged commit a6cbd94 into master Jan 14, 2020

bluebill1049 deleted the useFieldArray branch January 14, 2020 10:16

simmo mentioned this pull request Jan 14, 2020

improve documentation on getValues()'s initial render return data #837

Closed

bluebill1049 added this to In progress in React Hook Form Jan 29, 2020

bluebill1049 moved this from In progress to Done in React Hook Form Jan 29, 2020

		@@ -0,0 +1,2 @@
		export default (name: string, searchName: string) =>
		name.startsWith(`${searchName}[`);

💈 useFieldArray #768

💈 useFieldArray #768

Conversation

bluebill1049 commented Jan 4, 2020 • edited

codesandbox-ci bot commented Jan 4, 2020

codesandbox-ci bot commented Jan 4, 2020 • edited

bluebill1049 commented Jan 4, 2020

JeromeDeLeon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JeromeDeLeon commented Jan 4, 2020

bluebill1049 commented Jan 4, 2020

JeromeDeLeon commented Jan 4, 2020

bluebill1049 commented Jan 4, 2020

JeromeDeLeon commented Jan 4, 2020

JeromeDeLeon commented Jan 4, 2020

bluebill1049 commented Jan 4, 2020 • edited

kotarella1110 left a comment

Choose a reason for hiding this comment

bluebill1049 commented Jan 4, 2020

kotarella1110 commented Jan 4, 2020 • edited

bluebill1049 commented Jan 4, 2020 • edited

kotarella1110 commented Jan 4, 2020 • edited

bluebill1049 commented Jan 4, 2020

bluebill1049 commented Jan 4, 2020

bluebill1049 commented Jan 4, 2020 • edited

bluebill1049 commented Jan 4, 2020 • edited

bluebill1049 commented Jan 13, 2020

simmo commented Jan 13, 2020

JeromeDeLeon left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JeromeDeLeon Jan 13, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simmo commented Jan 13, 2020 • edited

bluebill1049 commented Jan 13, 2020

thoughtassassin commented Jan 13, 2020

thoughtassassin commented Jan 13, 2020 • edited

simmo commented Jan 13, 2020

bluebill1049 commented Jan 13, 2020

thoughtassassin commented Jan 13, 2020

bluebill1049 commented Jan 13, 2020

thoughtassassin commented Jan 13, 2020

bluebill1049 commented Jan 13, 2020

bluebill1049 commented Jan 13, 2020

thoughtassassin commented Jan 13, 2020

bluebill1049 commented Jan 13, 2020

bluebill1049 commented Jan 14, 2020

thoughtassassin commented Jan 14, 2020

bluebill1049 commented Jan 14, 2020

bluebill1049 commented Jan 14, 2020

bluebill1049 commented Jan 14, 2020

bluebill1049 commented Jan 4, 2020 •

edited

codesandbox-ci bot commented Jan 4, 2020 •

edited

bluebill1049 commented Jan 4, 2020 •

edited

kotarella1110 commented Jan 4, 2020 •

edited

bluebill1049 commented Jan 4, 2020 •

edited

kotarella1110 commented Jan 4, 2020 •

edited

bluebill1049 commented Jan 4, 2020 •

edited

bluebill1049 commented Jan 4, 2020 •

edited

JeromeDeLeon left a comment •

edited

JeromeDeLeon Jan 13, 2020 •

edited

simmo commented Jan 13, 2020 •

edited

thoughtassassin commented Jan 13, 2020 •

edited