Problem
The client code on pages like ModerationPage, UsersPage, and NewsletterPage violates the React Rules of Hooks. Hooks such as useState, useEffect, and useMemo are declared after conditional returns or called conditionally inside components. Additionally, there are severe console lint errors due to undefined global variables (like emailjs) and unused variable definitions.
Current Behavior
React throws warnings regarding conditional hook calls or ordering inconsistencies during development. The build and lint checks report multiple errors, blocking clean local validation and build flows.
Why This Improvement Is Needed
Adhering to the Rules of Hooks guarantees that state variables and side effects are consistently initialized in the same execution order on every render cycle. Eliminating styling or import errors improves code stability, rendering correctness, and prevents future build breaking bugs in CI/CD environments.
Proposed Solution
- Move all user permission checks and early returns (e.g.,
if (!role) return <Navigate />) after all hook declarations (useState, useEffect, useMemo) in ModerationPage.jsx, UsersPage.jsx, and NewsletterPage.jsx.
- Declare
emailjs as a global variable in Contact.jsx via ESLint inline annotations (/* global emailjs */) or configure it properly.
- Clean up unused styling rules, imports, or dead variables across context components.
Expected Outcome
- The project runs clean without any console errors or react-hooks warnings.
- Frontend builds successfully.
Additional Notes
None.
Problem
The client code on pages like
ModerationPage,UsersPage, andNewsletterPageviolates the React Rules of Hooks. Hooks such asuseState,useEffect, anduseMemoare declared after conditional returns or called conditionally inside components. Additionally, there are severe console lint errors due to undefined global variables (likeemailjs) and unused variable definitions.Current Behavior
React throws warnings regarding conditional hook calls or ordering inconsistencies during development. The build and lint checks report multiple errors, blocking clean local validation and build flows.
Why This Improvement Is Needed
Adhering to the Rules of Hooks guarantees that state variables and side effects are consistently initialized in the same execution order on every render cycle. Eliminating styling or import errors improves code stability, rendering correctness, and prevents future build breaking bugs in CI/CD environments.
Proposed Solution
if (!role) return <Navigate />) after all hook declarations (useState,useEffect,useMemo) inModerationPage.jsx,UsersPage.jsx, andNewsletterPage.jsx.emailjsas a global variable inContact.jsxvia ESLint inline annotations (/* global emailjs */) or configure it properly.Expected Outcome
Additional Notes
None.