Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Rahulmishra1720 opened this issue Sep 15, 2024 · 1 comment
Open

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

Rahulmishra1720 opened this issue Sep 15, 2024 · 1 comment
Labels
bug needs triage

Comments

@Rahulmishra1720
Copy link

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
Copy link

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 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Rahulmishra1720 @kenshanta and others