Fix: useLocalStorage() called at module scope in App.tsx (React hooks violation)
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 条评论