Skip to content

content: Missing clean-up function in useEffect to remove event listener. #3648

Closed
@decipher-cs

Description

@decipher-cs

URL

https://ionicframework.com/docs/theming/dark-mode#css-class

Issue Description

The example in src/main.tsx for setting dark mode doesn't use a clean-up function inside the useEffect when adding event listener.

useEffect(() => {
    // Listen for changes to the prefers-color-scheme media query
    prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));
  }, []);

This would just continuously add listeners.

This would fix the issue.

useEffect(() => {
    // Listen for changes to the prefers-color-scheme media query
    prefersDark.addEventListener('change', funct);
    return ()=>{
      prefersDark.removeEventListener('change', funct);
    }
  }, []);

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions