jaredpalmer / formik-effect

Declarative component for managing side-effects in Formik forms. 580 bytes
https://npm.im/formik-effect
MIT License
166 stars 13 forks source link

Context API #3

Open audiolion opened 6 years ago

audiolion commented 6 years ago

Obviously React is getting a new Context API, but you have to support more than 16.3 with Formik so you won't be able to use it. I asked Dan Abramov on Twitter and he recommended using React Broadcast to polyfill it for older versions. What about adding this to formik-effect/formik instead of using the old context api? The primary reason is this:

const MyPureComponent extends React.PureComponent {
  render() {
    return this.props.children;
  }
}

const MyForm = (props) => (
  <Formik
      onSubmit={values => console.log(values)}
      initialValues={{ firstName: '', lastName: '', email: '' }}
      render={props =>
        <Form className="whatever">
          <MyPureCompoent>
            <Effect onChange={(currentFormikState, nextFormikState) => {
                 // This will never receive changes as PureComponent props never change
                 // and wont pass them down to their children
              }} 
            />
          </MyPureComponent>
          <Field name="firstName" placeholder="First Name" />
          <Field name="lastName" placeholder="Last Name" />
          <Field name="email" type="email" placeholder="Email Address" />
          <button type="submit">Submit</button>

        </Form>}
    />
);
jaredpalmer commented 6 years ago

Unfortunately moving to React 16.3 is going to be somewhat painful for Formik because it will introduce another component for each primitive....potentially breaking everyone's enzyme tests. I attempted this move a few weeks ago in a PR with create-react-context. The problem we are going to need to solve for is that Formik's context provider (<Formik>) is also a render prop. The current API does not allow that because the <Provider> it calls React.Children.only() if I recall.