[V2] useFormikContext doesn't return valitationSchema as expected

[ldicocco]

🐛 Bug report

The documentation says that the returned value from useFormikContext is the same as the formik props of connect, that includes validationSchema. Also the type definition asserts that useFormikContext return value includes validationSchema, but in effect it currently doesn`t.

Current Behavior

useFormikContext return value does`t includs validationSchema

Reproducible example

Iinclude the following test in the source code

import * as React from 'react';
import { render } from 'react-testing-library';
import { Formik } from '../src/Formik';
import { useFormikContext } from '../src/FormikContext';

describe('FormikContext', () => {
  describe('useFormikContext', () => {
    it('should return validationContext if set', () => {
      const validationSchema = 'validationSchema';

      const AComponenent: React.FC = () => {
        const formikContext = useFormikContext();
        expect(formikContext.validationSchema).toBe(validationSchema);
        return null;
      };

      render(
        <Formik
          initialValues={{ test: '' }}
          validationSchema={validationSchema}
          onSubmit={() => {}}
        >
          <AComponenent />
        </Formik>
      );
    });
  });
});

The test fails

Expected behavior

The test should pass.

Suggested solution(s)

PR #2090 fixes the issue

Your environment

Software	Version(s)
Formik	2.06
React	16,9,2
TypeScript	3.7.2
Browser	Firefox
Operating System	Windows 10

[egoreburial]

+1 Same is for connect() - not returning validationSchema too! It was important for me to mark required fields with hint, depending on schema - now i can't find any way to get it!

[Grandnainconnu]

+1 for connect() too, to put asterik on required fields

[kylemh]

@jaredpalmer it appears as though resolving this would give back a very simple workaround for #1241 and #712

Would you accept a PR on this, or is it all hands on v3 for now?

[raphaelpc]

Hello! Any news on this? Thanks!

[kevinolivar]

Hi there,

I connect my component but when checking for errors, it always returns an empty object. Same goes with useFormikContext.

const MySchema = Yup.object().shape({
 username: Yup.string().trim().required(`Cannot be left blank`),
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
    },
    validationSchema: MySchema,
    ...
  });
  
  return <Formik {...formik}>
    <Form>
      <MyComponent />
    </Form>
  </Formik>
}

const MyComponent = ({ formik: { errors }}) => {
  console.log('xxx', errors);
  return <input id="username" name="username" ..../>;
}
export default connect(MyComponent)

However, when I console.log(formik), it does return errors. Last but not least, when I type in a username and console log again formik, the errors still contain an error message regarding the username field...

Not sure what I am missing here...

Thanks any help!

"yup": "^0.32.9"
"formik": "^2.2.9",

[kevinolivar]

Actually my bad, I realized that I should not combine Formik and useFormik. Using Formik fixed that issue with empty error object.

[sudo-vaibhav]

Hi, any workarounds for this? I also need it to mark required fields with asterisk in custom form fields with formik

[bombillazo]

Any update or workaround for this issue? Our current setup does not allow for prop drilling.

[bombillazo]

Well, the Formik Docs say the context returns FormikProps which should include the validate and validationSchema props, but validate and validationSchema to are not passed to the ctx object created by the component:

formik/packages/formik/src/Formik.tsx

Lines 949 to 987 in e677bea

	const ctx = {
	...state,
	initialValues: initialValues.current,
	initialErrors: initialErrors.current,
	initialTouched: initialTouched.current,
	initialStatus: initialStatus.current,
	handleBlur,
	handleChange,
	handleReset,
	handleSubmit,
	resetForm,
	setErrors,
	setFormikState,
	setFieldTouched,
	setFieldValue,
	setFieldError,
	setStatus,
	setSubmitting,
	setTouched,
	setValues,
	submitForm,
	validateForm: validateFormWithHighPriority,
	validateField,
	isValid,
	dirty,
	unregisterField,
	registerField,
	getFieldProps,
	getFieldMeta,
	getFieldHelpers,
	validateOnBlur,
	validateOnChange,
	validateOnMount,
	};
	return ctx;
	}

Its a question of passing the props to the context object:

     validateOnChange, 
     validateOnMount, 
     validate: props.validate,
     validationSchema: props.validationSchema
   }; 
  
   return ctx; 
 } 

[johnrom]

This is resolved (I think) in the v3 PR #3231 using the separate hook useFormikConfig().

useFormikContext in the v3 PR is meant to be completely stable (it does not cause re-renders). The config itself like validate or validationSchema are often unmemoized, so in order to maintain stability in the Formik Context hook for optimization, we need to split these props out into a separate hook.

[bombillazo]

Oooh! Glad to know v3 is set to fix this. Do you know an ETA for v3?

[johnrom]

No clue; I opened the above PR, but I am not a maintainer.

[crhistianramirez]

Probably safe to say it won't be merged in given the PR was 2 years ago

[bombillazo]

Probably safe to say it won't be merged in given the PR was 2 years ago

I moved to React Hook Form

[crhistianramirez]

I did as well, very similar API and a lot more performant but I'm noticing they are missing the same feature, although it looks like there was discussion on it in the past month so that's promising. If you're interested in having them work on it you should upvote the post, along with the related issue. That seems to be the main way they prioritize work

[splurgebudget]

I'm getting re-render loops when using useFormikContext. Is the values prop not "stable"? I'm using values as the dependency for useEffect and it's getting triggered even though the values aren't changing.

[splurgebudget]

Never mind - as per usual, it was my own fault that had nothing to do with Formik. Carry on.