4 React Best Practices That Will Make You A PRO 

Personal Timestamps 03:21 - Separating your functionality into components will prevent unnecessary re-renders. 07:43 - Use empty (or ..) fragment tags to add multiple elements to a React Component without wrapping it in an extra DOM node (such as a ) 10:39 - Sometimes it's best to separate your useState hook data into multiple hooks, instead of using a single hook with an object. 14:50 - Typechecking your props is important

whoa, the effects in this video were really cool! great video, pedro!

How about a video on debugging in React? There doesn't seem to be many good videos on debugging React. It could be super useful. :)

Everything's clear!!! Your voice, your lessons!!! Thank you so much

React Dom and life cycle are super important and I feel go unmentioned in most tutorials. Really glad to see that someone mentioned components containing all nessesary logic stops unnecessary rerendering

Hey Pedro, great video as always. Really appreciate all the hard work you put in and the time you are investing in this channel. I wanted to add my insight on the "Relationship between States and Objects" subject that you mentioned. There is another important consideration that one needs to be aware of when deciding to use a single Object state or split it into multiple single value states as you demonstrated in the video. In the case you have a dependency between state's value then it is NOT advisable to split the state, and better to have a single object state or use the useReducer HOOK. This way grantees always get the latest state value. When states are separated you gain performance by letting react decide when is the best time to store the latest state after you set it to its latest value. You may encounter cases where you are checking one state value before settings another state value and you don't necessarily have the latest value since React hasn't set it yet. It's not a common thing usually things happen fast, but on big applications, it can occur.

Pedro, excelente vídeo! Se você tiver outras "best practices", pode fazer mais desse tipo de vídeo que ajuda bem nós que estamos começando! Estou mudando de carreira e seus vídeos estão me ajudando bastante. Fiquei feliz de saber que vc é um brasileiro morando em Vancouver. Eu acabei de chegar em Ottawa. Abração e parabéns!

Thanks for the first information about rendering. Tutorials I watched just shown how to build on react using components, but they didn't mentioned rendering how it exactly works, so in the future I might made mistake of adding useState on the place where many components are so forcing every component to re-render even if they don't have to. PropType is also useful before I learn TypeScript. Subscribed to you since I just started learning React so I will check other videos later when I end up other tutorials.

Great video. Useful stuff. Thanks a lot.

Good advices! Thanks.

everything that is related to "best practices", clean coding, simplifying is very useful and hopefully not too complicated to make into a video.

WoW!!! Learnt a lot here :D

Really interesting video. I'm a beginner in React and I think that this sort of video prevents a lot of dirty code along the way. Thanks!

Great video it helps me a lot.

Thanks pedro, its a great video, I enjoy it

never knew about proptypes thankyou for the exposure 😊😊

good video. quick note on separating states: if you use onsubmit instead, the values change together so it is more concise to keep em together. video idea? react profilers!

Wow it's so fascinating to be taught by a university student. Most online lecturers tend to be graduate. I am an undergrad student studying comp scie and am just starting to learn react. Found your tutorials really helpful! Keep up the great work! ❤️

Thank you, Pedro!

This was a fantastic video! Very beneficial and enjoyable at the same time. Keep it up!

Great vid, Pedro! I enjoyed it. . .Just to make a quick point about Fragments in React, the empty tags as you used is the shortcut. In other words, is short for after importing Fragment. Or, just using . I know this is a nit picky comment, but some beginners get confused about this. Just mentioning this so others may not get confused about it.

Thank you for this video! Keep up the good work!

Very useful Pedro, Thank you very much 🎉🙏

Really amazing content! thank you so much, really useful tips

Wow! Great video 🎉

Thank you so much!

really helpful stuff thanks

Really good tips! Thanks for share!

Awesome ! Thank you so much

good stuff man!

Thank you very much Pedro. Your awesome and ypur videos are amazing.

Like your hustle spirit.... keep going. Thanks for sharing this video.

just found out about your channel awesome man! i subscribed

Nice tips and tricks from Brazil to World :)

Awesome tutorial

Awesome information!!

Thank you for this amazing video PEDRO! You always motivated me to learn more deep dive about React.

Thanks bro ❤

Great video!

Your video is informative. First topic is new addition to my knowledge and others also help remind me to keep away from mistakes.

Great video Pedro, thanks!

very useful video man, thank you

Thanks for the video! Praying you pass your courses.

senangnya menemukan channel sepert ini. terima kasih.

Amazing!! Thanks a lot

I'm new to react, but my impression was that for single state variables you use useState and for object state you use a reducer. I thought that was the recommendation.

Hey Pedro, thanks for the tremendous video, I was about to learn Proptypes as I am not aware of that, Now I came to an idea of Proptypes, thanks bud!! keep up the good work ❤

Muchas gracias por los videos. Son excelentes. Estaría muy bien si pudieras hacer uno sobre la arquitectura de proyectos. Cómo empezar desde el diseño del proyecto antes de empezar a escribir código. Existen muy pocos videos de ese tema especializado en React. ¡Gracias por el tiempo que dedicas a compartir tu conocimiento!!

Please do not hold on sharing knowledge just because the topic is not "cool enough" or "unique enough." We love you

Cool video so far, thanks. Just wanted to quickly comment about your setColor function at 03:16. Should you be using the function parameter of the current color to set the new color? A conditional test there looks like it could potentially be based on stale colors

Thanks!

Pedro, wiill you please make a video on unit/integration testing?

Ótima didática!

hey pedro what are you using to edit videos ?

Good stuff

Thanks dude

Hey Pedro, would love to see a redux-thunk integration to continue on with your redux-toolkit series! Thanks

Great Knowlagable video, Please make more video on NextJs

Hi Pedro. Thanks for the video. I was checking on youtube about how to document your react app with Jsdoc but I didn’t see any videos in good quality. That might be another suggestion if it interests you. Thanks again.

I think for handling big forms useful Is useReducer hook

Pedro, in a larger project do you usually separate compenents in other folders? Or how do you manage it when it has a lot of components? Thanks!

Hi @PedroTech there 2 videos related to Redux toolkit. Basics with redux toolkit and crud also. But for big projects the structure is complicated. there are optional reducers. store is created separate. services also used to get backend data. Have you made any video related to advance redux toolkit ? Or will you have plan to make one? Please reply. Waiting anxiously . Thanks

Hi Pedro. In the third Best Practice, if I make the inputs 2-way-bind to the state, don't both ways violate the first Best Practice?

Please make a video on best practices to organise a bigger project code. Like how to setup layout, routes, pages, components..

While propTypes are good for debugging at run time, you really want type checking in place so that you're warned about such issues while you're writing code. That's where you need TypeScript or Flow if your want to incrementally add type safety to your JS project

hii sir , separating into different component is ideal but what if we want to share state between components.. I mean like having parent component ( form ) with different child component like child1 (inputs for personal data) , child2( inputs for team members ) , child3 ( inputs for work & status updations ) and we need to share those states to parent on submit..

سوف اكتب هذا بلغتي انت عظيم يا فتى استمر في التقدم و الشروحات العظيمة 💪🏼

Awesome.

cool brooo

Could you make a video with stripe for node and react?

Can you please tell me what is the performance benefits of splitting the state into name, email and age ?

Você é Brasileiro né mano? Seu sobrenome entrega kk to aprendendo mto com seus videos. Obrigado por ajudar agnt!

Finally watched your video after a long time 🙌 phewww!!

You can make video on how to use Google api with react ( everything related to google api).

Hi sir please make a video for handling many props drilling.20 or 30 props

Great !!!!!!!!

Awesome

Any chance you can make a video how to enable PropTypes in Eslint?

Hey pedro aweome video amazing practice , one whing i wanna mention is can you make a video that best react porjects make us cool at react

can you explain about about which forms can we use, currently i am using react-reative-forms

Can you make a video on error handling in React please? 😄

thnks

Hi Pedro, for the timestamp in the description, if u change the | symbol to a - instead, it’ll automatically add those timestamp in the video ;)

Fala Pedro! Estou estudando e o que me faz decidir ou não aplicar algo no meu projeto é a performance. Por exemplo, no Form que você postou usando e.target.value e setando States faz o componente renderizar, impactando performance, então eu uso a lib ''react-hook-form'' que faz um track dos inputs sem precisar mudar States e renderizar o component, impactando performance. Tem alguma outra lib ou métodos que você prefere usar por conta da performance da aplicação? Faz um vídeo sobre performance! Valeu :)

Can you please build a complete responsive react project with bootstrap and little css

man, if you need to split a form state into multiple states to keep it performant, i think there are other parts of your form to optimize.... How big is your form? 2.5M inputs?

Nextjs tutorial please. Thanks a lot 👍

Hi Pedro, Very informative and nice video. Please 🙏 don’t take it as a critique but constructive feedback to make your videos better. You are using the mouse to highlight code too much to the point it is slightly distracting even at normal speed. I like to watch videos at 1.5 speed and it the mouse highlighting can get very distracting and slightly irritating. Try to minimise highlighting with the mouse to the minimum or necessary. For example, the fragment section you were explaining returning siblings you kept on highlighting the tags multiple times but it was already explained that they are siblings. I liked the video and really really appreciate the video and please take this as a recommendation and not a critique.

Can you share the official doc from React team in regards to 9:00 part?

10:50 you could just make it as a form and get fields values onSubmit

propsType no more comes with React, need to install separately using npm. Predro your performance based and best practices video really helpful. I learnt a lot from this channel.

Hi Pedro.... Can you drop one video for webpack.config.js clear explanation??

A video about testing in react

15:27 "Age is a number" 💀

Thanks Pedro. This was very informative . Please can you do a video on testing custom form inputs? Thanks

It was good.

❤️❤️❤️❤️❤️❤️

just use a form project to handle inputs... typescript is a hard requirement.

I'm not agree with the practice to separate same essence data by difference useState collections. I do it only when it is difference essences. For example: const [wordState, setWordState] = useState({ name: "", translation: "", type: "" }); const [modalState, setModalState] = useState({ show: true, text: "" }); Because another way it will be a mess: const [wordNameState, setWordNameState] = useState(""); const [wordTranslationState, setWordTranslationState] = useState(""); const [wordTypeState, setWordTypeState] = useState(""); const [modalShowState, setModalShowState] = useState(true); const [modalTextState, setModalTextState] = useState(""); Too many variables, hard to read. I also wanted to notice that there is also a good practice common for all programming to name variables the most understandable way. So looking into my example the variable with the name wordState is much clearer than if it could be just word, because word can be only text, it can come as a prop and here you know for sure it's a state var and setWordState is a setter of this var.

Why not just use a reducer rather than multiple useStates hooks?