Add react hooks best practices resources (#6303)

* Update hooks-best-practices@mkyU0ug8MXxV4biHuOity.md

* Update src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
pull/6355/head
aksh1322 3 months ago committed by GitHub
parent 6da5050007
commit d537e93275
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 11
      src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md

@ -1,15 +1,6 @@
# Hooks Best Practices # Hooks Best Practices
1. Use Hooks at the Top Level: Always call Hooks at the top level of your React function, before any early returns. This ensures that Hooks are called in the same order each time a component renders. Learn the best practices for using React hooks from the following resources:
2. Only Call Hooks from React Functions: Hooks should only be called from React function components or custom Hooks, not from regular JavaScript functions.
3. Keep Hooks Pure: Hooks should not cause side effects. Use useEffect for side effects like data fetching or subscriptions.
4. Optimize Performance: Use useMemo and useCallback to memoize expensive calculations and functions to avoid unnecessary re-renders.
5. Encapsulate Logic in Custom Hooks: If you find yourself using the same logic in multiple components, consider creating a custom Hook to encapsulate that logic.
6. Use Dependency Arrays in useEffect: Always specify dependencies in useEffect to avoid unnecessary re-runs of the effect.
7. Avoid Overusing State: Use state sparingly and only when necessary. Too many state variables can make your component complex and hard to manage.
Here are some useful resources to refer to:
- [@article@React Hooks Cheat Sheet: Best Practices with Examples](https://blog.logrocket.com/react-hooks-cheat-sheet-solutions-common-problems/) - [@article@React Hooks Cheat Sheet: Best Practices with Examples](https://blog.logrocket.com/react-hooks-cheat-sheet-solutions-common-problems/)
- [@article@React Hooks Cheat Sheet: The 7 Hooks You Need To Know](https://www.freecodecamp.org/news/react-hooks-cheatsheet/)
- [@article@React Custom Hooks: Best Practices and Examples](https://utopia-insights.dev/react-custom-hooks-best-practices-and-examples/) - [@article@React Custom Hooks: Best Practices and Examples](https://utopia-insights.dev/react-custom-hooks-best-practices-and-examples/)
Loading…
Cancel
Save