useFormikContext is throwing undefined when used along `withFormik`

🐛 Bug report

Current Behavior

const { values, submitForm } = useFormikContext();

Throws the following error

TypeError: Cannot destructure property 'values' of 'Object(...)(...)' as it is undefined.

Expected behavior

To get the values from Formik form

Your environment

Software	Version(s)
Formik	2.1.5
React	0.0.0-experimental-94c0244ba
Browser	Firefox
npm/Yarn	6.14.5
Operating System	MacOS

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:8 (1 by maintainers)

Top GitHub Comments

3reactions

johnromcommented, Nov 20, 2020

@varunrayen hopefully my explanation above helped solidify why we’ll continue to return undefined.

As explained above you can do this to fix your original issue. If using typescript you’ll probably have to do some extra finessing.

const { values, submitForm } = useFormikContext() ?? {};

3reactions

johnromcommented, Oct 5, 2020

It isn’t a common pattern because nothingness is meaningful. There are two different nothings in JavaScript, that is how meaningful nothingness is. Many backend libraries lean towards useful defaults and throwables for very good reasons. In the backend, if a variable you expect doesn’t exist, you are likely to throw. Nothingness is instead an instantiated value that is assigned to null.

Throwing is nice when you have a backend because you catch it in your logging and exceptional code is part of the ongoing iteration. Exceptions also help protect critical code from being reached with exceptional states.

On the client side, both of these patterns are a little less intuitive. Firstly, you don’t want to interrupt your user. One missed catch on the front-end might completely bork your frontend and make your site unusable. Many people do not have comprehensive client-side analytics set up, so they might not notice until a customer complained about their website not working. If Formik is the reason code is throwing all over the internet, we’ll never hear the end of it.

Second, in many languages the concept of nothingness is almost an afterthought. Null is a positive value meaning nothing, whereas undefined is the absence of anything. JavaScript is a nothingness-forward language because of its use in the browser, where variables you are looking for just may completely not exist, like the return value of useFormikContext without a context over it. In this case, undefined is the perfect value representing the state of Formik’s context.

Meaningful defaults can also be useful, and I agree with them, but they have to be meaningful and not a lie. A fake formik context isn’t meaningful to me, and it would make it more complicated to detect whether or not there is a context above. To me, it would be a lie.

Interestingly, the exact opposite issue exists on this repository, as well. Hopefully it shows that we walk a pretty balanced line with a lot of different perspectives (and yours is appreciated!) #2338

TL:dr; user wants check if useFormikContext returns undefined, and if so, do something else.