Скачать с ютуб All 17 React Best Practices (IMPORTANT!) в хорошем качестве

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