All 17 React Best Practices (IMPORTANT!)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 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: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

[trixn]

We banned almost all margins from our styles and it is a blessing. It's (almost) always a bad Idea to add a margin to a component to "create spacing". When there needs to be space between components we always use flex containers with a gap defined between the items. We found that this is very consistent with how a designers thinks about the design and it makes components easily have different spacing in different contexts. The spacing between items should always be defined be the parent, not by the items themself.

[friedricht]

Very nice video, ByteGrad. What about making a video on how you test your react & nextjs applications ?

[bahramiwd]

Youtube lacks these kinds of videos! Because they're so awesome! 😃 Good job ByteGrad!

[roberto]

wow. this is useful even if you have years in this. i have 8 years developing, I'm considered senior in my job, and this tips are very valuable, accurate and helpful. thanks

[regilearn]

please consider REACT UNIT TESTING also your future videos

[tomasbalducchi]

Loved it, just great! Thanks so much for this.

[mmmhbarcelona]

I'm going to get a job as a front end developer and I wanted this video exactly right now, thanks man!

[rishikeshdasappa]

You're the best man
I love your videos

[sanchitbajaj]

Great video, btw what VS Code theme is this?

[juanierace]

Excellent content! 48:30 I have a doubt about this pattern, in that case the jsx inside the Sidebar component (same with the other cases) is just a div, with some styling, it is not actually a Sidebar component. Does that make sense? (I understand that maybe this approach is only possible on non-reusable components, and in this case we can ignore that the content inside the component is not complete.)

[rjwhite]

This video was awesome. I didn’t even notice that it was over an hour I was so interested. Can’t wait to try and put these in practice.

[tomasburian]

Good stuff, even for more senior devs.
I can't imagine coding anything without TS. Still very surprised someone out there makes tutorials without it.

[moofymoo]

nice to see how generic programming best practices translates to react because react components are just functions.

[mzafarr]

Loved it! Need more "best practices videos" about different stuff. Thanks!

[jasonwhittaker]

Would love to see a video on good coding patterns to use in React or Next and also coding principles, like SOLID and more

[couragic]

My first thought was “why React 17? (Not 19)” 😊

[TakeOnMe]

1:03:56 As we learned from you before, it would probably be better to use [todos.length], due to the value / reference difference, right?

[mohdsahil]

Best content!, I have learnt a lot! Thanks😀

just one question
if a parent component re-renders, the child component will also re-render. How can a children pattern prevent this behavior? Would you please explain? That would be a great help!

[joehead]

Another one is using a progression of multiple useState-> single useState object -> useReducer to manage a component that grows in complexity.

[kimse]

Sir, You make always a great tutorial ! Awesome work