emotion-js/emotion

Inactive Page Styles Persisting in <head> with @emotion/styled

Rahulmishra1720 opened this issue · 1 comments

Rahulmishra1720 commented

Current behavior:

When using @emotion/styled in a React application, styles associated with inactive or unmounted components persist in the of the document. This results in an accumulation of unused styles, which can potentially bloat the page and affect performance.

To reproduce:

  1. Create a React component styled with @emotion/styled.
  2. Render the component in your application.
  3. Navigate away from the component or unmount it.
  4. Observe that the styles associated with the unmounted component remain in the of the document
    import React from 'react';
    import styled from '@emotion/styled';

const DynamicContent = styled.divcolor: blue; width: 200px; background-color: lightgrey; padding: 10px;;

const PageOne = () => (


This is Page One

);

const PageTwo = () => (


This is Page Two

);

const App = () => {
const [currentPage, setCurrentPage] = React.useState('PageOne');

return (
    <div>
        {currentPage === 'PageOne' ? <PageOne /> : <PageTwo />}
        <button onClick={() => setCurrentPage(currentPage === 'PageOne' ? 'PageTwo' : 'PageOne')}>
            Switch Page
        </button>
    </div>
);

};

export default App;

Expected behavior:

Styles associated with unmounted or inactive components should be automatically removed from the of the document to prevent unnecessary accumulation of styles.

kenshanta commented

You're leaving out some crucial information like removed from the ... of the document or components persist in the ... of the document
I suggest proofreading the content you got and making the issue clear and readable.
Thanks 🙏