ReactJS Basics – #10 Stateless Components

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

You may also like