Purge useEffect

Author: daniloc

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;
   }
 

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;
   }
 

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<AuthContextType | undefined>(undefined);
 const users: Map<string, User> = new Map();
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
+  // Use lazy initializer to read from localStorage only once on mount
+  const [user, setUser] = useState<User | null>(() => {
+    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<boolean> => {
     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);
 

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<AuthContextType | undefined>(undefined);
 const users: Map<string, User> = new Map();
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
+  // Use lazy initializer to read from localStorage only once on mount
+  const [user, setUser] = useState<User | null>(() => {
+    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<boolean> => {
     try {

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;
   }
 

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;
   }