CODEWITHSUNDEEP
reactjsreact-hooksstyled-componentsreact-hook-form
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2366

React component flickers on first change in local state

For some reason my components flickers on first local state change (for instance if I toggle a checkbox or focus and blur the input field) I can't figure out what's causing the issue. I also experience this issue on other pages that have checkboxes/inputs. Also, my react-hook-form onChange validation only starts working only when I focus and blur at least once.

const MyAccount = ({ handleFormSubmit }) => {
  
  const [isNoSmartphoneChecked, setNoSmartphoneChecked] = useState(false)
  const [isPhoneNumberAnonymousChecked, setPhoneNumberAnonymousChecked] = useState(false)

  const {
    handleSubmit,
    register,
    errors,
    control,
    setValue,
    clearErrors,
    formState: { isSubmitting, touched },
  } = useForm<FormData>({
    defaultValues: {
      phoneNumber: null,
      noSmartphone: false,
      phoneNumberAnonymous: false,
      logoChanged: false,
    },
    mode: 'onChange',
  })

  const onSubmit = handleSubmit((values) => {
    // handleFormSubmit(values)
  })


  const handleToggleNoSmartphoneCheckbox = () => {
    setNoSmartphoneChecked(!isNoSmartphoneChecked)
    setValue('noSmartphone', !isNoSmartphoneChecked)
    clearErrors(['phoneNumber'])
  }
  const handleToggleAnonymousNumberCheckbox = () => {
    setPhoneNumberAnonymousChecked(!isPhoneNumberAnonymousChecked)
    setValue('phoneNumberAnonymous', !isPhoneNumberAnonymousChecked)
  }

  const isContinueButtonActive = (errors && !errors.phoneNumber && touched.phoneNumber) || isNoSmartphoneChecked

  return (
    <MyAccountWrapper>

      <UserInfo>
        <Form>
          <FormItem hasError={errors && !!errors.phoneNumber && !isNoSmartphoneChecked}>
            <Label>Your mobile phone number</Label>
            <Controller
              name="phoneNumber"
              control={control}
              rules={{ required: !isNoSmartphoneChecked }} //if noSmartphone isn't checked phone number required
              as={<PhoneInput placeholder={''} autoFormat={false} />}
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={isNoSmartphoneChecked}
              handleToggleCheckbox={handleToggleNoSmartphoneCheckbox}
              label="I do not have a smartphone (that works) "
              register={register}
              name="noSmartphone"
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={isPhoneNumberAnonymousChecked}
              handleToggleCheckbox={handleToggleAnonymousNumberCheckbox}
              label="I do not want to share my phone with my employer"
              register={register}
              name="phoneNumberAnonymous"
            />
          </FormItem>
        </Form>
        <ButtonWrapper>
          {isContinueButtonActive && !isSubmitting ? <ActiveBtn onClick={onSubmit} /> : <DisabledBtn />}
        </ButtonWrapper>
      </UserInfo>
    </MyAccountWrapper>
  )
}

export default MyAccount

enter image description here

Upvotes: 1

Views: 1677

Answers (1)

Oleksandr Fomin
Oleksandr Fomin

Reputation: 2366

Resolved by https://github.com/styled-components/styled-components/issues/2205#issuecomment-438844490

The issue was caused by using @font-face with createGlobalStyle. To fixed this issue for now I have moved my font import to css file.

@font-face {
  font-family: 'Muli';
  src: url('../fonts/Muli/Muli-Regular.ttf');
}

@font-face {
  font-family: 'MuliBold';
  src: url('../fonts/Muli/Muli-Bold.ttf');
}

Upvotes: 5

Related Questions