Skip to content

frontend: CreateNamespaceButton: fix react-hooks/set-state-in-effect by deriving validation state during render#6122

Open
Shahazadi-Shaguftha-Syed wants to merge 1 commit into
kubernetes-sigs:mainfrom
Shahazadi-Shaguftha-Syed:fix/create-namespace-button-set-state
Open

frontend: CreateNamespaceButton: fix react-hooks/set-state-in-effect by deriving validation state during render#6122
Shahazadi-Shaguftha-Syed wants to merge 1 commit into
kubernetes-sigs:mainfrom
Shahazadi-Shaguftha-Syed:fix/create-namespace-button-set-state

Conversation

@Shahazadi-Shaguftha-Syed

Copy link
Copy Markdown
Contributor

Summary

Fixes the react-hooks/set-state-in-effect violation in CreateNamespaceButton.tsx where validation state was set inside a useEffect on every namespaceName change. Validation is now derived directly during render instead.

Related Issue

Fixes #6120
Part of umbrella issue #5183

Changes

  • Removed the useEffect that called setIsValidNamespaceName and setNameHelperMessage on every namespaceName change
  • Derived isValidNamespaceFormat and formatHelperMessage directly during render
  • Kept namespaceExistsError as state since it's set asynchronously from the 409 error handler
  • Reset namespaceExistsError when the user edits the name field again

Steps to Test

  1. Open the Create Namespace dialog
  2. Type an invalid namespace name , error message should show immediately, no extra re-render
  3. Try creating a namespace that already exists, should show "already exists" error
  4. Edit the name again , error should clear and format validation should resume

Notes for the Reviewer

Behavior should be identical to before; this only changes how the validation state is computed (render-time derivation instead of effect-driven state).

@kubernetes-prow

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Shahazadi-Shaguftha-Syed
Once this PR has been reviewed and has the lgtm label, please assign illume for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubernetes-prow kubernetes-prow Bot requested review from kahirokunn and yolossn June 20, 2026 18:18
@kubernetes-prow kubernetes-prow Bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jun 20, 2026
@Shahazadi-Shaguftha-Syed

Copy link
Copy Markdown
Contributor Author

@illume This fixes the react-hooks/set-state-in-effect violation in CreateNamespaceButton.tsx (issue #6120, part of #5183). Validation state is now derived during render instead of via useEffect. Would appreciate a review when you get a chance!

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

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

frontend: CreateNamespaceButton: Fix react-hooks/set-state-in-effect ,validation state set inside useEffect

1 participant