70163107

Date: 2021-11-30 01:11:43
Score: 6 🚩
Natty:
Report link

I needed to change this:

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

to this:

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });

Metarial UI useMediaQuery hooks render twice to React Component, do you have any solution for it?

According to docs, you can set this to false if you are not doing any server side rendering:

Options.noSsr (Boolean [optional]): Defaults to false. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to true if you are not doing server-side rendering.

Reasons:
  • Blacklisted phrase (0.5): I need
  • Blacklisted phrase (1.5): any solution
  • RegEx Blacklisted phrase (2): do you have any solution
  • RegEx Blacklisted phrase (1.5): do you have any
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Kristof Rado