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/professional-react-nextjs 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/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 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 Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)