Try to fix hydration error

Author: aleksandra.zagorska

src/analytics/contextual-cookie-consent.tsx

@@ -1,17 +1,18 @@
 import CookieConsent from 'react-cookie-consent'
 import { CookieConsentProps } from 'react-cookie-consent/dist/CookieConsent.props'
-import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 import { hasUserDecidedOnConsent } from './local-storage-constants'
 
 const CookieConsentContext = createContext({
   visibleByDefault: false,
-  setVisibleByDefault(visible: boolean) {},
+  setVisibleByDefault(visible: boolean) {
+  }
 })
 
-export const CookieConsentContextWrapper: React.FC<PropsWithChildren<{ visibleByDefault?: boolean }>> = function ({
-  children,
-  visibleByDefault,
-}) {
+export const CookieConsentContextWrapper: React.FC<PropsWithChildren<{ visibleByDefault?: boolean }>> = function({
+                                                                                                                   children,
+                                                                                                                   visibleByDefault
+                                                                                                                 }) {
   const [visible, setVisible] = useState(() =>
     typeof visibleByDefault == 'boolean' ? visibleByDefault : !hasUserDecidedOnConsent()
   )
@@ -27,7 +28,7 @@ class VisibleCookieConsent extends CookieConsent {
     super(props)
     this.state = {
       ...this.state,
-      visible: true,
+      visible: true
     }
   }
 }
@@ -37,9 +38,15 @@ export function useCookieConsentContext() {
 }
 
 export const ContextualCookieConsent: React.FC<Partial<CookieConsentProps>> = props => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   const configuration = useCookieConsentContext()
 
   const Component = configuration.visibleByDefault ? VisibleCookieConsent : CookieConsent
 
-  return <Component {...props} />
+  return isClient && <Component {...props} />
 }

src/layout/TopNavigation/Logo.tsx

@@ -8,11 +8,6 @@ import { Link } from 'gatsby'
 export const Logo: React.FC = () => {
   return (
     <Link to='/' className={styles.brand} aria-label='Go to home page' role={'navigation'}>
-      <StaticImage
-        alt={'Bright Inventions logo'}
-        className={classNames(styles.logo, styles.small)}
-        src='../../../static/images/b_logo_black.svg'
-      />
       <StaticImage
         alt={'Bright Inventions logo'}
         className={styles.logo}

src/pages/index.tsx

@@ -18,27 +18,16 @@ const BlockchainExperts = React.lazy(() => import('../components/home/Blockchain
 const HeroHeaderImages = React.lazy(() => import('../components/home/HeroHeaderImages'))
 
 export default () => {
-  const isSSR = typeof window === 'undefined'
-
   return (
     <Page className='page-index'>
       <Script type='text/javascript' src={'https://widget.clutch.co/static/js/widget.js'} async={true} />
       <Header />
       <Achievements />
-      {!isSSR && (
-        <React.Suspense fallback={<div />}>
-          <HeroHeaderImages />
-        </React.Suspense>
-      )}
+      <HeroHeaderImages />
       <TechnologyTags />
       <OurServices />
       <Ebook />
-      {!isSSR && (
-        <React.Suspense fallback={<div />}>
-          <BlockchainExperts />
-        </React.Suspense>
-      )}
-
+      <BlockchainExperts />
       <Projects isSelectedTag={false} />
       <Ratings />
       <PopularBlogPosts />