question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

universal rendering: hydration does not happen

See original GitHub issue

Describe the problem:

Flareact claims to support universal rendering (both ESR and CSR). However, code does not seem to ever run on the client after rehydration, and it does not seem possible to detect when you’re running client-side.

Link to a minimal reproduction:

import React from 'react'

export default function Index() {
 useEffect(()=>{ console.log('client effect') })
 return (
    <h1>
      should print something to console upon page load
    </h1>
  );
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
traffiscocommented, Feb 6, 2021

@jplhomer Well, that’s strange. Just tested on a fresh project and its working as expected. Tested with different flareact and react versions too… I had the same problem @wizzard0 had when useEffect wasn’t firing unless router is imported. Took me a while to find why some pages didn’t work. Don’t know what to make of this.

1reaction
jplhomercommented, Feb 6, 2021

Screen Shot 2021-02-06 at 11 23 58 AM

Screen Shot 2021-02-06 at 11 23 48 AM

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hydration and Server-side Rendering - somewhat abstract
Without server-side rendering, the root node that we are giving here is entirely empty. When the ReactDOM.render call occurs, ...
Read more >
react-hydration-error - Next.js
The first render is called Hydration which is a feature of React. This can cause the React tree to be out of sync...
Read more >
How To Solve Hydration Error In Next.js | by Westin Tang
Error: Hydration failed because the initial UI does not match what was rendered on the server. The reason for the error has been...
Read more >
Understanding Hydration in React applications(SSR)
Hydration is used only with server-side rendering (SSR). It is a process of rendering our components and attaching event handlers.
Read more >
React Pre-rendering and Potential Hydration Issue
Hydration is done because of performance reasons. With hydration React does not have to render the whole page again in order to make...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found