title: Formik + React-semantic-ui
body: <p>So this is my code:</p>
  
  <pre><code>// @flow
  import * as React from "react";
  import styled     from "styled-components";
  import {Meteor}   from "meteor/meteor";
  import {Form, Header, Dropdown, Message, Label, Select} from "semantic-ui-react";
  import {ImageUploadControl as ImageButton} from "../ImageUploadControl";
  
  import { withFormik, Field } from "formik";
  import Yup from "yup";
  
  import { translate, Trans } from 'react-i18next';
  import Images from "../../../../api/filesCollection";
  import {countryList} from "./molecules/country-list";
  
  const StyledForm = styled(Form)`
      display: ${props =&gt; props.display || 'flex'};
      flex-direction: column;
      flex-wrap: wrap;
      margin-bottom: 50px;
      width: 580px;
      padding: 20px;
      background: #eee;
      border-radius: 10px;
  `;
  const Row = styled.div`
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  `;
  const Error = styled.div`
      width: 100%;
      text-align: center;
      margin-top: -20px;
      color: white;
      padding: 10px;
  `;
  const Divider = styled.div`
    flex: ${props =&gt; props.flex || '1'};
  `;
  
  
  function addressInnerFormHOC(WrappedComponent) {
    return class Container extends React.Component {
          constructor(props){
              super(props);
              this.state = {
                  firstName: Meteor.user().profile.firstName,
                  lastName: Meteor.user().profile.lastName,
                  country: Meteor.user().address ? Meteor.user().address.country : '',
                  city: Meteor.user().address ? Meteor.user().address.city : '',
                  address: Meteor.user().address ? Meteor.user().address.address : '',
                  addressSubmitted: Meteor.user() ? Meteor.user().profile.addressSubmitted : false,
                  identitySubmitted: Meteor.user() ? Meteor.user().profile.identitySubmitted : '',
                  phoneSubmitted: Meteor.user() ? Meteor.user().profile.phoneSubmitted : '',
                  formErrors: {country: "", city: "", address: ""},
                  formValid: false,
                  showErrorMessage: false,
                  submitted: false,
                  file: []
              };
  
          }
  
          handle_file_upload = (e) =&gt; {
              e.preventDefault()
              const file = e.target.files[0];
              file['uploadId'] = e.target.id;
  
              console.log(file);
  
              const files = this.state.file;
              this.setState({file: [...files, file]});
          };
  
          render() {
            const props = {
              ...this.props,
              ...this.state,
              handle_on_select_country: this.handle_on_select_country,
              handle_file_upload: this.handle_file_upload
            }
  
            return &lt;WrappedComponent {...props} /&gt;;
          }
    }
  }
  
  class AddressInnerForm extends React.Component {
    render() {
      const {
          values,
          errors,
          touched,
          handleChange,
          handleSubmit,
          isSubmitting,
          countrySelected,
          setFieldTouched,
          setFieldValue,
          display,
          country,
          city,
          handle_file_upload,
          t
      } = this.props;
  
      return (
       &lt;StyledForm id="step2" display="flex" onSubmit={handleSubmit}&gt;
          {console.log('THIS', this)}
           &lt;Header as="h2"&gt;{t('address.You must verify your address')}&lt;/Header&gt;
               &lt;Row&gt;
                   &lt;Divider flex="9"&gt;
                          &lt;Label size="large" style={{flex: 1, width: "100%", background: "#eee", color: "black", fontWeight: "600"}}&gt;
                              {t('address.Country')}
                              &lt;Dropdown
                                  selection
                                  id="country"
                                name="country"
                                label="Request Type"
                                options={countryList}
                                value={values.country}
                                  error={!!errors.country}
                                onBlur={() =&gt; setFieldTouched("country", true)}
                                onChange={(e, {value}) =&gt; setFieldValue("country", value)}
                              /&gt;
                          &lt;/Label&gt;
                          {touched.country &amp;&amp; errors.country &amp;&amp; &lt;Error&gt;&lt;Label color="red" pointing style={{flex:1}}&gt;{errors.country}&lt;/Label&gt;&lt;/Error&gt;}
                   &lt;/Divider&gt;
                   &lt;Divider /&gt;
                   &lt;Divider flex="9"&gt;
                      &lt;Label size="large" style={{flex: 1, background: "#eee", color: "black", fontWeight: "600"}}&gt;
                          {t('address.City')}
                          &lt;Field
                              label={t('address.City')}
                              value={city}
                              name="city"
                              style={{marginTop: "5px"}}
                              onChange={handleChange}
                          /&gt;
                      &lt;/Label&gt;
                      {touched.city &amp;&amp; errors.city &amp;&amp; &lt;Error&gt;&lt;Label color="red" pointing style={{flex:1}}&gt;{errors.city}&lt;/Label&gt;&lt;/Error&gt;}
                  &lt;/Divider&gt;
              &lt;/Row&gt;
              &lt;Row&gt;
              &lt;Label size="large" style={{flex: 1, background: "#eee", color: "black", fontWeight: "600"}}&gt;
                  {t('address.Address')}
                  &lt;Field
                      label={t('address.Address')}
                      value={values.address}
                      name="address"
                      style={{marginTop: "5px"}}
                      onChange={handleChange}
                  /&gt;
              &lt;/Label&gt;
              {touched.address &amp;&amp; errors.address &amp;&amp; &lt;Error&gt;&lt;Label color="red" pointing style={{flex:1}}&gt;{errors.address}&lt;/Label&gt;&lt;/Error&gt;}
              &lt;/Row&gt;
              &lt;Field name="country" value={country}/&gt;
              &lt;hr style={{borderColor: "#151414"}}/&gt;
                  &lt;Header as="h4"&gt;{t('address.Please attach legal documents confirming your address')}&lt;/Header&gt;
  
                  &lt;div style={{textAlign: "center", marginTop: "10px", marginBottom: "10px"}}&gt;
                      &lt;label as="label" htmlFor="adr"&gt;
                          &lt;Field
                              id="adr"
                              type="file"
                              name="file"
                              onChange={handle_file_upload}
                          /&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;label className="control-label"&gt;{t('address.Required photos')}&lt;/label&gt;
                  &lt;div className="form-group"&gt;
                      &lt;ol&gt;
                          &lt;li&gt;{t('address.Passport page / ID card side showing address of registration')}&lt;/li&gt;
                          &lt;li&gt;
                              {t('address.Additional document from the list as address confirmation')}
                              &lt;ul className="list-group"&gt;
                                  &lt;li className="list-group-item"&gt;{t('address.utility bills (gas, water, phone, etc)')}&lt;/li&gt;
                                  &lt;li className="list-group-item"&gt;{t('address.official bank statements')}&lt;/li&gt;
                                  &lt;li className="list-group-item"&gt;{t('address.tax authority letters or other official documents')}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;{t('address.Additional document must be not more than 6 months old')}&lt;/li&gt;
                      &lt;/ol&gt;
                      &lt;hr style={{borderColor: "#151414"}}/&gt;
                      &lt;label className="control-label"&gt;
                          {t('address.photos.Submitted photos must adhere to the following requirements')}
                      &lt;/label&gt;
                      &lt;ul className="list-group"&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.Photos must depict account owner')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.Resolution must be no less than 600x600 pixels')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.Photos must be crisp, not blurred')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.No part of your documents must be covered or obscured by fingers')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.All the data must be clearly visible')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.File size must not exceed 2 mb')}&lt;/li&gt;
                          &lt;li className="list-group-item"&gt;{t('address.photos.Accepted formats are JPEG, JPG, PNG, PDF')}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
           &lt;div style={{textAlign: 'center'}}&gt;
               &lt;Form.Button color="blue"&gt;
                   {t('interface.Next')}
               &lt;/Form.Button&gt;
           &lt;/div&gt;
       &lt;/StyledForm&gt;
      );
    }
  }
  
  const AddressForm = withFormik({
   mapPropsToValues({country, city, address, display, t}){
       return {
          city: city || Meteor.user() &amp;&amp;  Meteor.user().address ? Meteor.user().address.city : false,
          country: country || "ax",
          address: address || "",
          display: display || "flex",
          t: t || undefined
       }
   },
   validationSchema: (values) =&gt; {
       return Yup.object().shape({
          country: Yup.string()
              .required(values.t('validations.Should not be empty')),
          city: Yup.string()
              .required(values.t('validations.Should not be empty')),
          address: Yup.string()
              .required(values.t('validations.Should not be empty'))
       })
   },
   update_User(userDoc): void {
       const {
           address: {
              country,
              city,
              address
           }
       } = userDoc;
       Meteor.call("updateUser", Meteor.userId(), userDoc, (err,res) =&gt; {
       });
   },
   handleSubmit(values, {resetForm, setErrors, setSubmitting}) {
       console.log(values);
       let thirdStep = document.getElementById("step3");
       thirdStep.style.display ="flex";
       thirdStep.scrollIntoView();
       console.log('vvvvvvvvv');
       this.update_User({
           address: {
               country: values.country,
               city: values.city,
               address: values.address
           }
       });
   }
  })(AddressInnerForm);
  
  
  export const AddressVerificationFormTranslated = translate('common')(addressInnerFormHOC(AddressForm));
  </code></pre>
  
  <hr>
  
  <p>Everything is working. Dropdown values is being saved to Database. But the form is sooo laggy. It takes takes several seconds to change one symbol in input fields. And in the console any time I change some inputs (not the Dropdown) I can see lots of this messages:</p>
  
  <pre><code>DropdownItem modules.js?hash=eb4012bb908568d7083676c349a99fe3eceb0380:14627 
  DropdownItem modules.js?hash=eb4012bb908568d7083676c349a99fe3eceb0380:14627 
  ...
  </code></pre>
  
  <p>Help me please, guys! I am desperate!</p>