Contribution Number: 1
Student: Canbo Li
Issue: wso2/product-is#27947
Status: Phase IV complete
I chose issue #27947 "[React Doctor] prefer-useReducer" because it is a well scoped task with a clear definition of done. The issue is labeled "Good First Issue" and the maintainer assigned me after I commented on it asking to potentially work on it.
I'm interested in this because:
- The scope is clear, refactor components with 5+ useState calls to use useReducer
- The issue lists exactly which files are affected (258 total), so I always know what to work on
- It will help me learn React best practices around state management
- The fix pattern is consistent and repeatable across many files, which is good for building confidence
From reading the issue, I understand that React Doctor (a static analysis tool) flagged 258 components across the codebase that manage related state using multiple separate useState calls. React practice recommends consolidating related state into a single useReducer hook for clarity and maintainability.
Left a comment on the issue introducing myself and was assigned by the maintainer.
258 React components in the identity-apps codebase each have 5 or more separate useState calls managing state that is conceptually related. This triggers the react-doctor/prefer-useReducer lint warning and makes components harder to read and maintain.
Related state variables should be grouped into a single useReducer hook with a clearly defined reducer function and initial state object, making state transitions explicit and the component easier to reason about.
Components use multiple individual useState calls for related state, for example in pre-issue-access-token-action-config-form.tsx:
- isAuthenticationUpdateFormState
- authenticationType
- isSubmitting
- isHasRule
- rule
258 TypeScript/React (.tsx) files across the identity-apps frontend monorepo, primarily in the features/ directory across modules like admin.actions.v1, admin.applications.v1, and admin.connections.v1.
- Forked wso2/identity-apps on GitHub
- Cloned fork locally:
git clone https://github.com/canbo206/identity-apps.git - Installed pnpm 10+ via
sudo npm install -g pnpm@latest - Ran
pnpm installto install dependencies - Note: repo uses
masteras default branch, notmain
- Fork and clone https://github.com/wso2/identity-apps
- Open
features/admin.actions.v1/components/pre-issue-access-token-action-config-form.tsx - Navigate to line 93
- Observe 5 separate useState calls managing related form state:
isAuthenticationUpdateFormState,authenticationType,isSubmitting,isHasRule, andrule - These all relate to the same form and are updated together in multiple places, confirming the react-doctor/prefer-useReducer warning is valid
- Branch: https://github.com/canbo206/identity-apps/tree/fix-issue-27947
- My findings: Confirmed 5 useState calls at lines 93-97 of pre-issue-access-token-action-config-form.tsx, exactly as described in the issue
The root cause is that developers wrote state declarations as individual useState calls rather than grouping related state. Each affected component needs its state variables identified, grouped logically, and replaced with a useReducer pattern.
For each affected component, define a typed reducer function and initial state object, replace the individual useState calls with a single useReducer call, and update all setter references to use dispatch instead.
Using UMPIRE framework (adapted):
Understand:
The component PreIssueAccessTokenActionConfigForm manages 5 related pieces of state using separate useState calls: isAuthenticationUpdateFormState, authenticationType, isSubmitting, isHasRule, and rule. These all relate to the same form and are updated together in several places. There are 258 total affected files in the codebase.
Match:
The issue lists 258 affected files all following the same pattern. I will use pre-issue-access-token-action-config-form.tsx as my template and apply the same refactor pattern to a small batch of related files in admin.actions.v1.
Plan:
- Define FormStateInterface, FormActionInterface, and formReducer above the component
- Replace the 5 useState calls with
const [formState, dispatch] = useReducer(formReducer, initialState) - Replace all setter references e.g.
setIsSubmitting(true)withdispatch({ type: "SET_IS_SUBMITTING", payload: true }) - Verify no TypeScript errors and component still renders correctly
- Repeat for 4-5 more files from the issue's affected files list
Implement: https://github.com/canbo206/identity-apps/tree/fix-issue-27947
Review:
- Follows existing TypeScript patterns in the codebase (explicit types, no any)
- No new TypeScript errors introduced
- Checked CONTRIBUTING.md and CLAUDE.md for conventions
Evaluate:
- Run existing tests with
pnpm test - Confirm react-doctor warning no longer appears for refactored components
- Test case 1: Component renders correctly after useReducer refactor
- Test case 2: Form submission still triggers correct state transitions
- Test case 3: Authentication type change still updates state correctly
- Form submits successfully with refactored state management
- Form validation still works correctly after refactor
Confirmed 5 useState calls exist at lines 93-97 of pre-issue-access-token-action-config-form.tsx. Added useReducer pattern with typed interfaces. Planning to run pnpm test after completing all setter reference updates to verify no regressions.
Set up local development environment. Forked and cloned wso2/identity-apps. Had to install pnpm 10+ (repo requires >=10). Reproduced the issue by locating the first affected file and confirming the 5 useState calls. Created working branch fix-issue-27947.
Began Phase III implementation on pre-issue-access-token-action-config-form.tsx:
- Added FormStateInterface with all 5 state fields typed explicitly
- Added FormActionInterface as a union type for all dispatch actions
- Added formReducer function with typed state and action parameters
- Replaced 5 useState calls with a single useReducer hook
- Next step: update all setter references to use dispatch
- Files modified: features/admin.actions.v1/components/pre-issue-access-token-action-config-form.tsx
- Key commits: https://github.com/canbo206/identity-apps/tree/fix-issue-27947
- Approach decisions: Starting with one file to establish the pattern cleanly before applying it to more files from the issue's list
PR Link: wso2/identity-apps#10484
PR Description: Refactored PreIssueAccessTokenActionConfigForm to replace 5 separate useState calls with a single useReducer hook, as flagged by the react-doctor/prefer-useReducer lint rule. Improves state management clarity and
maintainability by grouping related form state into a single reducer.
Maintainer Feedback:
- June 29: Maintainer requested updates to PR title/description and asked to address CodeRabbit bot comments (nullable types, stray braces)
- June 29: Addressed all CodeRabbit comments - fixed nullable types for authenticationType and rule, removed stray double brace and extra trailing };
Status: Iterating
- Learned how to navigate and set up a large open source React/TypeScript monorepo
- Learned the difference between useState and useReducer and when each is appropriate
- Learned how to write typed reducer patterns following strict TypeScript conventions
- Initially cloned the wrong repository (product-is instead of identity-apps)
- Discovered the repo uses master not main as default branch
- Had to install pnpm 10+ as the repo requires it
- Read the issue more carefully upfront to identify which repo contains the affected files