All 12 useState & useEffect Mistakes Junior React Developers Still Make in 2025

ByteGrad

46 min

14 views

📋 Video Summary

🎯 Overview

This video, by ByteGrad, covers the top 12 mistakes junior React developers make with `useState` and `useEffect` hooks. The video aims to help developers avoid common pitfalls and write more efficient and maintainable React code. The video explores each mistake with code examples and solutions.

📌 Main Topic

Common mistakes made by junior React developers when using `useState` and `useEffect` hooks in React.

🔑 Key Points

1. Incorrectly Updating State with Multiple Updates [0:00]

Using multiple `setState` calls consecutively doesn't always update as expected.

Solution: Use the updater function version of `setState` (e.g., `setCount(prevCount => prevCount + 1)` ) to ensure the most up-to-date value is used.

2. Conditional Rendering and Hooks [0:11]

Calling hooks (like `useState` and `useEffect`) conditionally (inside an `if` statement) is forbidden in React.

Solution: Ensure hooks are always called in the same order during every render.

3. Incorrectly Updating an Object's State [0:47]

When updating object state, directly assigning properties (e.g., `setUser({ name: e.target.value })`) can lead to losing other properties.

Solution: Use the spread operator to copy existing properties and then override the desired ones (e.g., `setUser({...user, name: e.target.value })`).

4. Inefficient State Management in Forms [0:59]

Creating separate state variables for each form input is inefficient.

Solution: Use a single object to manage the entire form state, with each input field corresponding to a key in the object. Use the `name` attribute of the input to dynamically update the object.

5. Overuse of `useEffect` for Derived State [1:10]

Using `useEffect` to derive state from other existing state variables is often unnecessary.

Solution: Calculate derived values directly within the component's render function.

6. Primitives vs. Non-Primitives and Re-renders [1:25]

Components re-render when the state changes. Primitives (numbers, strings, booleans) are compared by value, so re-renders won't happen if the value is the same. Objects are compared by reference, so even if the object's contents are the same, the component will re-render if a new object is created.

Solution: Be aware of how JavaScript compares primitives vs. objects when using them as state values.

7. Incorrect State Initialization [1:33]

Initializing state with `undefined` can lead to errors when accessing properties before the data is fetched.

Solution: Initialize with `null` or create a loading state to prevent errors.

8. Type Script Mistakes [1:39]

Type Script can infer the type.

Solution: Declare the type to avoid errors.

9. Not Using Custom Hooks [1:50]

Duplicating state and logic across multiple components.

Solution: Refactor reusable logic into custom hooks (functions that start with "use").

10.Server vs. Client Components and Hooks [2:00]

`useState`, `useEffect`, and other hooks cannot be used in server components.

Solution: Make the component a client component by adding `"use client"` at the top.

11.Closure Issues with `useEffect` and Intervals [2:09]

Incorrectly using `setInterval` within `useEffect` can lead to stale values due to JavaScript closures.

Solution: Make sure to clear the interval in the cleanup function of `useEffect` using `clearInterval`.

12.Fetching Data in `useEffect` Pitfalls [2:19]

Fetching data directly in `useEffect` can lead to issues like race conditions and inefficient rendering.

Solution: Use the `AbortController` to cancel pending fetch requests. Consider using server components or libraries like React Query or SWR for more robust data fetching solutions.

💡 Important Insights

• Dependencies in `useEffect`: When using `useEffect`, be mindful of the dependency array. Include only the variables that, when changed, should trigger the effect. [1:00]
• Client vs Server Component: Server components run on the server, while client components run in the browser. Using hooks in server components results in errors. [2:00]

📖 Notable Examples & Stories

• Counter Example: A simple counter example demonstrates the issue of multiple `setState` calls not updating as expected. [0:00]
• Form Example: A form example illustrates the use of a single state object with dynamic property updates using the `name` attribute. [0:59]
• Window Size Example: A code example using a custom hook for window size to avoid repetitive code. [1:50]
• Post Fetching Example: The video shows the problems of race conditions and the need for cleanup in fetching examples. [2:19]

🎓 Key Takeaways

1. Understand the nuances of `useState` and `useEffect` to avoid common errors.
2. Use best practices for state management, including the updater function for `setState`, single state objects for forms, and custom hooks for reusability.
3. Be aware of the differences between server and client components and how they affect the use of hooks.
4. Master JavaScript fundamentals to better understand how hooks work.
5. Consider professional solutions, such as react query or SWR, when fetching data.

✅ Action Items (if applicable)

□ Review the code examples provided in the video. □ Practice using the techniques discussed in your own React projects. □ Experiment with custom hooks to refactor and reuse logic. □ Consider using libraries like React Query or SWR for data fetching.

🔍 Conclusion

The video provides a comprehensive overview of the most common mistakes junior React developers make with `useState` and `useEffect`. By understanding these mistakes and the solutions, developers can write cleaner, more efficient, and maintainable React code, ultimately leading to better applications.