Theme flickering
Answered
Mawhadmd posted this in #help-forum
MawhadmdOP
Why is there theme flickering whenever i refresh the page? I use useEffect and data-theme, but it's never occurred to me
Answered by joulev
because the script is run before hydration, it will cause mismatches that hydration is not expecting. [just put
suppressHydrationWarning in <html>](https://github.com/pacocoursey/next-themes#:~:text=Note!%20If%20you%20do%20not%20add%20suppressHydrationWarning%20to%20your%20%3Chtml%3E%20you%20will%20get%20warnings%20because%20next%2Dthemes%20updates%20that%20element.%20This%20property%20only%20applies%20one%20level%20deep%2C%20so%20it%20won't%20block%20hydration%20warnings%20on%20other%20elements.)5 Replies
@Mawhadmd Why is there theme flickering whenever i refresh the page? I use useEffect and data-theme, but it's never occurred to me
because useEffect is not run immediately, it is only run after hydration.
you need to use an inline <script> so that it is run immediately and doesn't have to wait for hydration.
or just use https://github.com/pacocoursey/next-themes which streamlines everything for you
you need to use an inline <script> so that it is run immediately and doesn't have to wait for hydration.
or just use https://github.com/pacocoursey/next-themes which streamlines everything for you
@joulev because useEffect is not run immediately, it is only run after hydration.
you need to use an inline <script> so that it is run immediately and doesn't have to wait for hydration.
or just use <https://github.com/pacocoursey/next-themes> which streamlines everything for you
MawhadmdOP
yeah and that's what causing me to freak out, when i first built the app i used useEffect and it worked impeccably, but now when i try to use the hook again it's flickering for some reason... Using the script caused hydration error too, i'm basically stuck
@Mawhadmd yeah and that's what causing me to freak out, when i first built the app i used useEffect and it worked impeccably, but now when i try to use the hook again it's flickering for some reason... Using the script caused hydration error too, i'm basically stuck
because the script is run before hydration, it will cause mismatches that hydration is not expecting. [just put
suppressHydrationWarning in <html>](https://github.com/pacocoursey/next-themes#:~:text=Note!%20If%20you%20do%20not%20add%20suppressHydrationWarning%20to%20your%20%3Chtml%3E%20you%20will%20get%20warnings%20because%20next%2Dthemes%20updates%20that%20element.%20This%20property%20only%20applies%20one%20level%20deep%2C%20so%20it%20won't%20block%20hydration%20warnings%20on%20other%20elements.)Answer
@joulev because the script is run before hydration, it will cause mismatches that hydration is not expecting. [just put `suppressHydrationWarning` in `<html>`](<https://github.com/pacocoursey/next-themes#:~:text=Note!%20If%20you%20do%20not%20add%20suppressHydrationWarning%20to%20your%20%3Chtml%3E%20you%20will%20get%20warnings%20because%20next%2Dthemes%20updates%20that%20element.%20This%20property%20only%20applies%20one%20level%20deep%2C%20so%20it%20won't%20block%20hydration%20warnings%20on%20other%20elements.>)
MawhadmdOP
will it cause any repercussions?
no, it is fine, this hydration mismatch is expected hence suppressing it is fine