-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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.
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
Oddly Behaving Conditional Rendering on First Load #15993
Comments
Possibly related to #11023 and "React hydration"? |
After reading up about React Hydration I can confidently conclude that this is what is causing my woes.
I think the only solution for me is to render both my Desktop and Mobile versions of the components and control which is displayed in my css. |
@AllanPooley, I'm having the exact same issue. Have you learned anything new recently? I would prefer to not render both components. |
@mgrpowers unfortunately I ended up refactoring all of my code that used this logic in my own case. As mentioned earlier, there’s little that can be done to work around it because of the mechanism of React Hydration. Let me know if you discover otherwise |
Hi @AllanPooley, what approach do you use to handle refactoring your code? I'm encountering the same behaviour but no luck on trying in many ways :( |
Hey @dzuncoi, my refactor involved reverted to rendering both the mobile version and the desktop version of the component and hiding the inactive component using CSS media queries. |
Description
Hi gang, in many of my recent projects I've employed conditional rendering to render seperate mobile and desktop versions of a component.
The way I achieve this is by adding the following state / logic to my components:
I'm seeing some really funky results when I first load the page.
Expected result
My expected result is the specified component renders depending on the
window.innerWidth
, as seen in these screenshots:Mobile
Actual result
What's really bizarre is that only on the first load of the page, the conditional rendering logic is not applied, components render in their desktop forms which cause a whole lotta issues:
This is happening despite the variables used in the logic correctly evaluating (see console logs):
Though, after I hard refresh the page, everything is back to normal, working as intended.
Steps to reproduce
I'll try spin up better test environment within the next day, but for the time being I have the project I'm experiencing this issue on to share:
https://www.carbon8.org.au/
Additionally, here's an environment where added some console logs and replaced my own breakpoint logic with react-responsive:
https://deploy-preview-95--carbon8.netlify.com/
If you've got the Lighthouse Plugin an easy way to reproduce this (clear your cache, cookies, deregister) is just to run an audit:
Environment
The text was updated successfully, but these errors were encountered: