mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-18 12:15:58 -06:00
53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
---
|
|
description:
|
|
globs:
|
|
alwaysApply: false
|
|
---
|
|
# React Context & Provider Patterns
|
|
|
|
## Context Provider Best Practices
|
|
|
|
### Provider Implementation
|
|
- Use TypeScript interfaces for provider props with optional `initialCount` for testing
|
|
- Implement proper cleanup in `useEffect` to avoid React hooks warnings
|
|
- Reference: [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx)
|
|
|
|
### Cleanup Pattern for Refs
|
|
```typescript
|
|
useEffect(() => {
|
|
const currentPendingRequests = pendingRequests.current;
|
|
const currentAbortController = abortController.current;
|
|
|
|
return () => {
|
|
if (currentAbortController) {
|
|
currentAbortController.abort();
|
|
}
|
|
currentPendingRequests.clear();
|
|
};
|
|
}, []);
|
|
```
|
|
|
|
### Testing Context Providers
|
|
- Always wrap components using context in the provider during tests
|
|
- Use `initialCount` prop for predictable test scenarios
|
|
- Mock context dependencies like `useParams`, `useResponseFilter`
|
|
- Example from [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx):
|
|
|
|
```typescript
|
|
render(
|
|
<ResponseCountProvider survey={dummySurvey} initialCount={5}>
|
|
<ComponentUnderTest />
|
|
</ResponseCountProvider>
|
|
);
|
|
```
|
|
|
|
### Required Mocks for Context Testing
|
|
- Mock `next/navigation` with `useParams` returning environment and survey IDs
|
|
- Mock response filter context and actions
|
|
- Mock API actions that the provider depends on
|
|
|
|
### Context Hook Usage
|
|
- Create custom hooks like `useResponseCountContext()` for consuming context
|
|
- Provide meaningful error messages when context is used outside provider
|
|
- Use context for shared state that multiple components need to access
|