Search code examples
javascriptreactjsstyled-components

Why do styled-components keep old classes?

I recently tried to switch from Less to styled-components. It looks like a new class is appended in my document head every time a styled component is re-rendered.

So, for example, with this code :

const Loop = () => {
  const [opacity, setOpacity] = useState(100);
  useEffect(() => {
    const id = setInterval(() => setOpacity(opacity => opacity - 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <Test opacity={opacity} />;
};

const Test = styled.div`
  height: 40px;
  width: 40px;
  background: black;
  opacity: ${props => props.opacity / 100};
`;

render(<Loop />, document.getElementById("app"));

The css content keeps growing every second :

enter image description here

In my real project, I have big CSS classes that need to update frequently, and the web app needs to stay open for a long time in the browser, so this might be a deal-breaker. Am I doing something wrong or is this normal ? I couldn't find anything in the doc.

Solution

  • It's dynamic class generated from styled-components, and identical css string should generate the same class. (But different classes will be generated when reopening the app)

    That is, when the component is re-rendered again, classes should be reused for it, and no additional classes will be generated.

    In this example, 10 classes will be generated and reused.