Some component renders are very slow

[Designer023]

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

[kopax]

There's no such report. May I see the whole source and package.json ? I think we need an easy and reproducable demo.

I would be glad if you can help fix that. Most of those components needs to switch to react hook anyway.

[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 👍

[Designer023]

@kopax Here is a stripped down example:
https://github.com/Designer023/demo-styled-bsv4

The renders seem faster than my original app but are still in the order of 200-300ms each so it's still slow. If I can get to the bottom of it I'd be happy to help update any components where this is an issue or if I'm not implementing things correctly I'd like to help update docs to help others 👍

[kopax]

Thanks, I had a look, your code look clean. We had #157 which requires a TS developers if by any chances this is something you'll do.

200-300ms is a bit slow, I bet some rewrite and code profiling would help to trigger the root cause. Are you using lib (babel) or dist (rollup) ? Perhaps it's now the time to drop CJS and go with ESM modules imports (which was experimental at the time we wrote BS)

For what concerns me I sometimes try to help people get going with the lib, update some core libs, but I do not plan to maintain. If you are intereted to help to maintain and improve the work already done, I am sending an invite now so you can improve/maintain what you want in the bootstrap-styled namespace fluently.

Don't forget to read contribution guideline and commit messages guidelines. We generally use dev and merge into master

[kopax]

Hi @Designer023 any update on this? Will you be interested to fix those perf issues?

[Designer023]

Hi I would be interested but I don't have much time at the moment. I did download the repository and take a look but when I ran it I got lots of ESLINT errors/warnings. I checked out the contribution guidelines but they don't have any instructions on the build, test and lint as far as I could tell. If there is a guide to that I'd be happy to follow it and contribute when I have any time 👍

Hopefully I can help out ASAP

[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.