In the [previous](/article/2022/create-your-own-react-form-part-2) section, we looked at how `useForm` works. Here, we dive deep into the details on how to handle side effects based on form field value change.

## [#](#form-effect) <FormEffect />

There might be a situation where you want to do side effects when a form field's value change such as running validation on another field, resetting another field, etc.

The `FormEffect` component is a simple wrapper around a code snippet that will be called when a field's value change.

To use it along with `FormProvider`, you need to pass a `onFormValueChange` prop to the `FormProvider` component which needs to be a function of the following format:

```typescript

type FormValueChangeArgs = {
fieldName: string;
  prevValue: any;
  value: any;
  form: FormContextType;
};

const onFormValueChange = (args: FormValueChangeArgs) => void;

```

This function is internally linked to `FormEffect` with it's prop `onChange`.

Let's see how the implementation for `FormEffect` looks like:

```typescript

export const FormEffect = ({ onChange }: FormEffectProps) => {
  const form = useFormContext();
  const prevValues = usePrevious(form.values);

  useEffect(() => {
    if (prevValues) {
      for (const key in form.values) {
        const prevValue = prevValues![key];
        const currValue = form.values[key];
        if (!Object.is(prevValue, currValue)) {
          onChange({
            fieldName: key,
            value: currValue,
            prevValue: prevValue,
            form,
          });
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form.values]);

  return null;
};

```

So, the `FormEffect` does a comparison of previous and current values of the form and if they are different, it calls the `onChange` function to update form state.

### Another hook - usePrevious()

`usePrevious` can be used to refer to the state of form object prior to a change. It is implemented as shown below:

```typescript

import React, { useRef, useEffect } from "react";

export const usePrevious = (value: any) => {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

```

That's all there is to make `FormProvider` work.

Now, we can have a look at the example shown at the beginning of the series and try to relate everything:

```typescript

const SignUpForm = () => (
  <FormProvider
    validations={validations}
    validateOnChange
    initialValues={initialValues}
    onSubmit={onSubmit}
  >
    {({ values, handleSubmit, errors, touched }) => (
      <div>
        <FastField name="firstName" component={Input} />
        <FastField name="lastName" component={Input} />
        <button onClick={handleSubmit}>Submit</button>
      </div>
    )}
  </FormProvider>
);

```

Wondering what's `FastField`? Well, that's the last piece to the puzzle. We can use `FormProvider` along with any kind of components acting as fields but it is better to have consistency in our code. So, we can give one last nice touch to our implementation and use `FastField` instead of a standalone React component.

But why :running_man: **fast** :running_man: in `FastField`? Let's find out in the next section. :point_down:

## [#](#resources) Resources

:link: [react-context-perf-form - My React context form package implementation](https://github.com/MANOJPATRA1991/react-context-form)

:link: [react-context-perf-form - My React context form NPM package](https://www.npmjs.com/package/react-context-perf-form)

:link: [Online playground](https://stackblitz.com/edit/react-ts-zfghep?file=index.tsx)
