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