React memoize props.children components

Question

I have a form component like this below, it's not Reactstrap, they're my own components.

<Form onSubmit={handleSubmit} className='with-bg'>
    <Row>
       <Col lg="12">
          <Form.Group>
              <Form.Label required text='Ad Soyad' />
              <Form.Input
                  onChange={(e) =>
                    setUser({...user, fullname: e.target.value})
                  }
                  required={true}
                  value={user.fullname}
                  type="text"
                  placeholder="Kullanıcının adı soyadını giriniz..."
               />
          </Form.Group>
       </Col>
    </Row>
    <Button
       color="danger"
       type="button"
       onClick={() => history.goBack()}
    >Geri <i className="fas fa-backward"></i></Button>
    <Button color="primary" disabled={loading}>
        Kaydet <i className={`fas fa-${loading ? "spinner fa-spin" : "save"}`}></i>
     </Button>
</Form>

I used React.memo for inputs and labels like:

const FormInput = React.memo(({ icon = '', smallText = '', ...otherProps }) => (
  <>
    <input {...otherProps} />
    {icon ? <i className={`fas fa-${icon} input-icon`}></i> : null}
    {smallText ? smallText : ''}
  </>
));

But on state change, component component and component they all render again because they have props.children , I do not know how can I prevent them to render again. I tried with useMemo yet what'll happen when I have dynamic and so many inputs? Or I wonder if the <Form.Input> component still renders again? When I look at React profiler it was not, yet Form.Group component renders? So when it renders, it's children (Form.Label and Form.Input) renders also right? How can i get best performance for this kind of page?

Answer 1

I have a form component like this below, it's not Reactstrap, they're my own components.

<Form onSubmit={handleSubmit} className='with-bg'>
    <Row>
       <Col lg="12">
          <Form.Group>
              <Form.Label required text='Ad Soyad' />
              <Form.Input
                  onChange={(e) =>
                    setUser({...user, fullname: e.target.value})
                  }
                  required={true}
                  value={user.fullname}
                  type="text"
                  placeholder="Kullanıcının adı soyadını giriniz..."
               />
          </Form.Group>
       </Col>
    </Row>
    <Button
       color="danger"
       type="button"
       onClick={() => history.goBack()}
    >Geri <i className="fas fa-backward"></i></Button>
    <Button color="primary" disabled={loading}>
        Kaydet <i className={`fas fa-${loading ? "spinner fa-spin" : "save"}`}></i>
     </Button>
</Form>

I used React.memo for inputs and labels like:

const FormInput = React.memo(({ icon = '', smallText = '', ...otherProps }) => (
  <>
    <input {...otherProps} />
    {icon ? <i className={`fas fa-${icon} input-icon`}></i> : null}
    {smallText ? smallText : ''}
  </>
));

But on state change, component component and component they all render again because they have props.children , I do not know how can I prevent them to render again. I tried with useMemo yet what'll happen when I have dynamic and so many inputs? Or I wonder if the <Form.Input> component still renders again? When I look at React profiler it was not, yet Form.Group component renders? So when it renders, it's children (Form.Label and Form.Input) renders also right? How can i get best performance for this kind of page?