Which saves us from a lot of boilerplate code.
8 | 23 |17 | You searched for: {query} 18 |
19 | ) : ( 20 |No search query provided.
21 | )} 22 | {/* Here you would typically display search results */} 23 |24 | In this compoennt we are asynchronously accessing the searchParams. 25 |
26 |Submitting {data?.get('username') as string}...
} 32 |44 | {optimisticTitle} 45 |
46 | {pending && Updating...} 47 |
21 | app/page.tsx
22 |
23 | .
24 | Error: {error}
82 |{user.email}
91 |{user.company.name}
92 |
101 | {`useEffect(() => {
102 | async function fetchUsers() {
103 | try {
104 | setLoading(true);
105 | const response = await fetch('/api/users');
106 | const userData = await response.json();
107 | setUsers(userData);
108 | } catch (err) {
109 | setError(err.message);
110 | } finally {
111 | setLoading(false);
112 | }
113 | }
114 |
115 | fetchUsers();
116 | }, []); // Empty deps = run once on mount`}
117 |
118 | 11 | Learn when to use useEffect and when you don't need it with practical examples 12 |
13 |28 | Example: Loading user data on component mount 29 |
30 | 31 | 32 | 36 |Example: Real-time clock and cleanup
38 | 39 | 40 | 44 |Example: Scroll and resize event listeners
46 | 47 | 48 | 52 |Example: LocalStorage and URL params sync
54 | 55 |Example: Counter and form state updates
70 | 71 | 72 | 76 |Example: Derived state from props
78 | 79 | 80 | 84 |86 | Example: Simple calculations and transformations 87 |
88 | 89 |90 | This clock updates every second using setInterval in useEffect. The interval is 91 | automatically cleaned up when the component unmounts. 92 |
93 |124 | Status: {isActive ? 'Running' : 'Stopped'} 125 |
126 |127 | The interval is created/destroyed based on the isActive state. 128 |
129 |
141 | {`useEffect(() => {
142 | const timer = setInterval(() => {
143 | setCurrentTime(new Date());
144 | }, 1000);
145 |
146 | // Cleanup function prevents memory leaks
147 | return () => {
148 | clearInterval(timer);
149 | };
150 | }, []); // Empty deps = run once on mount`}
151 |
152 |
158 | {`useEffect(() => {
159 | let interval = null;
160 |
161 | if (isActive) {
162 | interval = setInterval(() => {
163 | setCounter(prev => prev + 1);
164 | }, 100);
165 | }
166 |
167 | return () => {
168 | if (interval) clearInterval(interval);
169 | };
170 | }, [isActive]); // Re-run when isActive changes`}
171 |
172 | 182 | This is some content to make the page scrollable. The scroll position is being 183 | tracked in real-time using a scroll event listener set up with useEffect. 184 |
185 |
193 | {`useEffect(() => {
194 | const handleScroll = () => {
195 | setScrollY(window.scrollY);
196 | };
197 |
198 | const handleResize = () => {
199 | setWindowSize({
200 | width: window.innerWidth,
201 | height: window.innerHeight
202 | });
203 | };
204 |
205 | // Add event listeners
206 | window.addEventListener('scroll', handleScroll);
207 | window.addEventListener('resize', handleResize);
208 |
209 | // Cleanup function removes listeners
210 | return () => {
211 | window.removeEventListener('scroll', handleScroll);
212 | window.removeEventListener('resize', handleResize);
213 | };
214 | }, []); // Empty deps = setup once on mount`}
215 |
216 | 113 | ✅ State updates happen directly in onClick handlers - no useEffect needed! 114 |
115 |136 | Hello, {name}! 137 |
138 | )} 139 | 145 |149 | ✅ Form state updates directly in onChange - no useEffect needed! 150 |
151 |200 | ✅ Array updates happen directly in event handlers - no useEffect needed! 201 |
202 |223 | This content is conditionally rendered based on state. No useEffect needed for 224 | simple show/hide logic! 225 |
226 |231 | ✅ Boolean state toggles directly in onClick - no useEffect needed! 232 |
233 |
245 | {`// DON'T DO THIS!
246 | useEffect(() => {
247 | setCount(count + 1); // Infinite re-renders!
248 | }, [count]);
249 |
250 | const handleClick = () => {
251 | // This will trigger the useEffect above
252 | }`}
253 |
254 |
260 | {`// Simple and clean!
261 | const handleClick = () => {
262 | setCount(prev => prev + 1); // Direct state update
263 | };
264 |
265 | const handleInputChange = (e) => {
266 | setName(e.target.value); // Direct state update
267 | };`}
268 |
269 | 135 | Theme preference is saved to localStorage and persists across page reloads. 136 |
137 |182 | User data is automatically saved to localStorage. 183 |
184 |
214 | Current URL:{' '}
215 |
216 | {typeof window !== 'undefined' ? window.location.href : ''}
217 |
218 |
221 | The search text is synced with URL parameters. Try refreshing the page or sharing the 222 | URL. 223 |
224 |
249 | {`useEffect(() => {
250 | // Read from localStorage on mount
251 | const savedTheme = localStorage.getItem('theme');
252 | if (savedTheme) setTheme(savedTheme);
253 | }, []); // Empty deps = run once on mount`}
254 |
255 |
261 | {`useEffect(() => {
262 | localStorage.setItem('theme', theme);
263 | }, [theme]); // Run when theme changes`}
264 |
265 |
271 | {`useEffect(() => {
272 | const params = new URLSearchParams();
273 | if (searchText) params.set('search', searchText);
274 |
275 | const newUrl = \`\${pathname}?\${params}\`;
276 | router.replace(newUrl, { scroll: false });
277 | }, [searchText]); // Run when searchText changes`}
278 |
279 | 203 | ✅ All statistics calculated during render - no useEffect needed! 204 |
205 |Category: {product.category}
230 |Price: {formatPrice(product.price)}
231 |Rating: {formatRating(product.rating)}
232 |240 | ✅ Products filtered and sorted during render - no useEffect needed! 241 |
242 |
253 | {`// DON'T DO THIS!
254 | const [filteredProducts, setFilteredProducts] = useState([]);
255 |
256 | useEffect(() => {
257 | const filtered = products.filter(product =>
258 | product.name.includes(searchTerm)
259 | );
260 | setFilteredProducts(filtered);
261 | }, [products, searchTerm]); // Extra re-render!`}
262 |
263 |
269 | {`// Simple and efficient!
270 | const filteredProducts = products.filter(product =>
271 | product.name.toLowerCase().includes(searchTerm.toLowerCase())
272 | );
273 |
274 | const sortedProducts = filteredProducts.sort((a, b) => {
275 | return sortBy === 'price' ? a.price - b.price : a.name.localeCompare(b.name);
276 | });
277 |
278 | // For expensive operations, use useMemo:
279 | const expensiveCalculation = useMemo(() => {
280 | return heavyProcessing(data);
281 | }, [data]);`}
282 |
283 | {email}
38 |42 | Age: {age} ({isAdult ? 'Adult' : 'Minor'}) 43 |
44 |Domain: {emailDomain}
45 |Cart is empty
76 | ) : ( 77 | <> 78 |206 | ✅ Full name, initials, adult status, and domain are calculated during render! 207 |
208 |261 | ✅ Total, item count, and average price calculated with useMemo for performance! 262 |
263 |
276 | {`// DON'T DO THIS!
277 | const [fullName, setFullName] = useState('');
278 |
279 | useEffect(() => {
280 | setFullName(\`\${firstName} \${lastName}\`);
281 | }, [firstName, lastName]);`}
282 |
283 |
289 | {`// Simple calculation during render
290 | const fullName = \`\${firstName} \${lastName}\`;
291 | const isAdult = age >= 18;
292 |
293 | // For expensive calculations, use useMemo
294 | const total = useMemo(() => {
295 | return items.reduce((sum, item) =>
296 | sum + (item.price * item.quantity), 0
297 | );
298 | }, [items]);`}
299 |
300 |