Some component renders are very slow

Issue Type

• Bug (https://github.com/bootstrap-styled/v4/blob/master/.github/CONTRIBUTING.md#bug-reports)
• Feature (https://github.com/bootstrap-styled/v4/blob/master/.github/CONTRIBUTING.md#feature-requests)

Description

V4 styled components are causing the render time of my app to grow massivly. Running a profiler I see that Label and Button are the main culprits

Steps to reproduce

I don’t have a demo

• Create app
• Add a few rows/ columns with Button and labels in
• Load app while profiler is running

Note that the labels and buttons are rendering in the order of 2-3 seconds each!

Most other components are in the order of 10-20ms

return (
    <Row>
      <Col>
        <Form className="bg-light p-2">
          <Row>
            <FormColumnGroup>
              <Label htmlFor="startDistance">Target date</Label>
            </FormColumnGroup>
...
        <Button
            color="primary"
            className="text-light text-uppercase font-weight-bold"
            type="submit"
            disabled={!valid || error || submitting}
            onClick={(e) => {
              e.preventDefault();
              handleSubmit(userCriteria);
            }}
          >
            Create plan
          </Button>
        </Form>
      </Col>
    </Row>

Is this a known issue or am I doing something wrong?

Versions

• Node/NPM: 12.16.3
• OS: OS X 10.15.4
• v4: 3.4.0

[Designer023]

@kopax Sure thing. Thank you for the quick reply. I will create a quick demo with the same setup to show you.

I would be happy to help migrate components to hooks if I can do so myself and contribute 👍

[kopax]

Hi @Designer023 I understand no worries, this should be done after all of our current obligation of course.

Regarding your linting error, I have not seen any. Can you please post a reproduction so I can have the same error I might help you on that one.