Fix continuous re-rendering in Auth wrapper components

[C1pt2r5]

Fix Auth Wrapper Rerendering Bug

PR Title

fix(auth): avoid unstable Zustand selector arrays in auth wrapper components. Closes #999

Summary

This PR fixes a rerender storm in frontend auth-aware components that used Zustand selectors returning new arrays, e.g.:

• useAuthStore(state => [state.isAuthenticated(), state.service.fetchUserAccess])
• usePluginConfigurationStore(state => [state.hydrate])

In React/Zustand, an array selector returns a fresh array each render, causing pointer inequality and repeated updates ([] !== []).

Now, each state value/function is selected separately via stable selector callbacks:

• useAuthStore(state => state.isAuthenticated())
• useAuthStore(state => state.service.fetchUserAccess)
• usePluginConfigurationStore(state => state.hydrate)

Problem

• Components were rerendering excessively due to unstable array references from selectors
• Every render created a new array object [], causing inequality checks to fail during React dependency tracking
• This triggered unnecessary useEffect runs and state subscription updates
• Performance degradation in auth-related UI interactions

Solution

Split array-returning selectors into individual stable selectors for each state property/method.

Affected Files

1. frontend/src/wrappers/AuthGuard.jsx
2. frontend/src/wrappers/IfAuthRedirectGuard.jsx
3. frontend/src/wrappers/withAuth.jsx
4. frontend/src/components/auth/Logout.jsx
5. frontend/src/components/common/form/TagSelectInput.jsx
6. frontend/src/hooks/useQuotaBadge.jsx

Changes Breakdown

AuthGuard.jsx

• Before: Array destructuring in single selector
• After: Separate individual selectors for loading and isAuthenticated

WithAuth.jsx

• Before: Array destructuring for fetchPluginsConf
• After: Direct selector for fetchPluginsConf function

Logout.jsx

• Before: [loading, logoutUser] array destructuring
• After: Separate selectors for each value

TagSelectInput.jsx

• Before: Single array selector for [loading, error, allTags, fetchAll, createTag]
• After: Individual selectors for each state property

useQuotaBadge.jsx

• Before: [access, fetchUserAccess] array destructuring
• After: Separate selectors for each property

IfAuthRedirectGuard.jsx

• Before: Array selectors for loading and isAuthenticated
• After: Individual selectors (already split)

Validation

✅ npm run build - Compiled successfully
✅ python -m ruff check . - All checks passed
✅ No breaking changes - Functional behavior unchanged
✅ Performance improvement - Reduced rerender cycles

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature
• Breaking change

Checklist for PR

• I have read and understood the contribution rules
• The pull request is for the branch develop
• Code passes Ruff linter (python -m ruff check .)
• Build succeeds (npm run build)
• No new external dependencies added
• Commit includes issue closure clause (Closes #999)
• (Not applicable) New plugin or documentation changes
• (Not applicable) Additional tests needed (refactor only, no API changes)

Related Issue

Closes #3403

Commit Message

fix(auth): avoid array selector rerenders in Zustand selectors. Closes #3403

How to Create the PR

1. Ensure you're on the develop branch:

   git checkout develop

2. Add the changed files:

   git add frontend/src/wrappers/AuthGuard.jsx \
            frontend/src/wrappers/IfAuthRedirectGuard.jsx \
            frontend/src/wrappers/withAuth.jsx \
            frontend/src/components/auth/Logout.jsx \
            frontend/src/components/common/form/TagSelectInput.jsx \
            frontend/src/hooks/useQuotaBadge.jsx

3. Commit with the issue closure clause:

   git commit -m "fix(auth): avoid array selector rerenders in Zustand selectors. Closes #3403"

4. Push to remote:

   git push origin develop

5. Open a Pull Request on GitHub with this description and title:

   • Title: fix(auth): avoid unstable Zustand selector arrays in auth wrapper components. Closes #3403
   • Description: Copy the content above

6. Wait for maintainer review and assignment as per project guidelines.