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
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.
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.
I think that when you are looking at a state that will only be needed in a certain component you will be looking to use useState, if you are going for a more global state management approach, you could do a setup with reducers and context providers. But if you are new to React, try to understand the basics first and go from there. It's a lot if you try to learn it all at once.
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!
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!
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.
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! ❤️
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
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 ❤
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
If it is a reusable component like a button or an input, I store it in a components folder. But usually i have a pages folder with a bunch of folders related to each page in my website. I did a video on react folder structures if you are interested :)
@@quofintech9200 w/ on the job projects, you'll have some hierarchy. Like Pedro said, typically 'pages' has its own separate folder which stores page-level components (Home, Profile, Settings). Components can be broken down into a host of multiple sub-directories. Have custom form components? You can create a Form directory, and store form related components: * components/form/Button.js * components/form/Dropdown.js You have several graph components? (PieChart, BarChart, LineGraph) Store it in a folder called 'graphs. * components/graph/PieChart.js * components/graph/BarChart.js File structure and organization is vital when managing large-scale applications.
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!!
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.
Sorry about that hahaha I always try to take criticism as constructive and I appreciate your comment! I do that because I am thinking what I am going to say hahaha but I will try to stop :) I might get like a fidget thing to play with while explaining
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.
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.
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 :)
Boa Kleyton, para projectos grandes eu uso a lib Formik. Eu tenho videos tanto sobre formik quanto sobre react-hook-form. Os dois são muito bons! O exemplo no video foi só para explicar mesmo
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.
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?
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..
DONT QUIT! You are not a noob hahaha we all feel imposter syndrome. I don't consider myself amazing at react, although I know some of my subs probably think I am. It is all about perspective. Just continue learning :)
Dude, its really really beginner level that s not gonna make you a pro, so i guess its for students who r getting to know react or javascript or web development. But ofc the video could have been useful to others who just started React or idk.
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
![เจ็บที่ยังฮัก - ม่อน วรวิทย์ [ Official Mv ] จอนนี่มิวสิค](http://i.ytimg.com/vi/KALIGSRSjFs/mqdefault.jpg)
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
Thanks for saving me 20 unnecessary min!
@@hoaxygen lol
Typechecking by using proptypes. simply amazing.
Everything's clear!!! Your voice, your lessons!!! Thank you so much
whoa, the effects in this video were really cool! great video, pedro!
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.
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.
I think that when you are looking at a state that will only be needed in a certain component you will be looking to use useState, if you are going for a more global state management approach, you could do a setup with reducers and context providers. But if you are new to React, try to understand the basics first and go from there. It's a lot if you try to learn it all at once.
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
Good advices! Thanks.
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.
everything that is related to "best practices", clean coding, simplifying is very useful and hopefully not too complicated to make into a video.
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!
Boaa! Fico feliz em saber que estou ajudando :)
Thanks bro ❤
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!
just found out about your channel awesome man! i subscribed
Thanks for subbing!
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.
never knew about proptypes thankyou for the exposure 😊😊
سوف اكتب هذا بلغتي
انت عظيم يا فتى استمر في التقدم و الشروحات العظيمة 💪🏼
شكرا لك! زميلتي في السكن تتحدث اللغة العربية أيضًا ، لذا أحاول أن أتعلمها :)
@@PedroTechnologies شكراً لك
@@PedroTechnologies yallaa
Nice tips and tricks from Brazil to World :)
Awesome information!!
Glad it was helpful!
Thank you for this amazing video PEDRO! You always motivated me to learn more deep dive about React.
Your video is informative. First topic is new addition to my knowledge and others also help remind me to keep away from mistakes.
Thanks for the video! Praying you pass your courses.
senangnya menemukan channel sepert ini. terima kasih.
Like your hustle spirit.... keep going. Thanks for sharing this video.
Great video it helps me a lot.
Thank you, Pedro!
Pedro, wiill you please make a video on unit/integration testing?
Great video. Useful stuff. Thanks a lot.
Really good tips! Thanks for share!
Thank you for this video! Keep up the good work!
Thank you!
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! ❤️
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
Thank you so much!
I think for handling big forms useful Is useReducer hook
Great video Pedro, thanks!
Glad you liked it!
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 ❤
Fantastic! Glad I could help :)
Thanks pedro, its a great video, I enjoy it
Amazing!! Thanks a lot
Glad you liked it!
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
Love these sorts of video though, so please keep making them!
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!
WoW!!! Learnt a lot here :D
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!
If it is a reusable component like a button or an input, I store it in a components folder. But usually i have a pages folder with a bunch of folders related to each page in my website. I did a video on react folder structures if you are interested :)
I think he has a video explaining how he separates components
@@PedroTechnologies I will take a look, thanks a lot!
@@mohammedjoubba318 Thanks Mohammed!
@@quofintech9200 w/ on the job projects, you'll have some hierarchy. Like Pedro said, typically 'pages' has its own separate folder which stores page-level components (Home, Profile, Settings).
Components can be broken down into a host of multiple sub-directories. Have custom form components? You can create a Form directory, and store form related components:
* components/form/Button.js
* components/form/Dropdown.js
You have several graph components? (PieChart, BarChart, LineGraph) Store it in a folder called 'graphs.
* components/graph/PieChart.js
* components/graph/BarChart.js
File structure and organization is vital when managing large-scale applications.
Please make a video on best practices to organise a bigger project code. Like how to setup layout, routes, pages, components..
very useful video man, thank you
Really amazing content! thank you so much, really useful tips
This was a fantastic video! Very beneficial and enjoyable at the same time. Keep it up!
Awesome tutorial
You can make video on how to use Google api with react ( everything related to google api).
Great Knowlagable video, Please make more video on NextJs
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 ;)
Thank you! For some reason this time it didn't automatically put but the way i did it usually work. But thank you for pointing it out :)
@@PedroTechnologies and you also have to add a 0:00 timestamp I believed
Hey Pedro, would love to see a redux-thunk integration to continue on with your redux-toolkit series! Thanks
Wow! Great video 🎉
Very useful Pedro, Thank you very much 🎉🙏
Hi sir please make a video for handling many props drilling.20 or 30 props
really helpful stuff thanks
Thanks!
Você é Brasileiro né mano? Seu sobrenome entrega kk to aprendendo mto com seus videos. Obrigado por ajudar agnt!
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!!
Any chance you can make a video how to enable PropTypes in Eslint?
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.
Sorry about that hahaha I always try to take criticism as constructive and I appreciate your comment! I do that because I am thinking what I am going to say hahaha but I will try to stop :) I might get like a fidget thing to play with while explaining
Thanks dude
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
10:50 you could just make it as a form and get fields values onSubmit
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.
Great video!
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.
Can you make a video on error handling in React please? 😄
Can you please build a complete responsive react project with bootstrap and little css
can you explain about about which forms can we use, currently i am using react-reative-forms
Hi Pedro.... Can you drop one video for webpack.config.js clear explanation??
Nextjs tutorial please.
Thanks a lot 👍
Could you make a video with stripe for node and react?
hey pedro what are you using to edit videos ?
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?
just use a form project to handle inputs...
typescript is a hard requirement.
thanks.
Can you share the official doc from React team in regards to 9:00 part?
TS:
let NAME: TYPE = VALUE
JS:
/** @type { TYPE } */
let NAME = VALUE
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 :)
Boa Kleyton, para projectos grandes eu uso a lib Formik. Eu tenho videos tanto sobre formik quanto sobre react-hook-form. Os dois são muito bons! O exemplo no video foi só para explicar mesmo
@@PedroTechnologies Vou ver o do Formik 🥰
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.
Good stuff
Ótima didática!
Can you please tell me what is the performance benefits of splitting the state into name, email and age ?
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?
Thanks Pedro. This was very informative . Please can you do a video on testing custom form inputs? Thanks
A video about testing in react
Awesome.
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..
cool brooo
15:27 "Age is a number" 💀
I didn't mean it that way lmaoo
Finally watched your video after a long time 🙌 phewww!!
Welcome back :) You're one of the OG subs!!!
To be honest, I knew and implement these steps in day to day development but I still feel like a noob that's why I'm quitting 😂😂
DONT QUIT! You are not a noob hahaha we all feel imposter syndrome. I don't consider myself amazing at react, although I know some of my subs probably think I am. It is all about perspective. Just continue learning :)
Dude, its really really beginner level that s not gonna make you a pro, so i guess its for students who r getting to know react or javascript or web development.
But ofc the video could have been useful to others who just started React or idk.
thnks
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
Awesome
good luck for exams and fyp
Why not just use a reducer rather than multiple useStates hooks?
is not very semantic, thank you
It was good.
Olhei o teu LinkedIn pra ter certeza que é BR. Parabéns, cara. Inglês perfeito e bom conteúdo. Acabei de me inscrever pra te dar uma força também.