- 00:00:00 now that we learned about these state of
- 00:00:03 components there's another thing I have
- 00:00:07 to add due to that our home component
- 00:00:10 here uses the state in several places
- 00:00:13 here any set timeout function and here
- 00:00:16 and you own make older method when we
- 00:00:18 click the button the header component
- 00:00:20 doesn't use state it's a component where
- 00:00:24 it is safe never changes for such
- 00:00:27 components we can create them in a
- 00:00:29 different way in a more efficient way
- 00:00:31 efficient seen from a performance
- 00:00:34 standpoint so since this is a component
- 00:00:38 without state we can create it as
- 00:00:40 something which is known as a stateless
- 00:00:43 component that's just a react.js term
- 00:00:46 for a component which well only has
- 00:00:48 props or maybe this component doesn't
- 00:00:50 even have props right now but only has
- 00:00:53 the chance of getting props it has no
- 00:00:55 chance of setting its state because it
- 00:00:57 doesn't have a state because it doesn't
- 00:00:59 need one why do we have such components
- 00:01:02 well generally it's a good practice to
- 00:01:05 use state carefully to take this even
- 00:01:09 further when using read acts which is
- 00:01:12 something I'll come to in my next series
- 00:01:13 you don't use set State at all because
- 00:01:17 state management can really get tricky
- 00:01:20 and react.js in more complex
- 00:01:22 applications for sure and therefore
- 00:01:25 having as many stateless components as
- 00:01:28 possible will make your application
- 00:01:31 perform better and be more manageable by
- 00:01:35 you because changing states in all kinds
- 00:01:38 of components really makes your app
- 00:01:41 unpredictable and therefore stateless
- 00:01:44 components are the key to making it more
- 00:01:46 predictable more testable and perform
- 00:01:49 better again so if you have a component
- 00:01:51 like this one which doesn't need to
- 00:01:53 state well don't use it we have to
- 00:01:56 rewrite it though I'll change class to
- 00:01:59 Const so I'll create a constant which
- 00:02:01 gets exported and then of course I will
- 00:02:05 no longer have my extents keyword here
- 00:02:08 instead I have to assign a value to my
- 00:02:10 Const
- 00:02:11 and this value will be a fat arrow
- 00:02:14 function where the input I get by chair
- 00:02:18 react.js is the props argument here
- 00:02:22 because props are available in a
- 00:02:24 stateless component then this is the
- 00:02:27 function body therefore of course there
- 00:02:29 is no render function anymore and just
- 00:02:31 returning something now and I got too
- 00:02:35 many curly braces so remove one Attica
- 00:02:38 semicolon here and that is a stateless
- 00:02:41 component as you saw wasn't that
- 00:02:43 difficult to refactor it it's just a fat
- 00:02:46 arrow function the end exported as a
- 00:02:49 constant in this case you could export
- 00:02:52 it as a variable but constant makes
- 00:02:54 sense since I'm changing this and that
- 00:02:57 is my state last component now as we get
- 00:03:02 props I can also use them and let's say
- 00:03:05 output props dot Homelink here and then
- 00:03:08 go to my index chairs file and pass home
- 00:03:12 link to it and just gives us a value of
- 00:03:16 home now here I'm passing a string
- 00:03:18 because well if I only pass a string
- 00:03:21 item meaty curly braces and back in the
- 00:03:23 application we see aid works as it did
- 00:03:26 before nothing changed by the looks of
- 00:03:29 it but behind the scenes something
- 00:03:32 changed the header now is a stateless
- 00:03:35 component and no longer uses the state
- 00:03:37 and again remember the reasons I listed
- 00:03:41 a few minutes ago
- 00:03:42 really think about refactoring
- 00:03:44 components to stateless components if
- 00:03:46 you don't need to state