Field value not updating in useEffect

[hassanrazakhalid]

Overview

I just started creating an app in shopify and using @shopify/react-form. When i try to update the field value in useEffect , useField doesn't update. I have shared a sample code.

Expected Behavior:
It should update the field value in useEffect hook.
...

Consuming repo

What repo were you working in when this issue occurred?

https://github.com/Shopify/quilt/blob/main/packages/react-form/README.md
...

Scope

• Is this issue related to a specific package?

  • Package: @shopify/react-form

---

Checklist

export default function AppConfiguration() {

    const fetch = useAuthenticatedFetch();

    const {fields, submit, submitting, dirty, reset, submitErrors, makeClean} =
    useForm({
      fields: {
        shipperId: useField({
          value: '',
          validates: [
            notEmpty('ShipperId is required'),
            // lengthMoreThan(3, 'Title must be more than 3 characters'),
          ],
        }),
        userName: useField({
            value: '',
            validates: [
                notEmpty('UserName is required')
            ]
        }),
        password: useField({
            value: '',
            validates: [
                notEmpty('Password is required')
            ]
        }),
      },
      
      async onSubmit(form) {
        console.log('Submit called');
        console.log(form.shipperId, form.userName, form.password);
        const remoteErrors = []; // your API call goes here
        if (remoteErrors.length > 0) {
          return {status: 'fail', errors: remoteErrors};
        }

        return {status: 'success'};
      },
    });


    useEffect(() => {

        const sendRequest = async () => {
            
            const response = await fetch('/api/shop/meta-fields');
            const jsonResponse = await response.json();
            const shipperIdServer = jsonResponse.find(x => x.key === 'ShipperId');
            if (!!shipperIdServer) {
                // not working
                 //fields.shipperId.value = shipperIdServer.value
            }
            const userNameServer = jsonResponse.find(x => x.key === 'Username');
            if (!!userNameServer) {
                // fields.userName.value = userNameServer.value 
            }
            const passwordServer = jsonResponse.find(x => x.key === 'Password');
            if (!!passwordServer) {
                // fields.password.value = passwordServer.value 
               
            }
        };
        sendRequest()
        // not updating
        fields.shipperId.value = "32323";
    }, [])

    //Works show update value in UI
    //fields.shipperId.value = "32323";
    
    return (
        <Page narrowWidth>
            <BlockStack gap="800">
                <h1 style={headingStyle}>App Configuration</h1>
                <Form onSubmit={submit} method="post">
                    <FormLayout>
                        {"Shipper Id is: "}
                        {JSON.stringify(fields)}
                        <TextField label="Shipper Id"
                            {...fields.shipperId}
                              />
                        {/* {(shipperId.touched && !!shipperId.error) && <InlineError message={shipperId.error} fieldID="shipperId" />} */}
                        <TextField label="UserName"
                            {...fields.userName} autoComplete="off" />
                        {/* {(userName.touched && !!userName.error) && <InlineError message={userName.error} fieldID="userName" />} */}
                        <TextField label="Password"
                            {...fields.password} autoComplete="off" />
                        {/* {(password.touched && !!password.error) && <InlineError message={password.error} fieldID="password" />} */}
                        <Button submit>Save</Button>
                    </FormLayout>
                </Form>
            </BlockStack>
        </Page>
    )
}