Styled Components injects forwardRef in every component generating unecessary overhead

[arthurgeron]

Styled component injects forwardRef into every component, forwardRef adds an overhead and has considerably more impact on a Component's render time and JS thread time compared to a regular component, causing FPS drops, tha has been widely discussed here.

I'm wondering if the styled-components' team is aware of that and if it'd be of your interest if I were to open a PR proposing removing forwardRef from the default implementation, making it optional.

[jantimon]

the issue you linked is over 2 years old - is it still relevant?

[arthurgeron-work]

I'll run some profilings later today and post the results here

[arthurgeron-work]

@jantimon After doing some deeper digging I believe this is still relevant.. React's forwardRef uses Object.defineProperty internally, which has been reported as slower than other solutions many times in the past, even though devs assumed it to be "fixed" it still is definetely slower solution. Those extra MS can and will impact greatly for hundreds or thousands of styled elements being rendered at a given time on a screen, as well as slowing down first render times.

Speed of Object.defineProperty vs a straight setter can be seen on this example here.

[jantimon]

the code you mentioned is only active during development - or did I miss something?

did you do any benchmarks how much slower rendering 1000 forward ref vs 1000 normal components?

would be quite interesting to understand the real impact :)

did you see this one here?

styled-components/packages/styled-components/src/models/StyledComponent.ts

Line 294 in 86d4077

Object.defineProperty(WrappedStyledComponent, 'defaultProps', {

[arthurgeron-work]

Using a sample of 10k children
Regular Component:

Forward Ref Component:

Styled:

Those results are interesting, though not for the reason I imagined styled-components seems to add significant overhead time to render time to components. Nonetheless forwardRef does not have the impact as I thought, as you mentioned it did have the defineProperty isn't called inside forwadRef on production mode, but it is called inside styled components and could be one of the reasons for that impact on render time.

Devtools profiles: profiles.zip

Code used:

import React, { forwardRef, ReactNode } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

const array = new Array(10000).fill(0);

function Div({children}: {children: ReactNode} ) {
  return <div>{children}</div>
}

const FowardRef = forwardRef((props: {children: ReactNode}, ref) => <div>{props.children}</div>);

const Styled = styled.div``;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {array.map((_,index) => <Styled>Test line {index}</Styled>)}
      </header>
    </div>
  );
}

export default App;