Rename useFormik (and maybe useFormikContext)

🚀 Feature request

Current Behavior

Currently, useFormik is an internal hook used to initialize Formik, and useFormikContext is the hook used to actually use Formik functionality in user code. The problem is, when a user wants to “use Formik”, they reasonably think, “duh, there’s a useFormik hook! how simple!”

What I’m hearing around the issues here, is that the intended solution is simply to not export useFormik, and nobody will need to worry about it. However, I think useFormik can be useful if someone wants to take the core formik functionality and use it in a different context. I propose instead renaming these hooks to be more semantic and developer-friendly.

Desired Behavior

We want a developer who is about to try and “use formik” to be able to see the useFormik hook and know they can depend on it, or at least not see a useFormik due to the internal hook being semantically named.

Suggested Solution

Rename the following hooks. These are suggestions which may not ultimately be what we settle on, but I think they move in the right direction.

useFormik: useFormikInitializer, useFormikCore, useFormikInternals, etc useFormikContext: useFormik

Alias: useFormikContext -> useFormik in case users have already started using this. Add a development time deprecation warning.

Alternate Suggestion

Let there not be a useFormik hook at all, using useFormikInternals (or whatever) and useFormikContext.

Who does this impact? Who is this for?

Developers who want to “use Formik”.

Describe alternatives you’ve considered

Answering dozens of questions about why useFormik doesn’t work in Github Issues, Discord.

Additional context

I think this will solve a lot of headaches from misunderstandings in the community, while allowing the flexibility to initialize Formik and use it in a different React.Context.

Examples of the misconception in action

Note: Some of these may be my misreading since I glanced quickly through them.

https://github.com/jaredpalmer/formik/issues/1719#issuecomment-516048064 https://github.com/jaredpalmer/formik/pull/1717 https://github.com/jaredpalmer/formik/issues/1667 https://github.com/jaredpalmer/formik/issues/1666 https://github.com/jaredpalmer/formik/issues/1582 https://github.com/jaredpalmer/formik/issues/1571 https://github.com/jaredpalmer/formik/issues/1548 https://github.com/jaredpalmer/formik/pull/1063#discussion_r286970337

[tgroshon]

I came here to say this. Big thumbs up 👍 👍 👍

[benneq]

@johnrom Thank you!

I do understand how hooks work. I was just kinda confused because of the sentence from the docs. I read “Formik” as “the library” and not as “the component”. Maybe the docs should use <Formik /> or “The Formik component” instead of the ambiguous “Formik”.

Of course I could have looked at the source code of the components and hooks, but that would have made the docs pointless 😼

I now use <Formik /> component everywhere, because reusable form components require Context. Now I can build simple and beautiful things like this:

const FormSubmitButton = (props) => {
    const formik = useFormikContext();

    return (
        <button type="submit" disabled={formik.isSubmitting} {...props} />
    );
};

👍