Skip to content

Conversation

@Kardainn
Copy link

@Kardainn Kardainn commented Dec 13, 2025

this fix update the naming of two variable in the example code for the useMutation hook.

there is a shadowing of variable, variable and data :

  const [variables, setVariables] = React.useState<TVariables | undefined>()
  const [data, setData] = React.useState<TData | undefined>()

  const mutate = React.useCallback(
    async (variables: TVariables): Promise<TData | undefined> => { 
           ^^^^^^ here variables is shadowing the already attributed variable

this fix aim to follow the eslint rules - no shadow

Motive for change:
When I used the hook from the example examples/react/kitchen-sink-file-based, my linter flagged a no-shadow rule violation. I thought it would be better if the examples were more robust (and maybe easier to read / understand).

Summary by CodeRabbit

  • Refactor
    • Renamed returned mutation state properties:
      • React: variables → stateVariables, data → stateData
      • Solid: variables → signalVariables, data → signalData
    • Updated example apps and starter templates to use the renamed properties in mutation result rendering (login, signup, invoices, etc.). No functional behavior or mutation flow changes.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 13, 2025

Walkthrough

Renamed internal state identifiers and the public return properties of multiple useMutation hooks: React hooks now expose stateVariables/stateData; Solid hooks expose signalVariables/signalData. Updated all example and e2e consumers to use the new names. No functional or control-flow changes.

Changes

Cohort / File(s) Summary
React hooks (rename to state*)
e2e/react-start/basic-auth/src/hooks/useMutation.ts, examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx, examples/react/kitchen-sink/src/useMutation.tsx, examples/react/start-basic-auth/src/hooks/useMutation.ts, examples/react/start-supabase-basic/src/hooks/useMutation.ts
Renamed internal state and returned properties: variablesstateVariables, datastateData. Logic unchanged.
Solid hooks (rename to signal*)
e2e/solid-start/basic-auth/src/hooks/useMutation.ts, examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx, examples/solid/kitchen-sink/src/useMutation.tsx, examples/solid/start-basic-auth/src/hooks/useMutation.ts, examples/solid/start-supabase-basic/src/hooks/useMutation.ts
Renamed internal signals and returned properties: variablessignalVariables, datasignalData. Setters preserved; logic unchanged.
React consumers (use stateVariables/stateData)
e2e/react-start/basic-auth/src/components/Login.tsx, e2e/react-start/basic-auth/src/routes/signup.tsx, examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx, examples/react/kitchen-sink/src/main.tsx, examples/react/start-basic-auth/src/components/Login.tsx, examples/react/start-basic-auth/src/routes/signup.tsx, examples/react/start-supabase-basic/src/components/Login.tsx, examples/react/start-supabase-basic/src/routes/signup.tsx
Updated usages from variables/data to stateVariables/stateData. Rendering and conditional checks switched accordingly.
Solid consumers (use signalVariables()/signalData())
e2e/solid-start/basic-auth/src/components/Login.tsx, e2e/solid-start/basic-auth/src/routes/signup.tsx, examples/solid/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx, examples/solid/start-basic-auth/src/components/Login.tsx, examples/solid/start-basic-auth/src/routes/signup.tsx, examples/solid/start-supabase-basic/src/components/Login.tsx, examples/solid/start-supabase-basic/src/routes/signup.tsx
Updated usages from variables()/data() to signalVariables()/signalData(). Rendering and conditional checks switched accordingly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Areas to focus:
    • Hook TypeScript return types and exports for consistent renames.
    • All consumer updates (React property access vs Solid signal calls) to ensure no missed references.
    • Example/e2e UI render paths that read mutation results (message/error checks).

Possibly related PRs

Suggested labels

package: react-router, package: solid-start

Suggested reviewers

  • birkskyum
  • schiller-manuel

Poem

🐇 I hopped through code with nimble feet,
Swapped names so hooks and signals meet.
state and signal now parade,
Small tidy hops the changes made.
Carrots for tests — sweet! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The PR title accurately describes the main change: renaming state variables in the useMutation hook to fix ESLint's no-shadow rule violations.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Kardainn Kardainn changed the title fix: useMutation hook eslint no-shadow fix: useMutation example hook eslint no-shadow Dec 13, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

🧹 Nitpick comments (2)
e2e/solid-start/basic-auth/src/hooks/useMutation.ts (1)

8-10: Consider aligning setter names with the renamed signals (setSignalVariables / setSignalData).
Line 8 and Line 10 renamed the signals, but the setters are still setVariables / setData, which is a bit misleading during maintenance.

examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx (1)

15-30: Drop the unused setter arg in setData((prev) => data).
On Line 25, prev is unused—prefer setData(() => data) (or setData(data) if you don’t need the functional form).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85bf22e and d5e613d.

📒 Files selected for processing (10)
  • e2e/react-start/basic-auth/src/hooks/useMutation.ts (2 hunks)
  • e2e/solid-start/basic-auth/src/hooks/useMutation.ts (2 hunks)
  • examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx (2 hunks)
  • examples/react/kitchen-sink/src/useMutation.tsx (2 hunks)
  • examples/react/start-basic-auth/src/hooks/useMutation.ts (2 hunks)
  • examples/react/start-supabase-basic/src/hooks/useMutation.ts (2 hunks)
  • examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx (2 hunks)
  • examples/solid/kitchen-sink/src/useMutation.tsx (3 hunks)
  • examples/solid/start-basic-auth/src/hooks/useMutation.ts (2 hunks)
  • examples/solid/start-supabase-basic/src/hooks/useMutation.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript strict mode with extensive type safety for all code

Files:

  • examples/solid/start-basic-auth/src/hooks/useMutation.ts
  • examples/react/start-supabase-basic/src/hooks/useMutation.ts
  • examples/react/kitchen-sink/src/useMutation.tsx
  • examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx
  • examples/solid/start-supabase-basic/src/hooks/useMutation.ts
  • e2e/react-start/basic-auth/src/hooks/useMutation.ts
  • examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx
  • examples/solid/kitchen-sink/src/useMutation.tsx
  • examples/react/start-basic-auth/src/hooks/useMutation.ts
  • e2e/solid-start/basic-auth/src/hooks/useMutation.ts
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Implement ESLint rules for router best practices using the ESLint plugin router

Files:

  • examples/solid/start-basic-auth/src/hooks/useMutation.ts
  • examples/react/start-supabase-basic/src/hooks/useMutation.ts
  • examples/react/kitchen-sink/src/useMutation.tsx
  • examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx
  • examples/solid/start-supabase-basic/src/hooks/useMutation.ts
  • e2e/react-start/basic-auth/src/hooks/useMutation.ts
  • examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx
  • examples/solid/kitchen-sink/src/useMutation.tsx
  • examples/react/start-basic-auth/src/hooks/useMutation.ts
  • e2e/solid-start/basic-auth/src/hooks/useMutation.ts
🧬 Code graph analysis (4)
examples/solid/start-basic-auth/src/hooks/useMutation.ts (1)
examples/solid/kitchen-sink/src/useMutation.tsx (1)
  • error (44-46)
examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx (1)
examples/solid/kitchen-sink/src/useMutation.tsx (1)
  • error (44-46)
examples/solid/start-supabase-basic/src/hooks/useMutation.ts (1)
examples/solid/kitchen-sink/src/useMutation.tsx (1)
  • error (44-46)
e2e/solid-start/basic-auth/src/hooks/useMutation.ts (1)
examples/solid/kitchen-sink/src/useMutation.tsx (1)
  • error (44-46)
🔇 Additional comments (4)
examples/solid/kitchen-sink/src/useMutation.tsx (2)

8-10: LGTM! No-shadow fix correctly implemented.

The internal signal variables are properly renamed to signalVariables and signalData, eliminating the shadowing issue with the variables parameter in the mutate function (line 15).


37-49: Excellent! Backward compatibility maintained.

The getters preserve the public API by exposing variables and data properties while internally using the renamed signals. This approach eliminates the ESLint no-shadow violation without breaking existing consumers.

e2e/react-start/basic-auth/src/hooks/useMutation.ts (1)

8-10: No-shadow fix correctly implemented.

The state variables are properly renamed to eliminate shadowing. The public API now exposes stateVariables and stateData instead of variables and data.

Since this is an e2e test hook, verify that test files using this hook have been updated:

#!/bin/bash
# Search for usage in e2e test files that may expect the old API
rg -n --type=ts --type=tsx -C3 'useMutation' e2e/react-start/basic-auth/ | rg -C3 '\.variables|\.data'
examples/react/kitchen-sink-file-based/src/hooks/useMutation.tsx (1)

8-10: No-shadow fix correctly implemented. Design choice differs from Solid pattern.

The state variables are properly renamed to stateVariables and stateData, eliminating the shadowing issue. This is an intentional design difference from the Solid example: the React implementation directly exposes the renamed state properties, while the Solid implementation uses getters to maintain a variables/data API surface. Both approaches are valid for example code; the React approach is simpler while Solid's is more abstracted. The no-shadow refactoring itself is correct.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
e2e/react-start/basic-auth/src/routes/signup.tsx (1)

92-94: LGTM! Property renaming correctly applied.

The change from signupMutation.data to signupMutation.stateData correctly implements the no-shadow fix and is consistent across both references.

Optional type safety enhancement:

Consider adding optional chaining to line 94 for consistency and to satisfy strict TypeScript:

-            <div className="text-red-400">{signupMutation.stateData.message}</div>
+            <div className="text-red-400">{signupMutation.stateData?.message}</div>

While the logic ensures stateData exists when the condition on line 92 is truthy, TypeScript's type narrowing may not recognize this across the ternary operator, and the optional chaining makes the code more defensive.

As per coding guidelines, extensive type safety is recommended for TypeScript code.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d5e613d and b573623.

📒 Files selected for processing (15)
  • e2e/react-start/basic-auth/src/components/Login.tsx (1 hunks)
  • e2e/react-start/basic-auth/src/routes/signup.tsx (1 hunks)
  • e2e/solid-start/basic-auth/src/components/Login.tsx (1 hunks)
  • e2e/solid-start/basic-auth/src/routes/signup.tsx (1 hunks)
  • examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx (1 hunks)
  • examples/react/kitchen-sink/src/main.tsx (1 hunks)
  • examples/react/start-basic-auth/src/components/Login.tsx (1 hunks)
  • examples/react/start-basic-auth/src/routes/signup.tsx (1 hunks)
  • examples/react/start-supabase-basic/src/components/Login.tsx (1 hunks)
  • examples/react/start-supabase-basic/src/routes/signup.tsx (1 hunks)
  • examples/solid/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx (1 hunks)
  • examples/solid/start-basic-auth/src/components/Login.tsx (1 hunks)
  • examples/solid/start-basic-auth/src/routes/signup.tsx (1 hunks)
  • examples/solid/start-supabase-basic/src/components/Login.tsx (1 hunks)
  • examples/solid/start-supabase-basic/src/routes/signup.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript strict mode with extensive type safety for all code

Files:

  • examples/react/start-supabase-basic/src/components/Login.tsx
  • examples/react/start-basic-auth/src/routes/signup.tsx
  • e2e/solid-start/basic-auth/src/routes/signup.tsx
  • e2e/react-start/basic-auth/src/components/Login.tsx
  • examples/react/start-basic-auth/src/components/Login.tsx
  • examples/solid/start-basic-auth/src/routes/signup.tsx
  • examples/solid/start-supabase-basic/src/components/Login.tsx
  • examples/solid/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
  • examples/solid/start-supabase-basic/src/routes/signup.tsx
  • e2e/solid-start/basic-auth/src/components/Login.tsx
  • examples/react/kitchen-sink/src/main.tsx
  • examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
  • e2e/react-start/basic-auth/src/routes/signup.tsx
  • examples/solid/start-basic-auth/src/components/Login.tsx
  • examples/react/start-supabase-basic/src/routes/signup.tsx
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Implement ESLint rules for router best practices using the ESLint plugin router

Files:

  • examples/react/start-supabase-basic/src/components/Login.tsx
  • examples/react/start-basic-auth/src/routes/signup.tsx
  • e2e/solid-start/basic-auth/src/routes/signup.tsx
  • e2e/react-start/basic-auth/src/components/Login.tsx
  • examples/react/start-basic-auth/src/components/Login.tsx
  • examples/solid/start-basic-auth/src/routes/signup.tsx
  • examples/solid/start-supabase-basic/src/components/Login.tsx
  • examples/solid/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
  • examples/solid/start-supabase-basic/src/routes/signup.tsx
  • e2e/solid-start/basic-auth/src/components/Login.tsx
  • examples/react/kitchen-sink/src/main.tsx
  • examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
  • e2e/react-start/basic-auth/src/routes/signup.tsx
  • examples/solid/start-basic-auth/src/components/Login.tsx
  • examples/react/start-supabase-basic/src/routes/signup.tsx
🔇 Additional comments (12)
examples/react/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx (1)

108-120: Rename looks correct; just ensure the hook’s public API really is stateVariables.

This change is fine and preserves the conditional rendering logic, but it will break at runtime if useMutation still returns variables instead of stateVariables (or if both exist and stateVariables is not updated).

examples/react/kitchen-sink/src/main.tsx (1)

449-462: LGTM; verify ./useMutation returns stateVariables in this example package too.

The conditional is unchanged in intent and remains safe, but relies on the renamed field being present.

examples/solid/start-basic-auth/src/components/Login.tsx (1)

41-67: LGTM! Consistent API update across all references.

All three references to loginMutation.data() have been correctly updated to loginMutation.signalData(). The changes preserve the existing logic, maintain optional chaining, and align with the hook's API changes to fix ESLint no-shadow violations. The signalData naming is also more explicit for Solid.js's signal-based reactivity.

examples/solid/kitchen-sink-file-based/src/routes/dashboard.invoices.$invoiceId.tsx (1)

107-107: LGTM! Property accessor correctly updated.

The change from variables() to signalVariables() aligns with the PR's goal of eliminating variable shadowing in the useMutation hook. The naming convention is semantically appropriate for Solid's signal-based reactive primitives, and the comparison logic remains functionally identical.

examples/react/start-supabase-basic/src/components/Login.tsx (1)

41-45: LGTM! Consistent renaming eliminates variable shadowing.

All references to loginMutation.data have been correctly updated to loginMutation.stateData, eliminating the ESLint no-shadow violation. The conditional logic and property accessors remain unchanged.

e2e/solid-start/basic-auth/src/routes/signup.tsx (1)

92-94: LGTM! Consistent renaming for Solid signal pattern.

Both references to signupMutation.data() have been correctly updated to signupMutation.signalData(), maintaining the signal accessor pattern while eliminating the variable shadowing issue.

e2e/solid-start/basic-auth/src/components/Login.tsx (1)

41-44: LGTM! All signal data accessors correctly updated.

All three references to loginMutation.data() have been consistently updated to loginMutation.signalData(), following the Solid signal pattern and resolving the ESLint no-shadow violation.

examples/react/start-supabase-basic/src/routes/signup.tsx (1)

54-56: LGTM! The property renaming from data to stateData is consistent and correctly applied. The useMutation hook properly exports stateData, and all references have been updated across the codebase. The optional chaining on line 54 is appropriate, and line 56 safely accesses the property within the truthy branch.

examples/solid/start-supabase-basic/src/components/Login.tsx (1)

41-68: LGTM! The useMutation hook correctly provides the signalData() method.

All references to loginMutation.data() have been consistently updated to loginMutation.signalData(), which aligns with the PR's objective to fix variable shadowing in the Solid-based examples. The hook implementation exports signalData as a Solid signal (line 40 in useMutation.ts), and the code properly invokes it as a signal accessor. TypeScript strict mode is enabled in the project configuration, and ESLint router rules are configured.

examples/solid/start-basic-auth/src/routes/signup.tsx (1)

89-93: Accessor rename is correct and complete.

The change from data() to signalData() on lines 89 and 91 is verified as consistent with the refactored useMutation hook definition, which correctly exports signalData as a Solid.js signal. All Solid examples in the codebase have been properly updated with no remaining data() calls. TypeScript strict mode is enabled and the usage complies with all type safety requirements.

e2e/react-start/basic-auth/src/components/Login.tsx (1)

41-44: API rename applied consistently across the codebase.

The changes correctly update all references from loginMutation.data to loginMutation.stateData in alignment with the useMutation hook refactor. The hook definition (lines 10, 42 in useMutation.ts) exports the stateData property, and all component consumers in Login.tsx and signup.tsx correctly use the new API. The callback parameter at line 14 (ctx.data?.error) remains correct—it accesses the callback context parameter, which is a separate API from the mutation state property.

examples/react/start-basic-auth/src/components/Login.tsx (1)

40-68: LGTM! Property renames are consistent.

The updates correctly reference loginMutation.stateData instead of loginMutation.data throughout the conditional rendering logic (lines 32, 34, 35). The useMutation hook implementation confirms it exports the stateData property in its return object.

Note: Line 5's ctx.data?.error correctly remains unchanged as it refers to the callback parameter, not the mutation state. The .data properties on lines 26 and 46 are form data variables, not mutation properties, so they appropriately remain unchanged.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b573623 and 168b7e5.

📒 Files selected for processing (3)
  • e2e/react-start/basic-auth/src/routes/signup.tsx (1 hunks)
  • examples/react/start-basic-auth/src/routes/signup.tsx (1 hunks)
  • examples/react/start-supabase-basic/src/routes/signup.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript strict mode with extensive type safety for all code

Files:

  • examples/react/start-supabase-basic/src/routes/signup.tsx
  • e2e/react-start/basic-auth/src/routes/signup.tsx
  • examples/react/start-basic-auth/src/routes/signup.tsx
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Implement ESLint rules for router best practices using the ESLint plugin router

Files:

  • examples/react/start-supabase-basic/src/routes/signup.tsx
  • e2e/react-start/basic-auth/src/routes/signup.tsx
  • examples/react/start-basic-auth/src/routes/signup.tsx
🔇 Additional comments (1)
e2e/react-start/basic-auth/src/routes/signup.tsx (1)

92-94: AI summary inconsistency detected.

The AI-generated summary for this file incorrectly states that the changes replace signupMutation.data with signupMutation.signalData. However, the actual code uses signupMutation.stateData (lines 92, 94), which is correct for React examples. The naming convention signalData would be appropriate for Solid framework examples, not React.

@Kardainn
Copy link
Author

after review the eslint.config.js indicate that the rule for this project is off therefore i'm closing the issue

@Kardainn Kardainn closed this Dec 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant