Production Dark Mode is glitchy

[rayriffy]

Description

This application is mainly controlling Dark Mode in App component saving state into LocalStorage and sharing variables via AppContext

Looks like context is actually sent into sub-component (see logged result at image below) but style is never got updated when navigate to another page in production and I have no idea why.

Expectation

Reality

[SaltyAom]

Has this problem been solved yet?
I tried to run in dev environment and switch between light-dark mode frequently while navigate to other pages using sidebar menu but struggle to find the bug.
May be provide a "Step to Reproduce" is a good idea tho. =w=

[rayriffy]

This feature is work fine in dev btw. But by somehow it's not working for production build.

Video (https://youtu.be/dDN3fRGaOkc)

What we got now is Context properly sent in production

but like I said it doesn't change any component style.

Example

Took /g as an example

https://github.com/rayriffy/rayriffy-h/blob/master/src/pages/g/index.js

Context dark are being sent at line 58 and being logged at line 59 (you can see it on current production build)

Card color are being controlled at line 68

When switch on Dark Mode button it changed dark property from false to true then console are logged true. Then, try refreshing this page again you'll see that console still logged dark as true but style doesn't change with

[rayriffy]

The solution is here!

It seems everything in production is working fine but React did not update DOM on client-side
facebook/react#11128

Workaround this issue is to waiting everything is rendered first before mounting into client.
facebook/react#8017 (comment)

This issue will be closed and refactoring will be issued soon.