Hackforge Academy

Explanation

Not using keys properly in lists is a common mistake in React. Keys help React identify which elements changed, improved performance, and prevent unexpected UI behavior.

Code:

// Incorrect
{items.map(item => (
  <li>{item.name}</li>
))}

// Correct
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Explanation

Mutating state directly instead of using the state setter function can cause unexpected behavior because React may not detect the change.

Code:

// Incorrect
state.count = state.count + 1;

// Correct
setCount(count + 1);

Explanation

Not using dependency arrays correctly in useEffect can cause infinite loops or missed updates. Always specify dependencies carefully.

Code:

// Incorrect
useEffect(() => {
  fetchData();
});

// Correct
useEffect(() => {
  fetchData();
}, []);

Explanation

Creating too many components inside a single file instead of splitting them into reusable components makes the code harder to maintain and scale.

Code:

// Better practice
src/
 ├── components/
 │    ├── Header.jsx
 │    ├── Footer.jsx
 │    └── Sidebar.jsx

Explanation

Not using reusable components leads to duplicated code and inconsistent UI. Always extract repeating UI elements into shared components for better maintainability 🚀

Code:

// Reusable component example
function Button({ label }) {
  return <button>{label}</button>;
}