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
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.
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.
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
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.
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!
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.
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 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.
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
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! ❤️
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.
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 ❤
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?
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
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..
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.
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 @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
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, 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
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.
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 :)
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.
Good advices! Thanks.
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.
whoa, the effects in this video were really cool! great video, pedro!
Everything's clear!!! Your voice, your lessons!!! Thank you so much
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.
Thanks bro ❤
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
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.
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 :)
everything that is related to "best practices", clean coding, simplifying is very useful and hopefully not too complicated to make into a video.
Pedro, wiill you please make a video on unit/integration testing?
Nice tips and tricks from Brazil to World :)
سوف اكتب هذا بلغتي
انت عظيم يا فتى استمر في التقدم و الشروحات العظيمة 💪🏼
شكرا لك! زميلتي في السكن تتحدث اللغة العربية أيضًا ، لذا أحاول أن أتعلمها :)
@@PedroTechnologies شكراً لك
@@PedroTechnologies yallaa
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!
never knew about proptypes thankyou for the exposure 😊😊
Thank you, Pedro!
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.
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!
senangnya menemukan channel sepert ini. terima kasih.
just found out about your channel awesome man! i subscribed
Thanks for subbing!
Awesome information!!
Glad it was helpful!
Thanks for the video! Praying you pass your courses.
I think for handling big forms useful Is useReducer hook
Great video. Useful stuff. Thanks a lot.
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.
Hi sir please make a video for handling many props drilling.20 or 30 props
Thanks pedro, its a great video, I enjoy it
Really good tips! Thanks for share!
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!
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 it helps me a lot.
Like your hustle spirit.... keep going. Thanks for sharing this video.
Any chance you can make a video how to enable PropTypes in Eslint?
Amazing!! Thanks a lot
Glad you liked it!
You can make video on how to use Google api with react ( everything related to google api).
Great video Pedro, thanks!
Glad you liked it!
Can you share the official doc from React team in regards to 9:00 part?
can you explain about about which forms can we use, currently i am using react-reative-forms
Thank you for this amazing video PEDRO! You always motivated me to learn more deep dive about React.
WoW!!! Learnt a lot here :D
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! ❤️
Wow! Great video 🎉
very useful video man, thank you
10:50 you could just make it as a form and get fields values onSubmit
Hey Pedro, would love to see a redux-thunk integration to continue on with your redux-toolkit series! Thanks
Awesome tutorial
Great video!
hey pedro what are you using to edit videos ?
really helpful stuff thanks
Could you make a video with stripe for node and react?
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.
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!
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 :)
Please make a video on best practices to organise a bigger project code. Like how to setup layout, routes, pages, components..
Hi Pedro.... Can you drop one video for webpack.config.js clear explanation??
Can you please build a complete responsive react project with bootstrap and little css
Very useful Pedro, Thank you very much 🎉🙏
Can you please tell me what is the performance benefits of splitting the state into name, email and age ?
Really amazing content! thank you so much, really useful tips
Great Knowlagable video, Please make more video on NextJs
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?
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?
This was a fantastic video! Very beneficial and enjoyable at the same time. Keep it up!
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
Can you make a video on error handling in React please? 😄
just use a form project to handle inputs...
typescript is a hard requirement.
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 🥰
Thanks!
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..
Você é Brasileiro né mano? Seu sobrenome entrega kk to aprendendo mto com seus videos. Obrigado por ajudar agnt!
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.
Thanks dude
15:27 "Age is a number" 💀
I didn't mean it that way lmaoo
Why not just use a reducer rather than multiple useStates hooks?
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 @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
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.
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
TS:
let NAME: TYPE = VALUE
JS:
/** @type { TYPE } */
let NAME = VALUE
Good stuff
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
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.
Nextjs tutorial please.
Thanks a lot 👍
Ótima didática!
is not very semantic, thank you
Finally watched your video after a long time 🙌 phewww!!
Welcome back :) You're one of the OG subs!!!
A video about testing in react
Could you please make a videos on redux thunk? Or complete project with redux reduxtoolkit and thunk
Yes!!
@@PedroTechnologies waiting.. 🙂
Why did you make a div with a class of form? Semantically that div could've been a form element to make it PRO :3
cool brooo
good luck for exams and fyp
Awesome.
thanks.
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 :)
thnks
15:27 age is (nothing but) a number :P
Thanks Pedro. This was very informative . Please can you do a video on testing custom form inputs? Thanks