0:21 - "Use functional components" - Cam Jackson 0:58 - "Keep your components small" - Randy Coulman 2:15 - "Understand how to handle 'this'" - Cory House 4:00 - "Use a function in 'setState', not an object" - Sophia Shoemaker 4:38 - "Utilize prop-types" - Adam Jahr (None other than the guy who made this video) 5:11 - "Use React Developer Tools." - Brian Gates
Pro tip: don’t try to create large reusable components, in one day you will find yourself trying to understand what happens there. Only small components like buttons, inputs and other parts of interface can be really reusable.
This video is BEAUTIFULLY illustrated, + the voice cadence background music separates it from the monotone style of others. The content is so relevant, and illustrations are INCREDIBLY useful and beautiful. Great job!!!
One useful tip.Never use use index of array as a key when you map data to list. It is better to use unique id as a key. Because if you need to add new element as a first element. React will compare it with previous key and react won't see the diiference between items and won't rerendered items with similar keys in similar place. If you need to create new list item before saving to server it' woul'd be better to use uuid or something else to create temporary fake id(for ex. `fake_${uuid()}`).
nope. key is only about update-vs-recreate difference(performance thing). so in case mentioned when you insert element into 0 position it will lead all elements are updated. while if using meaningful "key" only element just added will be rendered(and all other will stay untouched). there will be never a case 'won't rerendered'
@@MikeCOYS If you get id from the response data then it's well and good. But there are places where you don't have the id or you don't even make an API call you just iterate over some generated data.
There's another version of setState where you pass in a callback that should be called when the state has actually been updated. the first argument is the state update, the second is the callback. This allows you to change very little code from the version that only has an update, merely passing in what the function should do afterwards. For more information of this kind of async programming, see Continuation Passing Style.
You're right , however it can crash when you have multiple setState's, as you don't know which finishes first. Creating the arrow function before the render is the least problem-causing way .
this.setState has a callback function. In this callback, the state is the data is exactly updated. So then you can do all that you need with actual data from the state. example: this.setState({ id }, () => console.log('do something with this.state.id') );
Also this is Syntax only. Syntax is like the most basic tools you should be able to handle in order to move to patterns and then write clean reusable code imo
Tip 7 : get ready for Hooks, the upcoming feature that will solve existing problems according to React team. It will probably mean that we will say goodbye to classes esp when creating new codes.
When i used that. wow , it became clearner! as a begineer reactjs programmer, that made my life easier, but my projects were all into oldies, so i had problems on adapting the classic react thingy
Great tips, and to add on tip #5, you can use this.state after this.setState as long as you use its second parameter which is a callback function that gets called when the state is set. this.setState({ someFlag: true }, () => this.state.someFlag ? console.log('isTrue') : console.log('isFalse')) // will print 'isTrue'
For cases when you need state - however don't need your stateful component to rerender - shouldComponentUpdate is a GODSEND! It alone will improve your apps performance many fold!
Use promises instead of callbacks. Use async/await keywords. I believe all custom functions/methods should be async by default to avoid potential unnecessary refactor in future. Dont know about possible performance issues. Use Immer library to update complex state by simply overriding object property.
Using a functional component may not be a good choice if you consider the rendering performance. The component re-renders every single time, its parent re-renders. So, I would recommend using React.PureComponent for smaller components which has primitive prop types.
In addition to tipp five you don't need to use proptypes another way is to use interfaces for props and even for the state maybe it is something worth to mention.
Does the avatar class at 2:07 really work? Because you insert as prop props.user and then you want to access props.user.name. Wouldn't it result in can not read property of undefined? Because you should use props.name??
No. The Comment component is passing the user object to the UserInfo component and the UserInfo component is passing the same user object to the Avatar component so Avatar has access to the user object that has a property 'name'. props does not become the user object. props is an object that has the user object as a property. does that make sense?
Stop using setState for anything but internal micro-state of the GUI (for example: input has value state, when onChange triggers, you should copy this internal value state to the proper place into the real store). This way you keep the performance. For everything else, use mobx-state-tree (MobX upgraded into a structure to make it as robust as redux without the useless boilerplate and copy pasting of redux). Then you just trigger (onChane) an action directly on the store with value as the parameter -> gets written to the store, then automatically updated in the GUI (by simply wrapping the functional component into a mobx-react observer).
If you have a template (functional component) then just pass through the props. Let the template decide what you need out of props. Also use Redux. With Redux you won't ever need to deal with setState.. well mostly. React + React-Redux + Redux-Act = Your best Friend.
Hello. Thanks for sharing. I have a question regarding tip No.1 and all others. You recommend to use functional components, but using React classes in the following tips. Could you clarify when it is necessary to use classes if at all, and how to manage data within an app if not through states?
Use functional components when you don's store data on this.state and only use the received props. Usually stateful components are called 'containers', and stateless components are called 'components'. You use the containers for state management. Redux is a big higher order components which does state management.
@@MisterCuriusController Vue and React are both front end frameworks that allow developers to more easily build complex apps. While they accomplish the same objective, the two have different approaches and techniques, so looking at what people are doing in react can give vue developers new ideas/perspectives.
if only I had seen this video when I started with react everything could have been different. I've worked with React for a year and 5 months, I learned this tips and some "good practices" by try and error. Now with getDerivedStateFromProps it became a little bit tricky because nobody had establish a good practice.
at @3:30 case, it's a case when logMessage doesn't require args, in case you do, simply write arrow function in onClick props, something like onClick={() => this.logMessage(arg1, arg2 ....)}
*EDIT:* My apologies for the heads up. I think it would be the same as a regular function. For example: logMessage = (message) => { console.log(message); } Then in render method: { this.logMessage(message) } *NOTE:* In Babel, you may need the package *@babel/plugin-proposal-class-properties* to transform arrow functions inside classes.
If you want to pass arguments to a function the best way to do it is by using props of the component. You can checkout this gist to see an example: gist.github.com/frankrod/4e3c01fb2f8f20b3ca0474ec512dece7
Nice! I use all of these tips on a daily basis, *except* #4 (3:58). I didn't know functions in _this.setState_ was a thing. The no-guarantee of instant state change is because _setState_ is asynchronous, right?
They’re more “common sense” than pro tips. It depends on the situation to use what’s best, but he makes it sound like you should only use the one he points out. One example perhaps he should also list the disadvantages but he doesn’t mention any. Arrow class functions is good but not so much when you’re trying to mock it in a test.
I've literally been a react dev for 10 days, having never used it before that, and I've figured out all but functional components and functional state set on my own. I was looking to improve, not be told what every tutorial tells you.
For number 2, say you never end up using the 3 smaller components that you extracted out of the 1. Isn't this just complicating things in order to follow React 'rules'? You have code spread across 3 components (files) now instead of 1.
Hey thanks for your tips!. I'm kind of new into the react world and i'm having a little bit of trouble with components and functional components. I'm using redux to handle application state but the problem is that every time an action gets called, all child component gets rerendered and it's causing me some performance issues. I solved this by using pure components to avoid unnecesary renders but i don't know if there's a cleanner way to handle it. What do you think, is there a better solution?, because almost every post i read it says that i should stay away from pure components but no idea why. Thanks!
Tip 3: You can install babel plugin transform class properties (babeljs.io/docs/plugins/transform-class-properties) then you don't need to bind this in ES6 classes. Right?
You can utilize that plugin to define properties inside of class definitions themselves as static class properties. Don't forget to update your .babelrc file with that plugin.
Yes. But now you can scrap the "if you don't need life cycle methods" part, because via hooks there are possibilities to emulate life cycle methods easily.
aziz as CRA is great for beginners. If you just want to do something that can be done with a template, or want to make something quickly, then go ahead. When you learn more about webpack and other tooling its worth doing something else. Maybe try ejecting from a CRA app, or try making your own configuration.
1:56 that in my opinion is part of what's wrong with react "developers". That is poor code. You've now coupled your 2 "reusable" components to the data structure and it is no longer very reusable at all. Just because you can write code doesn't make you a developer. Think about the long term effect of things you do and you'll avoid poor code like that.
I know it's a bit late but.. WTF are you talking about? The 2 components that he separated is still reusable. You had a monologue of how "bad" are the other developers yet you didn't explain shit. People like you are toxic to work with.
tip 4 got me confused. Does this actually change the state key value? Why does is seem like your just changing the key value to its previous value? Also, what is the use of props parameter if it not being used? Sorry im a bit confused here and this seems like a useful thing to know.
You can do like so: return {...previousState, toUpdate: props.whatYouWant} Then you ensure you only change what you want and let the remainder of the state be whatever it might become.
Here's a really simple demo with some comments. codesandbox.io/s/32kznjxkx6 If you do React dev for a while you'll 100% run into wanting to adjust state AFTER some other state has been modified, and the setState(prevState => (...)) thing is a really convenient way to do it. Regarding the signature, setState can accept a POJO, or a function that returns a POJO.
@@CoryTheSimmons For this specific case, updating state after another state update, it's good to know that setState also has a callback function, to be sure the previous state changes are already applied: // this.state.toChange === 1 this.setState( (prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 }), () => { this.setState((prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 })) }, ) // this.state.toChange === 3 -> but if you do this too much, you run into callback hell
refactor unnecessary arrow functions to class methods to minimalize memory leaks Do not modify props directly. Can cause performance issues. Do not use service container. Import your services directly from file where export is defined. E.g.: "export const myService = new MyService();" Globalize your component state using Redux.
i mean, pro tips because he's a professional developer?? because i'm started react about 4 days now, and just for reading know most of it but, i should say, it's a great video
0:21 - "Use functional components" - Cam Jackson
0:58 - "Keep your components small" - Randy Coulman
2:15 - "Understand how to handle 'this'" - Cory House
4:00 - "Use a function in 'setState', not an object" - Sophia Shoemaker
4:38 - "Utilize prop-types" - Adam Jahr (None other than the guy who made this video)
5:11 - "Use React Developer Tools." - Brian Gates
Pro tip: don’t try to create large reusable components, in one day you will find yourself trying to understand what happens there. Only small components like buttons, inputs and other parts of interface can be really reusable.
This video is BEAUTIFULLY illustrated, + the voice cadence background music separates it from the monotone style of others. The content is so relevant, and illustrations are INCREDIBLY useful and beautiful. Great job!!!
One useful tip.Never use use index of array as a key when you map data to list. It is better to use unique id as a key. Because if you need to add new element as a first element. React will compare it with previous key and react won't see the diiference between items and won't rerendered items with similar keys in similar place. If you need to create new list item before saving to server it' woul'd be better to use uuid or something else to create temporary fake id(for ex. `fake_${uuid()}`).
nope. key is only about update-vs-recreate difference(performance thing). so in case mentioned when you insert element into 0 position it will lead all elements are updated. while if using meaningful "key" only element just added will be rendered(and all other will stay untouched). there will be never a case 'won't rerendered'
You can also use Date.now() as key
@@nageshwarreddy4530 That doesn't work because Date.now() will be the same for all the items in the list. Computers are fast :)
@@MikeCOYS If you get id from the response data then it's well and good. But there are places where you don't have the id or you don't even make an API call you just iterate over some generated data.
Issues would come with sort anyways so an id or a way to uniquely identify is always an option depending on the exact requirement
Nice video. The most important tip that I can provide for react devs: use TypeScript. Always. All the time. It will prevent so many potential errors.
I'm starting to learn React now, do you think I should learn it with TypeScript already?
There's another version of setState where you pass in a callback that should be called when the state has actually been updated. the first argument is the state update, the second is the callback.
This allows you to change very little code from the version that only has an update, merely passing in what the function should do afterwards.
For more information of this kind of async programming, see Continuation Passing Style.
You're right , however it can crash when you have multiple setState's, as you don't know which finishes first. Creating the arrow function before the render is the least problem-causing way .
At what minute do the pro tips start?
Spicy
Jajajaja
Use function in setState only when state update requires prev state. Otherwise use object in setState
not really. setState is a async function. some case we need to use function in setState
I see you are a man of culture, rocking that Opeth tee
this.setState has a callback function. In this callback, the state is the data is exactly updated. So then you can do all that you need with actual data from the state.
example: this.setState({ id }, () => console.log('do something with this.state.id') );
Also this is Syntax only. Syntax is like the most basic tools you should be able to handle in order to move to patterns and then write clean reusable code imo
Thanks.
Tip 7 : get ready for Hooks, the upcoming feature that will solve existing problems according to React team. It will probably mean that we will say goodbye to classes esp when creating new codes.
When i used that. wow , it became clearner! as a begineer reactjs programmer, that made my life easier, but my projects were all into oldies, so i had problems on adapting the classic react thingy
I learned react after hooks were introduced, so I never even learned class components
Don forget to use hooks to keep it even more simple, it didn't mention it because the video is old :).
Thank you so much. Can u do next video about prevent additional ( not required) rerendering? Please.
When should you use class based components instead of functional components
They're just old, and less updated
React hooks is the best option 😍 for the functional components.
Great tips, and to add on tip #5, you can use this.state after this.setState as long as you use its second parameter which is a callback function that gets called when the state is set.
this.setState({ someFlag: true }, () => this.state.someFlag ? console.log('isTrue') : console.log('isFalse')) // will print 'isTrue'
that's right :)
With headphones, this video looks perfect
Just use Typescript insteqr of prop-types. It will help you prevent type errors over all...not just in props...
@Vue Mastery what software do you use for the animations on your code snippets? e.g. from 1:37 to 2:11
This is all I've wanted to know about since I'm stuck on my project........ ....... thanks Adam!!!!!!!! your voice's so good
Nice content, I liked tip 4. Thanks for sharing
well done. short, sweet, informative. bongos were a little distracting
Very nicely said! Good work. Just one note - React is a library.
For cases when you need state - however don't need your stateful component to rerender - shouldComponentUpdate is a GODSEND! It alone will improve your apps performance many fold!
I've been using react for less than a week and use all these tips :)
Ps. Still prefer angular over react
5 months later, do you still prefer Angular? Just curious because I'm an Angular guy who recently is getting into React
Nice video, more than I expected
These are some basics you need to learn before jumping into a project, so they're not pro tips. :-|
great idea to explain the tricks....quick fast and effective way....thanks bro....
Use promises instead of callbacks. Use async/await keywords.
I believe all custom functions/methods should be async by default to avoid potential unnecessary refactor in future. Dont know about possible performance issues.
Use Immer library to update complex state by simply overriding object property.
logMessage=()=>{
//blablabla
}
works without binding 3:15
Good tips! Tip #5 not needed of you use Typescript
Tip 4 is literally a PRO Tip.
Thank you.
Using a functional component may not be a good choice if you consider the rendering performance. The component re-renders every single time, its parent re-renders. So, I would recommend using React.PureComponent for smaller components which has primitive prop types.
In addition to tipp five you don't need to use proptypes another way is to use interfaces for props and even for the state maybe it is something worth to mention.
Does the avatar class at 2:07 really work? Because you insert as prop props.user and then you want to access props.user.name. Wouldn't it result in can not read property of undefined? Because you should use props.name??
No. The Comment component is passing the user object to the UserInfo component and the UserInfo component is passing the same user object to the Avatar component so Avatar has access to the user object that has a property 'name'.
props does not become the user object. props is an object that has the user object as a property. does that make sense?
@@tjgxxx Thanks. I had to write out the avatar code sample to understand it: jsfiddle.net/3tcxjof1/
Awesome tips for a beginner like me. thanks
prop-types is useful but i prefer to use a superset of JS like typescript to declare component props using interface
Great. Typescript should be the future of client-side scripting. It seems that you have been successful in using typescript in React.
Which software do you use to edit the videos?
Time to learn react more in 2021
Stop using setState for anything but internal micro-state of the GUI (for example: input has value state, when onChange triggers, you should copy this internal value state to the proper place into the real store). This way you keep the performance. For everything else, use mobx-state-tree (MobX upgraded into a structure to make it as robust as redux without the useless boilerplate and copy pasting of redux). Then you just trigger (onChane) an action directly on the store with value as the parameter -> gets written to the store, then automatically updated in the GUI (by simply wrapping the functional component into a mobx-react observer).
Andraž Kos I was leaning towards mobx for React dev but this sounds interesting.
If you have a template (functional component) then just pass through the props. Let the template decide what you need out of props. Also use Redux. With Redux you won't ever need to deal with setState.. well mostly. React + React-Redux + Redux-Act = Your best Friend.
Eugen Hildt redux is hell.
Can I use static methods od a class to define prop types instead?
Hello. Thanks for sharing. I have a question regarding tip No.1 and all others. You recommend to use functional components, but using React classes in the following tips. Could you clarify when it is necessary to use classes if at all, and how to manage data within an app if not through states?
Eduards V He recommends using functional components when the component is stateless. One of the best ways to manage state is by using Redux.
or if it doesn't use life cycle methods
Use functional components when you don's store data on this.state and only use the received props. Usually stateful components are called 'containers', and stateless components are called 'components'. You use the containers for state management. Redux is a big higher order components which does state management.
Useful information. Thanks!
The Vue channel's most viewed video is about React :)
I see the point of functional components, but I prefer extending from PureComponent in favor of performance
You shared very useful tips.. 👍
We'd like to see more such of..
Thanks
Great video! What program did you use to animate and write out the code?
Thanks! Animations are done in Keynote.
This was a very well done video. You should be proud.
I just subscribed! I am very new to reactjs and i want to start at the correct way. Thanks
wait why a video about react in this Vue channel?
Good 1 :P
But that's their company name LOL
same question
@@farzadsole3784 oh I see, Im not angry or hate react or vue. Im just curios why.. So Vue and React are the same company?
@@MisterCuriusController Vue and React are both front end frameworks that allow developers to more easily build complex apps. While they accomplish the same objective, the two have different approaches and techniques, so looking at what people are doing in react can give vue developers new ideas/perspectives.
if only I had seen this video when I started with react everything could have been different. I've worked with React for a year and 5 months, I learned this tips and some "good practices" by try and error.
Now with getDerivedStateFromProps it became a little bit tricky because nobody had establish a good practice.
do you have a course? im in lambda and react is really making me nervous
Thanks, it's really helped me now!
Nice ! Important tips...but I don't know if they are pro tips !
How to pass arguments to function in case 3:30 ???
at @3:30 case, it's a case when logMessage doesn't require args, in case you do, simply write arrow function in onClick props, something like onClick={() => this.logMessage(arg1, arg2 ....)}
In this case it creates a new function for each rendering, that's no good, But I don't see any idea for workaround that.
@@RagazzoKZ you can write like
logMessage = (args) => () => {
···
}
And in render method
this.logMessage(args)
*EDIT:* My apologies for the heads up.
I think it would be the same as a regular function.
For example:
logMessage = (message) => {
console.log(message);
}
Then in render method:
{ this.logMessage(message) }
*NOTE:* In Babel, you may need the package *@babel/plugin-proposal-class-properties* to transform arrow functions inside classes.
If you want to pass arguments to a function the best way to do it is by using props of the component.
You can checkout this gist to see an example: gist.github.com/frankrod/4e3c01fb2f8f20b3ca0474ec512dece7
I’m confused. I thought you could use state (useState) in a functional component. What am I missing
Thats a hook
Video was made in 2017. useState (hooks) were released in 2018.
3.02 really you dont need bind that function ?? woooww i need to try it
Great tips for beginners
Nice! I use all of these tips on a daily basis, *except* #4 (3:58).
I didn't know functions in _this.setState_ was a thing. The no-guarantee of instant state change is because _setState_ is asynchronous, right?
Yep that's correct!
now, i know!
I tried callback and functions but its still asynchronous ... :/
medium.com/@voonminghann/when-to-use-callback-function-of-setstate-in-react-37fff67e5a6c Check this article and you'll get it!
finding out about that function in setState was the best thing for me.
Great stuff here. May I ask what video editing software you used, your transitions and code transformations/code splitting are very professional.
Thank you :) A combination of Keynote and Screenflow were used to create this video.
With react hooks (like useState) the .this boilerplate is going to be a thing of history.
Very helpful video!
Very good tips, thank you.
Knowing when to break things apart and not get too carried away is tough for me.
Wow! Amazing tips... Great vid thanks!
But after hooks , they recommend to use functional components instead of class components. Isnt that true?
Great video man!
Mmm i don’t know if these are “pro” tips
yah these definitely seem pretty standard and also opinionated.
They’re more “common sense” than pro tips. It depends on the situation to use what’s best, but he makes it sound like you should only use the one he points out.
One example perhaps he should also list the disadvantages but he doesn’t mention any. Arrow class functions is good but not so much when you’re trying to mock it in a test.
I've literally been a react dev for 10 days, having never used it before that, and I've figured out all but functional components and functional state set on my own. I was looking to improve, not be told what every tutorial tells you.
do you have another alternatives to "pro" tips? :)
This was super useful!!
Can I get some documentation on this ? It would be really helpful
Who cares about the video when the music so damn good. I'm dancing sice like forever!
Does VueMastery have React training too then?
We made this video before we chose to focus exclusively on Vue.js :)
thanks brother for the tips! good video!
Hello, thank you for your tips !
Nice vídeo, but most of the pro tips van be found on the “FUNDAMENTALS” section of the react docs
😂😂
And that's the power of react docs hahah
For number 2, say you never end up using the 3 smaller components that you extracted out of the 1. Isn't this just complicating things in order to follow React 'rules'? You have code spread across 3 components (files) now instead of 1.
Hey, do you have some tip about using something like proptypes for react context api?
use Redux. Bytheway, to make your code cleaner you can use this import { string, number, func... } from 'prop-types;'
Greate tips 👍👍👍
Hey thanks for your tips!. I'm kind of new into the react world and i'm having a little bit of trouble with components and functional components. I'm using redux to handle application state but the problem is that every time an action gets called, all child component gets rerendered and it's causing me some performance issues. I solved this by using pure components to avoid unnecesary renders but i don't know if there's a cleanner way to handle it. What do you think, is there a better solution?, because almost every post i read it says that i should stay away from pure components but no idea why. Thanks!
Emilio Jeldes I am more of a vue person but it sounds like you may need to key your child components.
Great Information
How did you made these presentations?
Can you give me suggestion please?
He's using keynotes
awesome work!
Great stuff bro! Thanks!
what music is playing in BG ?
Tip 3:
You can install babel plugin transform class properties (babeljs.io/docs/plugins/transform-class-properties)
then you don't need to bind this in ES6 classes. Right?
You can utilize that plugin to define properties inside of class definitions themselves as static class properties. Don't forget to update your .babelrc file with that plugin.
thank for video ,
It is very useful
Very usessful, Thanks
Now you know how to React.
is functional components advise still relevant in 2019?
Yes. But now you can scrap the "if you don't need life cycle methods" part, because via hooks there are possibilities to emulate life cycle methods easily.
U've made my day!
Thank you for the video. I have been looking for something like that.
Can you do a video :) on when to use create-react-app VS using webpack?
aziz as CRA is great for beginners. If you just want to do something that can be done with a template, or want to make something quickly, then go ahead. When you learn more about webpack and other tooling its worth doing something else. Maybe try ejecting from a CRA app, or try making your own configuration.
1:56 that in my opinion is part of what's wrong with react "developers". That is poor code. You've now coupled your 2 "reusable" components to the data structure and it is no longer very reusable at all. Just because you can write code doesn't make you a developer. Think about the long term effect of things you do and you'll avoid poor code like that.
I know it's a bit late but.. WTF are you talking about? The 2 components that he separated is still reusable. You had a monologue of how "bad" are the other developers yet you didn't explain shit. People like you are toxic to work with.
Props-types, what about Typescript instead?
Use object destruct pattern
Use default valuse library
Thanks, Justin.
PureComponent > Stateless components in terms of performance. The latter will be re-rendered every time the parent changes.
stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
Pretty good tips, I personally prefer Vue.
tip 4 got me confused. Does this actually change the state key value? Why does is seem like your just changing the key value to its previous value? Also, what is the use of props parameter if it not being used? Sorry im a bit confused here and this seems like a useful thing to know.
Also, will tip 4 work if you are completely changing the key value?
You can do like so:
return {...previousState, toUpdate: props.whatYouWant}
Then you ensure you only change what you want and let the remainder of the state be whatever it might become.
Here's a really simple demo with some comments. codesandbox.io/s/32kznjxkx6
If you do React dev for a while you'll 100% run into wanting to adjust state AFTER some other state has been modified, and the setState(prevState => (...)) thing is a really convenient way to do it.
Regarding the signature, setState can accept a POJO, or a function that returns a POJO.
Thanks for that demo Cory!
@@CoryTheSimmons For this specific case, updating state after another state update, it's good to know that setState also has a callback function, to be sure the previous state changes are already applied:
// this.state.toChange === 1
this.setState(
(prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 }),
() => {
this.setState((prevState, props) => ({ ...prevState, toChange: prevState.toChange + 1 }))
},
)
// this.state.toChange === 3
-> but if you do this too much, you run into callback hell
Pro Tip - Never use
"npx create react app" instead use
"npm create vite@latest"
To create an react application
refactor unnecessary arrow functions to class methods to minimalize memory leaks
Do not modify props directly. Can cause performance issues.
Do not use service container. Import your services directly from file where export is defined. E.g.: "export const myService = new MyService();"
Globalize your component state using Redux.
i mean, pro tips because he's a professional developer??
because i'm started react about 4 days now, and just for reading know most of it
but, i should say, it's a great video