Skip to content

Commit 61fea68

Browse files
fix: correct ESLint fixes to use Zustand getState() pattern
The previous fix created unstable dependencies by using the entire store state object in useEffect dependencies, causing re-renders and test timeouts. Changes: - app/[locale]/page.tsx: Use useTimerStore.getState().tick() to avoid tick function dependency issues - ServiceWorkerRegistration.tsx: Use useNotificationStore.getState() to avoid setPermission dependency issues - Remove unused useStore import This follows Zustand best practices for accessing actions in effects without creating dependencies on store state. Verified locally: - pnpm lint: passes with --max-warnings=0 - pnpm build: successful production build
1 parent 6382a5f commit 61fea68

File tree

2 files changed

+7
-11
lines changed

2 files changed

+7
-11
lines changed

app/[locale]/page.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,15 @@ export default function Home() {
5757

5858
// Set up interval for ticking when timer is running
5959
useEffect(() => {
60-
if (!isRunning || !timerState?.tick) return
60+
if (!isRunning) return
6161

6262
const interval = setInterval(() => {
63-
timerState.tick()
63+
// Call tick from the store directly to avoid dependency issues
64+
useTimerStore.getState().tick()
6465
}, 1000)
6566

6667
return () => clearInterval(interval)
67-
}, [isRunning, timerState])
68+
}, [isRunning])
6869

6970
// Play sound and show notification when timer completes
7071
useEffect(() => {

components/notifications/ServiceWorkerRegistration.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { useEffect } from 'react'
44
import { useNotificationStore } from '@/lib/stores/notificationStore'
5-
import useStore from '@/lib/hooks/useStore'
65
import {
76
registerServiceWorker,
87
getNotificationPermission,
@@ -13,11 +12,7 @@ import {
1312
* Registers the Service Worker on app load and syncs notification permission state
1413
*/
1514
export function ServiceWorkerRegistration() {
16-
const notificationStore = useStore(useNotificationStore, (state) => state)
17-
1815
useEffect(() => {
19-
const setPermission = notificationStore?.setPermission ?? (() => {})
20-
2116
// Register Service Worker
2217
registerServiceWorker().then((registration) => {
2318
if (registration) {
@@ -27,22 +22,22 @@ export function ServiceWorkerRegistration() {
2722

2823
// Sync initial permission state
2924
const permission = getNotificationPermission()
30-
setPermission(permission)
25+
useNotificationStore.getState().setPermission(permission)
3126

3227
// Listen for permission changes (some browsers support this)
3328
if ('permissions' in navigator) {
3429
navigator.permissions
3530
.query({ name: 'notifications' as PermissionName })
3631
.then((permissionStatus) => {
3732
permissionStatus.addEventListener('change', () => {
38-
setPermission(getNotificationPermission())
33+
useNotificationStore.getState().setPermission(getNotificationPermission())
3934
})
4035
})
4136
.catch((error) => {
4237
console.warn('[Notifications] Permission monitoring not supported:', error)
4338
})
4439
}
45-
}, [notificationStore])
40+
}, [])
4641

4742
// This component doesn't render anything
4843
return null

0 commit comments

Comments
 (0)