search

bootstrap-styled / v4

:rocket: twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities
https://bootstrap-styled.github.io/v4
MIT License
116 stars 22 forks source link

Some component renders are very slow #211

Open Designer023 opened 4 years ago

Designer023 commented 4 years ago

Issue Type

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

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

Screenshot 2020-06-30 at 07 23 42 Screenshot 2020-06-30 at 07 24 12 
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

kopax commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

Designer023 commented 3 years ago

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 commented 3 years ago

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.