ITADN

Fix: useLocalStorage() called at module scope in App.tsx (React hooks violation)

#7526Opencoderabbitai[bot] 创建于 2026-03-29
good first issueno-issue-activitysecuritydependencies
## Summary `useLocalStorage()` is called at **module scope** in `src/App.tsx` (line 122), outside any React component or custom hook. This violates the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). This issue was identified as a pre-existing problem (predating PR #7522) during a code review of that PR. See the review comment: https://github.com/PalisadoesFoundation/talawa-admin/pull/7522#issuecomment-4150013680 --- ## Problem ```ts // src/App.tsx — line 4 import useLocalStorage from 'utils/useLocalstorage'; // ❌ Line 122 — module scope, OUTSIDE the App() component function const { setItem } = useLocalStorage(); // Inside App(): function App(): JSX.Element { // ... useEffect(() => { setItem('IsLoggedIn', 'TRUE'); setItem('id', auth.id); // ... }, [data, loading, setItem]); // setItem in dependency array } ``` Because `setItem` has a stable identity (module-level call), this does not currently cause re-render loops. However, if `useLocalStorage` is ever refactored to use React primitives (e.g., `useState`, `useRef`), this call will silently break at runtime with a hooks-order violation error. --- ## Proposed Fix Move the `useLocalStorage()` call **inside** the `App` component function body, where hook calls are valid: ```diff function App(): JSX.Element { + const { setItem } = useLocalStorage(); // ... useEffect(() => { setItem('IsLoggedIn', 'TRUE'); setItem('id', auth.id); setItem('name', auth.name); setItem('email', auth.emailAddress); setItem('role', auth.role); }, [data, loading, setItem]); ``` And remove the module-scope call: ```diff - // Line 122 (module scope) - const { setItem } = useLocalStorage(); ``` Alternatively, if `useLocalStorage` is purely a utility wrapper with no React primitives internally, it can be replaced with direct named imports of `getItem`/`setItem` from `utils/useLocalstorage` (as was done in `src/utils/apollo/subscriptions.ts` in PR #7522). --- ## Acceptance Criteria - [ ] `useLocalStorage()` is no longer called at module scope in `src/App.tsx`. - [ ] `setItem` is obtained inside the `App` component (or replaced with a non-hook utility). - [ ] Existing tests for `App.tsx` continue to pass. - [ ] `tsc --noEmit` passes with no new type errors. --- ## References - Identified in: https://github.com/PalisadoesFoundation/talawa-admin/pull/7522#issuecomment-4150013680 - Related PR: #7522 - Requested by: @palisadoes
6 条评论