Coding

ReactJS Basics – #10 Stateless Components

2 years ago
  • 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