All 17 React Best Practices (IMPORTANT!)

👉 Check out Semaphor: https://semaphor.cloud (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more https://bit.ly/3QOe1Bh

👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...
👉 Professional JavaScript Course: https://bytegrad.com/courses/professi...
👉 Professional CSS Course: https://bytegrad.com/courses/professi...

👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 Best practices = Senior dev
01:12 Sponsor
03:58 #1 Constants / Hard-coded values / Magic values
12:03 #2 Folder structure
16:02 #3 Components: when to create them
23:42 #4 Avoid unnecessary markup (div's)
27:28 #5 IMPORTANT: don't add layout styles to reusable component
33:30 #6 Use TypeScript (why & where in React)
37:07 #7 IMPORTANT: Keep components simple (children pattern, updater function for useState)
51:32 #8 IMPORTANT: Don't use setter function from useState, instead create a separate event handler function
55:43 #9 IMPORTANT: Naming props (when prop is a function)
01:02:42 #10 useMemo, useCallback & React.memo() for performance
01:09:12 #11 When to use updater function from useState
01:11:32 #12 Use single state instead of multiple states
01:13:15 #13 IMPORTANT: one source of truth in programming. Keep track of a 'selected' or 'active' item by its id, NOT its whole object!
01:18:18 #14 IMPORTANT: use the URL for some state (filters, pagination, etc.), not useState
01:21:37 #15 Keep useEffect simple: one concern per useEffect
01:26:18 #16 IMPORTANT: instead of fetching data in useEffect, consider alternatives
01:33:12 #17 IMPORTANT: improve overall structure with components, custom hooks and utility functions
01:45:50 Outro

#webdevelopment #reactjs #nextjs