feat: Performance Improvements in Calendar Page #654
Conversation
Cleaned Code
WalkthroughOptimisations internes du calendrier : callbacks refactorisés en useCallback, introduction de useMemo pour un mapping des emplois du temps, et ajustements des paramètres de FlatList. Modifications principalement de formatage et de performance sans changement d'API publique. (48 mots) Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/(tabs)/calendar/index.tsx (1)
52-73:renderDay: dépendances incomplètes (stale props) → ajoutezinsetsettabBarHeight.
Le callback utiliseinsets(Line 68) ettabBarHeight(Line 69) mais ils ne sont pas dans le tableau de dépendances, donc la UI peut ne pas se mettre à jour correctement.Proposition de diff
- }, [getDateFromIndex, timetableMap, manualRefreshing, handleRefresh, colors, headerHeight]); + }, [getDateFromIndex, timetableMap, manualRefreshing, handleRefresh, colors, headerHeight, insets, tabBarHeight]);
🧹 Nitpick comments (4)
app/(tabs)/calendar/hooks/useCalendarState.ts (2)
37-46:handleDateChange: vous pouvez le rendre vraiment “stable” (perf) via une mise à jour fonctionnelle.
Aujourd’hui la dépendance[weekNumber]fait recréer le callback à chaque changement de semaine. Une MAJ fonctionnelle évite ça et réduit les re-renders en cascade.Proposition de diff
- const handleDateChange = useCallback( - (newDate: Date) => { - setDate(newDate); - const newWeekNumber = getWeekNumberFromDate(newDate); - if (newWeekNumber !== weekNumber) { - setWeekNumber(newWeekNumber); - } - }, - [weekNumber] - ); + const handleDateChange = useCallback((newDate: Date) => { + setDate(newDate); + const newWeekNumber = getWeekNumberFromDate(newDate); + setWeekNumber(prev => (prev !== newWeekNumber ? newWeekNumber : prev)); + }, []);
76-88:onMomentumScrollEnd: OK, mais attention aux recréations fréquentes (dépend decurrentIndex).
Si l’objectif est de stabiliser les handlers pour la perf, un pattern “ref + setState fonctionnel” peut éviter d’avoircurrentIndexen dépendance.app/(tabs)/calendar/index.tsx (2)
39-51:timetableMap: bonne idée, mais typez la Map pour éviter leMap<any, any>implicite.
En TS, ça aide aussi à sécuriserday.courseset les.get(...).Proposition de diff (typing)
- const timetableMap = useMemo(() => { - const map = new Map(); + const timetableMap = useMemo(() => { + const map = new Map<number, (typeof timetable)[number]["courses"]>();
74-80:extraData: OK, maistimetable.lengthne couvre pas les changements de contenu à longueur constante.
Sitimetablepeut muter “à longueur égale” (ex: cours modifiés), vous risquez de ne pas rafraîchir certaines cellules selon les optimisations FlatList. À minima, vérifiez quetimetableest toujours remplacé immuablement par le hook (nouvelle référence) quand le contenu change.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/(tabs)/calendar/hooks/useCalendarState.tsapp/(tabs)/calendar/index.tsx
🔇 Additional comments (5)
app/(tabs)/calendar/hooks/useCalendarState.ts (3)
1-2: Changement cosmétique des imports : OK.
31-35: Calcul dediff: RAS.
66-67: Catch/log : OK.app/(tabs)/calendar/index.tsx (2)
1-1: ImportuseMemo: OK.
104-116: Réglages FlatList perf : à valider sur Android/iOS (trade-offs UX possibles).
decelerationRate="fast"+snapToInterval+pagingEnabled={false}peut changer sensiblement le “feel” selon plateformes.windowSize=5,maxToRenderPerBatch=2,initialNumToRender=1peuvent provoquer du blanc lors de scroll rapide siCalendarDayest lourd.Also applies to: 119-120
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Dev-LeChacal
changed the title
✅ Actions performedReview triggered.
|
1 participant
Règles de contribution
Caution
Afin de garantir une application stable et pérenne dans le temps, nous t'invitons à vérifier que tu as bien respecté les règles de contribution. Sans cela, ta Pull Request ne pourra pas être examinée.
Résumé des changements
Optimisation des performances dans la page du calendar.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.