📋 Video Summary

🎯 Overview

This ByteGrad video details the top 12 mistakes junior React developers make when using the `useState` and `useEffect` hooks. The video aims to guide developers in avoiding these pitfalls and writing more efficient, maintainable React code. It covers a range of common errors, from incorrect state updates to improper handling of server-side rendering and fetching data.

📌 Main Topic

Common mistakes and best practices for using `useState` and `useEffect` in React.

🔑 Key Points

• 1. Incorrect State Updates with Multiple `setCount` Calls [0:00]

- Multiple `setCount` calls in a row don't update the state as expected because state updates are scheduled.

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

• 2. Conditional Rendering of Hooks [0:11]

- Hooks must be called in the same order on every render.

- Avoid using hooks inside `if` statements or other conditional blocks. - Refactor to ensure hooks are always called.

• 3. Incorrectly Updating Object State [0:47]

- When updating objects in state, ensure you spread the previous state to avoid losing properties.

- Example: `setUser({...user, name: e.target.value})`. Using the updater function is also common.

• 4. Creating Separate State Variables for Every Form Input [0:09]

- Instead of creating separate state variables for each form input, use a single object to manage the entire form's state.

- Use the input's `name` attribute to dynamically update the correct form field.

• 5. Overuse of `useState` and `useEffect` for Derived State [0:26]

- Avoid creating new state and using `useEffect` if the value can be derived directly from existing state.

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

• 6. Primitives vs Non-Primitive Values [0:32]

- React re-renders components only when state values change.

- Primitive values (numbers, strings, booleans) are compared by value, so re-renders won't happen if the value is the same. - Objects and arrays are compared by reference, so even if the contents are the same, a new object/array will trigger a re-render.

• 7. Initializing State with Objects & Not Handling Immediate Rendering [0:39]

- If a `useState` is initialized with an object, consider the initial loading state.

- Use a loading state to prevent errors when trying to access properties of undefined data.

• 8. Type Script Mistakes [0:45]

- Use typescript to catch potential errors in your code.

- Avoid mistakes in assigning values which typescript can catch.

• 9. Not Using Custom Hooks [0:21]

- Create custom hooks to encapsulate and reuse stateful logic.

- Refactor repetitive code into reusable functions that start with "use".

• 10.Server vs. Client Components [0:30]

- Understand the difference between server and client components in modern React (Next.js).

- `useState` and `useEffect` only work in client components. - Use `use client` directive to mark components as client-side.

• 11.Closure Issue [0:26]

- When using `setInterval` inside `useEffect`, be aware of JavaScript closures.

- The variables inside the interval function are created at function creation time, which could lead to incorrect code. - To fix this, add the variables to the dependency array. - Use the updater function version of `useState` (e.g., `setCount(prevCount => prevCount + 1)`) to access the most up-to-date value.

• 12.Fetching Data in `useEffect` and Race Conditions [0:42]

- Avoid fetching data directly in `useEffect` when possible to prevent race conditions.

- Use the `AbortController` to cancel previous fetch requests when a new request is made. - Consider using libraries like React Query or SWR for data fetching in client components.

💡 Important Insights

• • Dependencies in `useEffect`: Carefully consider the dependencies in the `useEffect` hook's dependency array.
• • Client Components: Know when to use client components (`use client`) to access browser features and stateful logic.
• • Best Practices: Always check for edge cases to ensure the application works correctly.

📖 Notable Examples & Stories

• • Counter Component: The video uses a counter component to demonstrate incorrect state updates and the solution using the updater function [0:00].
• • Post Component: The video uses a post body component to show the improper usage of useEffect and fetching data [0:51].
• • Window Size: Using a custom hook to get the size of the window [0:27].

🎓 Key Takeaways

• 1. Understand how `useState` and `useEffect` work under the hood.
• 2. Avoid common pitfalls like incorrect state updates, closure issues, and race conditions.
• 3. Use best practices like custom hooks, object state updates, and proper data fetching techniques.

✅ Action Items (if applicable)

□ Review and refactor existing React components to apply these best practices. □ Practice using custom hooks to encapsulate reusable logic. □ Consider using libraries like React Query or SWR for data fetching in client components.

🔍 Conclusion

The video provides a comprehensive guide to understanding and avoiding common mistakes when using `useState` and `useEffect` in React. By mastering these concepts, developers can write cleaner, more efficient, and maintainable React code.