Skip to content

Conversation

@EnthusiAD
Copy link

Description

This PR resolves critical "Hydration failed" errors that were causing the application to crash or behave inconsistently on initial load (especially for logged-in users). The issue was caused by accessing client-side APIs (window, localStorage, sessionStorage) directly during the server-side rendering (SSR) pass.

Changes

src/components/Header/Header.jsx

  • Refactor: Moved authentication checks (isAuth, isAdmin) and user data retrieval (getUserName, getAllGroups) into a useEffect hook to ensure they only run on the client.
  • State Management: Introduced local state initialized to safe default values (false/null) to ensure the initial server render matches the client render.

src/components/Footer/Footer.jsx

  • Refactor: Moved version retrieval logic from getSessionStorage into a useEffect hook.
  • Fix: Initialized version state as null to prevent hydration mismatches during the initial paint.

How to test

  1. Clean Setup: Clear LocalStorage (Application > Storage > Clear All) and refresh the page.
  2. Verify Login: Log in (or inject a valid token) to access the Dashboard.
  3. Check Console: Verify that the red "Hydration failed" or "Text content does not match server-rendered HTML" errors no longer appear in the browser console.
  4. Visual Check: Confirm that the Header user menu and Footer version number appear correctly after the page loads.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant