Loading user...
;
}
return (
{user.name || 'Anonymous User'}
{ e.target.src = '/default-avatar.png'; }}
/>
Joined: {user.createdAt ?
new Date(user.createdAt).toLocaleDateString() :
'Unknown'
}
);
}
```
### โก Race Conditions
```javascript
// โ BEFORE - Race condition in async operations
async function updateUserData(userId, newData) {
const user = await fetchUser(userId);
const updated = { ...user, ...newData };
// Race condition: user might have changed between fetch and save
await saveUser(userId, updated);
}
// โ
AFTER - Race condition eliminated
async function updateUserData(userId, newData) {
let retries = 3;
while (retries > 0) {
try {
const user = await fetchUser(userId);
const updated = { ...user, ...newData, version: user.version + 1 };
// Optimistic locking automatically added
await saveUserWithVersion(userId, updated, user.version);
return updated;
} catch (error) {
if (error.code === 'VERSION_CONFLICT' && retries > 1) {
retries--;
// Exponential backoff added
await new Promise(resolve => setTimeout(resolve, Math.pow(2, 3 - retries) * 100));
continue;
}
throw error;
}
}
}
```
### ๐ Infinite Loops / Recursion
```javascript
// โ BEFORE - Potential infinite recursion
function calculateFactorial(n) {
if (n === 0) return 1;
return n * calculateFactorial(n - 1); // No protection against negative numbers
}
// โ
AFTER - Safe recursion with guards
function calculateFactorial(n) {
// Input validation automatically added
if (typeof n !== 'number' || !Number.isInteger(n)) {
throw new Error('Input must be a non-negative integer');
}
if (n < 0) {
throw new Error('Factorial is not defined for negative numbers');
}
// Stack overflow protection
if (n > 170) {
throw new Error('Number too large: factorial would exceed JavaScript number limits');
}
if (n === 0 || n === 1) return 1;
return n * calculateFactorial(n - 1);
}
```
### ๐ Async/Await Issues
```javascript
// โ BEFORE - Unhandled promise rejections
async function processData() {
const data = await fetchData(); // Unhandled if it throws
data.forEach(async item => {
await processItem(item); // Won't wait for completion
});
console.log('All done!'); // Executes immediately
}
// โ
AFTER - Proper async handling
async function processData() {
try {
const data = await fetchData();
// Promise.all added for concurrent processing
await Promise.all(
data.map(async item => {
try {
return await processItem(item);
} catch (error) {
console.error(`Failed to process item ${item.id}:`, error);
// Continue processing other items
return null;
}
})
);
console.log('All processing completed!');
} catch (error) {
console.error('Failed to fetch data:', error);
throw new Error(`Data processing failed: ${error.message}`);
}
}
```
### ๐ Security Vulnerabilities
```javascript
// โ BEFORE - XSS vulnerability
function UserComment({ comment }) {
return (
{/* Double null risk */}