From 4ac58f5af7b9d5478db564a22149d3e8fd4f6a0c Mon Sep 17 00:00:00 2001 From: Danilo Campos Date: Thu, 6 Nov 2025 11:39:39 -0800 Subject: [PATCH] Purge useEffect --- .../next-app-router/src/app/burrito/page.tsx | 10 +++------- .../next-app-router/src/app/profile/page.tsx | 9 ++------- .../src/contexts/AuthContext.tsx | 18 ++++++++++-------- .../src/contexts/AuthContext.tsx | 12 +++++++----- basics/next-pages-router/src/pages/burrito.tsx | 10 +++------- basics/next-pages-router/src/pages/profile.tsx | 9 ++------- 6 files changed, 27 insertions(+), 41 deletions(-) diff --git a/basics/next-app-router/src/app/burrito/page.tsx b/basics/next-app-router/src/app/burrito/page.tsx index 01d237c..81b5dec 100644 --- a/basics/next-app-router/src/app/burrito/page.tsx +++ b/basics/next-app-router/src/app/burrito/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import { useAuth } from '@/contexts/AuthContext'; import { useRouter } from 'next/navigation'; import posthog from 'posthog-js'; @@ -10,13 +10,9 @@ export default function BurritoPage() { const router = useRouter(); const [hasConsidered, setHasConsidered] = useState(false); - useEffect(() => { - if (!user) { - router.push('/'); - } - }, [user, router]); - + // Redirect to home if not logged in if (!user) { + router.push('/'); return null; } diff --git a/basics/next-app-router/src/app/profile/page.tsx b/basics/next-app-router/src/app/profile/page.tsx index 2cbf4e9..6e3328a 100644 --- a/basics/next-app-router/src/app/profile/page.tsx +++ b/basics/next-app-router/src/app/profile/page.tsx @@ -1,6 +1,5 @@ 'use client'; -import { useEffect } from 'react'; import { useAuth } from '@/contexts/AuthContext'; import { useRouter } from 'next/navigation'; import posthog from 'posthog-js'; @@ -9,13 +8,9 @@ export default function ProfilePage() { const { user } = useAuth(); const router = useRouter(); - useEffect(() => { - if (!user) { - router.push('/'); - } - }, [user, router]); - + // Redirect to home if not logged in if (!user) { + router.push('/'); return null; } diff --git a/basics/next-app-router/src/contexts/AuthContext.tsx b/basics/next-app-router/src/contexts/AuthContext.tsx index 9a1a06f..8b600c2 100644 --- a/basics/next-app-router/src/contexts/AuthContext.tsx +++ b/basics/next-app-router/src/contexts/AuthContext.tsx @@ -1,6 +1,6 @@ 'use client'; -import { createContext, useContext, useState, useEffect, ReactNode } from 'react'; +import { createContext, useContext, useState, ReactNode } from 'react'; import posthog from 'posthog-js'; interface User { @@ -20,17 +20,19 @@ const AuthContext = createContext(undefined); const users: Map = new Map(); export function AuthProvider({ children }: { children: ReactNode }) { - const [user, setUser] = useState(null); + // Use lazy initializer to read from localStorage only once on mount + const [user, setUser] = useState(() => { + if (typeof window === 'undefined') return null; - useEffect(() => { const storedUsername = localStorage.getItem('currentUser'); if (storedUsername) { const existingUser = users.get(storedUsername); if (existingUser) { - setUser(existingUser); + return existingUser; } } - }, []); + return null; + }); const login = async (username: string, password: string): Promise => { try { @@ -42,13 +44,13 @@ export function AuthProvider({ children }: { children: ReactNode }) { if (response.ok) { const { user: userData } = await response.json(); - + let localUser = users.get(username); if (!localUser) { - localUser = userData; + localUser = userData as User; users.set(username, localUser); } - + setUser(localUser); localStorage.setItem('currentUser', username); diff --git a/basics/next-pages-router/src/contexts/AuthContext.tsx b/basics/next-pages-router/src/contexts/AuthContext.tsx index 53a6c7a..dc38b57 100644 --- a/basics/next-pages-router/src/contexts/AuthContext.tsx +++ b/basics/next-pages-router/src/contexts/AuthContext.tsx @@ -1,4 +1,4 @@ -import { createContext, useContext, useState, useEffect, ReactNode } from 'react'; +import { createContext, useContext, useState, ReactNode } from 'react'; import posthog from 'posthog-js'; interface User { @@ -18,17 +18,19 @@ const AuthContext = createContext(undefined); const users: Map = new Map(); export function AuthProvider({ children }: { children: ReactNode }) { - const [user, setUser] = useState(null); + // Use lazy initializer to read from localStorage only once on mount + const [user, setUser] = useState(() => { + if (typeof window === 'undefined') return null; - useEffect(() => { const storedUsername = localStorage.getItem('currentUser'); if (storedUsername) { const existingUser = users.get(storedUsername); if (existingUser) { - setUser(existingUser); + return existingUser; } } - }, []); + return null; + }); const login = async (username: string, password: string): Promise => { try { diff --git a/basics/next-pages-router/src/pages/burrito.tsx b/basics/next-pages-router/src/pages/burrito.tsx index 0f04cd7..3c07990 100644 --- a/basics/next-pages-router/src/pages/burrito.tsx +++ b/basics/next-pages-router/src/pages/burrito.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import posthog from 'posthog-js'; @@ -10,13 +10,9 @@ export default function BurritoPage() { const router = useRouter(); const [hasConsidered, setHasConsidered] = useState(false); - useEffect(() => { - if (!user) { - router.push('/'); - } - }, [user, router]); - + // Redirect to home if not logged in if (!user) { + router.push('/'); return null; } diff --git a/basics/next-pages-router/src/pages/profile.tsx b/basics/next-pages-router/src/pages/profile.tsx index 63aacaa..6cd9360 100644 --- a/basics/next-pages-router/src/pages/profile.tsx +++ b/basics/next-pages-router/src/pages/profile.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import posthog from 'posthog-js'; @@ -9,13 +8,9 @@ export default function ProfilePage() { const { user } = useAuth(); const router = useRouter(); - useEffect(() => { - if (!user) { - router.push('/'); - } - }, [user, router]); - + // Redirect to home if not logged in if (!user) { + router.push('/'); return null; }