HOC and formik loosing focus

Question

I created a bootstrap form input component in which if you submit an icon, it will change it as a HOC component. the input is validated by Formik

<InputUi
 placeholder="Digite su correo"
 name="email"
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 values={formik.values.email}
 touched={formik.touched.email}
 errors={formik.errors.email}
 autoComplete="on"/>

Component structure

<React.Fragment>
  <Wraper>
    {label && <Form.Label>{label}</Form.Label>}
    <Form.Control
      type={type}
      placeholder={placeholder}
      name={name}
      className={className}
      size={size}
      onChange={onChange}
      onBlur={onBlur}
      autoComplete={autoComplete}
      defaultValue={value}
      style={styleInput}
    />
  </Wraper>
  {touched && errors ? (
    <div className="w-100 error-message">{errors}</div>
  ) : null}
  {hint && <Form.Text muted>{hint}</Form.Text>}
</React.Fragment>

HOC - the issue is here, where for any reason formik lose the focus

const Wraper = ({ children }) => {
  return icon ? (<InputIconGroup children={children} />) : (<FormGroup children={children}/>)};

i wanna know alternatives to fix this without create two component to render an input if they have icon or not

Here the code to reproduce

Answer 1

You can memoize the wrapper component so it isn't remade every re-render. So in your InputUi.js file have:

import React, { useMemo } from "react";

...

const Wraper = useMemo(() => ({ children }) => {
    return icon ? (
      <InputIconGroup children={children} />
    ) : (
      <FormGroup children={children} />
    );
  }, [icon]);

This should fix the issue in the short term, but it'd be good if you did some investigating and learning into why it was happening and practices to avoid this kind of stuff, otherwise it'll most likely happen again