Skip to content

refactor : replace manual useState/useEffect fetching with useQuery in companyDetailPage#321

Merged
Sachinchaurasiya360 merged 2 commits into
Sachinchaurasiya360:mainfrom
CodrJatin:refactor/use-React-Querry-in-companyDetailPage
May 21, 2026
Merged

refactor : replace manual useState/useEffect fetching with useQuery in companyDetailPage#321
Sachinchaurasiya360 merged 2 commits into
Sachinchaurasiya360:mainfrom
CodrJatin:refactor/use-React-Querry-in-companyDetailPage

Conversation

@CodrJatin
Copy link
Copy Markdown
Contributor

@CodrJatin CodrJatin commented May 18, 2026

Summary

Refactors the data-fetching architecture in CompanyDetailPage.tsx by replacing manual async loops useState and useEffect with React Query useQuery hooks.

This fixes redundant boilerplate code, adds instant client-side caching, and enables automatic background data revalidation when students navigate back to previously viewed companies.

Changes Made

  • Removed Manual State: Eliminated company, reviews, and loading states managed by useState.
  • Removed Side-Effects: Cleared out the useEffect block that handled sequential Promise.all network requests on component mount.
  • Implemented TanStack Query: - Added a useQuery hook for company detail metadata using standard project query keys.
    • Added a reactive useQuery hook for reviews tracking the sortBy state variable natively.
  • State Optimization: Created derived states for backward compatibility, completely shielding the lower JSX rendering code from requiring any modifications.
  • Refactored Refresh Actions: Updated the manual API calls in refreshReviews to utilize the native refetch() functionality provided by React Query.

Reference Implementation Checked

  • Checked patterns against JobBrowsePage and YCCompanyDetailPage to maintain layout syntax, naming schemes, and config parameters uniformly.

Closes #131

Summary by CodeRabbit

  • Refactor
    • Improved internal data loading and management for the company details page to enhance performance and reliability.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 18, 2026

Warning

Rate limit exceeded

@CodrJatin has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 35 minutes before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5ffbb3bc-4336-4465-b147-3fe1fd19b4e1

📥 Commits

Reviewing files that changed from the base of the PR and between 95704dd and 8d6cd29.

📒 Files selected for processing (1)
  • client/src/module/student/companies/CompanyDetailPage.tsx
📝 Walkthrough

Walkthrough

CompanyDetailPage refactors data loading from manual state management and useEffect to @tanstack/react-query hooks. Company and reviews are now sourced from keyed useQuery calls, and the refresh flow uses refetchReviews() instead of direct API calls. Imports are updated accordingly.

Changes

Migrate CompanyDetailPage to React Query

Layer / File(s) Summary
Migrate data fetching to React Query hooks
client/src/module/student/companies/CompanyDetailPage.tsx
Imports are updated to add useQuery and queryKeys while removing useEffect. Local state for loading, company, and reviews is replaced with two useQuery hooks keyed by company slug and current sortBy. The refreshReviews callback is simplified to close the form and trigger refetchReviews() instead of making direct axios requests.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

good first issue, level:beginner, gssoc:approved

Poem

A page once tangled in hooks and state,
Now queries dance with perfect gait,
React whispers "refetch, align,"
No more manual fetches—this code will shine! 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: refactoring to replace manual useState/useEffect fetching with useQuery in CompanyDetailPage.
Linked Issues check ✅ Passed The pull request successfully addresses all coding requirements from issue #131: replacing useState/useEffect with useQuery for company and reviews data, removing redundant state management, and adopting established patterns for caching and background refetching.
Out of Scope Changes check ✅ Passed All changes are focused on refactoring CompanyDetailPage.tsx to use React Query, directly addressing issue #131 with no unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

Copy link
Copy Markdown
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)
client/src/module/student/companies/CompanyDetailPage.tsx (1)

97-108: ⚡ Quick win

Use placeholderData: keepPreviousData to keep previous reviews visible when sort changes.

The reviews query doesn't use placeholderData, so changing sortBy sets reviewsLoading to true, which blanks the entire page via LoadingScreen even though the company data is already loaded. This pattern is already established in the codebase (e.g., JobBrowsePage.tsx, DsaTopicsPage.tsx). Add import { keepPreviousData } from "@tanstack/react-query" and set placeholderData: keepPreviousData on the reviews query to keep previous results visible during the sort transition.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/module/student/companies/CompanyDetailPage.tsx` around lines 97 -
108, The reviews query (useQuery that returns reviewsData/reviewsLoading and
uses queryKey [...queryKeys.companies.reviews(slug!), sortBy]) should keep
previous results when sortBy changes: import keepPreviousData from
"`@tanstack/react-query`" and pass placeholderData: keepPreviousData in the
useQuery options so the previous reviews remain visible while the new sort
fetches; keep the existing enabled, queryKey, and queryFn intact and only add
the placeholderData option.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@client/src/module/student/companies/CompanyDetailPage.tsx`:
- Around line 91-108: Both queries currently ignore errors so API failures are
treated like empty/not-found states; update the two useQuery calls that fetch
company and reviews to also destructure isError and error (e.g., companyError,
companyIsError and reviewsError, reviewsIsError), then change the render logic
to show an explicit error message or error component when either companyIsError
or reviewsIsError is true (using the respective error object for details)
instead of falling back to company === undefined or reviews === [] — ensure the
check for "company not found" only runs when not companyIsError and company is
undefined, and keep loading logic (companyLoading || reviewsLoading) intact.

---

Nitpick comments:
In `@client/src/module/student/companies/CompanyDetailPage.tsx`:
- Around line 97-108: The reviews query (useQuery that returns
reviewsData/reviewsLoading and uses queryKey
[...queryKeys.companies.reviews(slug!), sortBy]) should keep previous results
when sortBy changes: import keepPreviousData from "`@tanstack/react-query`" and
pass placeholderData: keepPreviousData in the useQuery options so the previous
reviews remain visible while the new sort fetches; keep the existing enabled,
queryKey, and queryFn intact and only add the placeholderData option.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ad1737d2-bb24-4dbe-b460-f03126f2c40c

📥 Commits

Reviewing files that changed from the base of the PR and between 3552efa and 95704dd.

📒 Files selected for processing (1)
  • client/src/module/student/companies/CompanyDetailPage.tsx

Comment thread client/src/module/student/companies/CompanyDetailPage.tsx Outdated
@Abfa41 Abfa41 added level:intermediate Requires moderate project understanding type:refactor Code refactoring without feature changes gssoc:approved Approved for GSSoC scoring labels May 18, 2026
@CodrJatin
Copy link
Copy Markdown
Contributor Author

hey @Sachinchaurasiya360 , Please review and merge the PR or lemme know if anything needs to be changed.
Thank You!

#GSSOC'26

@Sachinchaurasiya360 Sachinchaurasiya360 merged commit bffbacc into Sachinchaurasiya360:main May 21, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Approved for GSSoC scoring level:intermediate Requires moderate project understanding type:refactor Code refactoring without feature changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants