fix: hydration error on dashboard #3444
Conversation
When in dev mode and on a chain different than eth or sepolia every refresh display a “Hydration failed error”. It turns out that the governance module is being rendered on the server, where in the client it return null. This is caused by the use of useChainId hook which returns a default chain on the server, but on the client the actual chain the user is on. With the isLayoutReady check we make sure that this component actually only renders when ran on the client.
Branch preview✅ Deploy successful! |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
📦 Next.js Bundle Analysis for safe-wallet-webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
Coverage report
Show files with reduced coverage 🔻
Test suite run success1411 tests passing in 195 suites. Report generated by 🧪jest coverage report action from c30474d |
| const [isLayoutReady, setIsLayoutReady] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setIsLayoutReady(true) | ||
| }, []) | ||
|
|
||
| if (!isLayoutReady) { | ||
| return null | ||
| } | ||
|
|
There was a problem hiding this comment.
nit: Another way of doing this is using the dynamic import feature from nextjs. We might have to move the other component into a different file for this to work though.
const DynamicGovernanceSection = dynamic(() => import('./GovernanceSection'))
const GovernanceSectionWrapper = () => {
const chainId = useChainId()
if (!getSafeTokenAddress(chainId)) {
return null
}
return <DynamicGovernanceSection />
}
When in dev mode and on a chain different than eth or sepolia every refresh display a “Hydration failed error”. It turns out that the governance module is being rendered on the server, where in the client it return null. This is caused by the use of useChainId hook which returns a default chain on the server, but on the client the actual chain the user is on. With the isLayoutReady check we make sure that this component actually only renders when ran on the client.
What it solves
Hydration error in dev mode
How this PR fixes it
Prevents rendering of the component on the server
How to test it
In dev mode switch the chain to something other than mainnet and sepolia. When on the dashboard refresh - you shouldn't see a hydration error.
Screenshots
Checklist