Coding

React 16.6 – What’s New? Theory + Practice

  • 00:00:01 hi everyone welcome to this video in
  • 00:00:04 this video we'll have a look at what's
  • 00:00:06 new with react 16.6 there are free very
  • 00:00:10 nice new features and we'll have a look
  • 00:00:11 at each of them with code snippets of
  • 00:00:13 course in this video
  • 00:00:18 react 16.6 brought three new important
  • 00:00:22 features to us the first new feature is
  • 00:00:25 a new method on the react object itself
  • 00:00:27 a memo method this method will help us
  • 00:00:30 with optimizing functional components
  • 00:00:32 and we'll take a closer look in a second
  • 00:00:34 of course the second important new
  • 00:00:37 feature is react lazy another new method
  • 00:00:40 that was added to the top-level react
  • 00:00:42 object and this method helps us with
  • 00:00:46 asynchronously loading components now
  • 00:00:49 this is a first glimpse at the new react
  • 00:00:52 suspense API which is not finished yet
  • 00:00:55 and that's why I won't dive deeply into
  • 00:00:57 it at this point you'll find some
  • 00:00:59 helpful links below the video though in
  • 00:01:01 case you're interested in the end react
  • 00:01:03 suspense is a new API that is gradually
  • 00:01:06 implemented into react that helps us
  • 00:01:09 with asynchronously loading and
  • 00:01:11 rendering data and react lazy is a first
  • 00:01:14 method we can use there and I will show
  • 00:01:16 you what you can do with it in this
  • 00:01:18 video too of course the third important
  • 00:01:20 feature is a new property you can add to
  • 00:01:23 your class-based components a static
  • 00:01:26 property the context type property and
  • 00:01:28 this will help us with accessing context
  • 00:01:31 which is a new API or an API that was
  • 00:01:34 completely revamped with 16.3 and this
  • 00:01:38 API makes it possible to share data
  • 00:01:40 across a component tree without passing
  • 00:01:42 props around this context type property
  • 00:01:46 we can add to child components makes
  • 00:01:48 accessing that context a bit easier and
  • 00:01:51 of course I'll show you an example in
  • 00:01:52 this video too and actually I will start
  • 00:01:55 with that static context type property
  • 00:01:57 what is it and how can it help us well
  • 00:02:00 for that I prepared a little example and
  • 00:02:02 you find a link to that on github below
  • 00:02:05 the video as well so in this attached
  • 00:02:08 example we have a very simple react app
  • 00:02:11 and this react app if we have a look at
  • 00:02:13 the App J's fall in the end uses two
  • 00:02:15 components the login at the profile
  • 00:02:17 component which are really just some
  • 00:02:19 dummy components with no important
  • 00:02:20 content in there we use the react
  • 00:02:24 context there though I do configure my
  • 00:02:27 context here in app KS off context and
  • 00:02:30 the dis in the end
  • 00:02:32 an object with the is off key here which
  • 00:02:36 is false or true because of indication
  • 00:02:38 status is a typical example for data
  • 00:02:40 that you need in multiple components in
  • 00:02:43 your component tree and it also has an
  • 00:02:46 empty toggle all function it's empty
  • 00:02:48 here because I overwrite my entire
  • 00:02:51 default context when I pass it down with
  • 00:02:54 my off context provider here and I set
  • 00:02:57 it to this object here where is off is
  • 00:03:00 taken from my state and toggle off that
  • 00:03:03 function which is part of my context
  • 00:03:05 points add a function in app j s and my
  • 00:03:09 app component and this is by the way a
  • 00:03:11 common pattern for being able to change
  • 00:03:14 data in the context from anywhere in our
  • 00:03:18 component tree because since I include a
  • 00:03:21 reference to the function which is
  • 00:03:23 responsible for updating the context or
  • 00:03:26 in this case responsible for updating
  • 00:03:28 the state which ends up in the context
  • 00:03:30 as you can see here since this is
  • 00:03:32 included in the context itself we can
  • 00:03:34 call it from child components and this
  • 00:03:37 is actually what I'm doing in a log in
  • 00:03:38 component here there I consume my off
  • 00:03:41 context and therefore I imported from
  • 00:03:44 the app file here and then in my off
  • 00:03:46 context here in that render function
  • 00:03:48 which you use with the context API I
  • 00:03:50 have my is off property which is true or
  • 00:03:55 false but I also reference that toggle
  • 00:03:58 off method which was part of the context
  • 00:04:00 object queue changed is off status on
  • 00:04:04 every click and the profiler
  • 00:04:06 I also consumed my context there I can't
  • 00:04:09 change it there I only use T is off part
  • 00:04:12 of my context object to change that text
  • 00:04:15 and if you run that entire project after
  • 00:04:17 running npm install with npm start then
  • 00:04:21 then you should see this page where you
  • 00:04:23 can click login and log out to basically
  • 00:04:25 well toggle that authentication status
  • 00:04:27 with the help of the context api thus
  • 00:04:30 far this is nothing new this is not any
  • 00:04:33 new feature that was added with react
  • 00:04:35 16.6 this is using the context API in
  • 00:04:38 the state we got it in in react 16.3 now
  • 00:04:42 with react 16.6 we got a new
  • 00:04:45 property though which I want to use in
  • 00:04:47 my login component and for that I have
  • 00:04:50 to change this from a functional
  • 00:04:51 component to a class-based one so I'll
  • 00:04:54 change this to login which extends of
  • 00:04:58 course the react component so I'll
  • 00:05:00 actually import this separately here so
  • 00:05:03 extends component and then there I of
  • 00:05:07 course have my render method where I
  • 00:05:09 return and there I return that JSX code
  • 00:05:13 here that would need that closing
  • 00:05:15 bracket for reformat that it looks like
  • 00:05:17 this and of course I should also export
  • 00:05:19 my login class here now and with this
  • 00:05:22 little change I only converted this of
  • 00:05:24 course this still should work as before
  • 00:05:27 because it's still a valid component but
  • 00:05:30 now that this is a class-based component
  • 00:05:32 we can use the new context type property
  • 00:05:36 now it is a static property so you add
  • 00:05:39 it by adding the static keyword which is
  • 00:05:41 a JavaScript keyword and next-gen
  • 00:05:43 JavaScript e word and then context type
  • 00:05:47 and you set this context type equal to
  • 00:05:50 your context so in this case to off
  • 00:05:52 context this will tell react which
  • 00:05:56 context this component should connect to
  • 00:05:59 it will connect to the off context and D
  • 00:06:02 heavy lifting is done behind the scenes
  • 00:06:03 by react now with this added you don't
  • 00:06:07 have to use your your consumer there
  • 00:06:11 anymore so you don't need to use that
  • 00:06:13 rendering function there anymore instead
  • 00:06:16 you can just return your JSX code here
  • 00:06:21 but of course you don't have access to
  • 00:06:25 off context anymore instead you now have
  • 00:06:28 access to this context and this context
  • 00:06:31 property is of course not set up by you
  • 00:06:33 this is provided by react and it's
  • 00:06:36 populated with your context data based
  • 00:06:39 on the context type you set up there so
  • 00:06:41 if you are pointing at an our context
  • 00:06:43 this context will hold data of that our
  • 00:06:46 context with that changed if I now
  • 00:06:49 reload it will not work and the reason
  • 00:06:52 for that is that due to the way that
  • 00:06:55 data is now being passed around this
  • 00:06:58 older pro
  • 00:06:58 of setting up the context in a pas and
  • 00:07:01 using it here and importing log in and
  • 00:07:04 profile in a purchase and on the other
  • 00:07:07 hand importing something from App J s so
  • 00:07:10 having like a circular relation this
  • 00:07:13 does not work here instead we now have
  • 00:07:16 to make one simple change we create a
  • 00:07:18 new off context JavaScript file you can
  • 00:07:21 name this file however you want you take
  • 00:07:23 your off context and you import it in
  • 00:07:26 this off context file you need to import
  • 00:07:29 reactant there of course because we're
  • 00:07:31 using the react object here so we import
  • 00:07:35 react from react and now here I will
  • 00:07:38 just turn this into a default export
  • 00:07:40 like this simply so that I don't have to
  • 00:07:44 use unnamed import you could use a named
  • 00:07:46 export and import too of course
  • 00:07:48 so now I have my default export react
  • 00:07:50 create context and now in App jeaious I
  • 00:07:52 just need to import that so here I will
  • 00:07:55 import off context from my off context
  • 00:07:59 file and I also need to adjust my M
  • 00:08:01 imports in login and profile so there I
  • 00:08:05 also import keep in mind it's now a
  • 00:08:08 default exports and without curly braces
  • 00:08:10 here I import off context from the off
  • 00:08:13 context file and I can just copy that
  • 00:08:16 import over to my profile file and with
  • 00:08:19 that change we have no circular
  • 00:08:21 dependency anymore and now this does
  • 00:08:24 indeed work again
  • 00:08:26 but now we're using that context type
  • 00:08:27 property and as you saw or as you see
  • 00:08:30 this kind of reduces the amount of code
  • 00:08:33 we have to write in the log in J's file
  • 00:08:35 and it also ensures that we don't have
  • 00:08:38 to use that rendering approach we still
  • 00:08:41 use in profile for example and we could
  • 00:08:43 use the context type there too now using
  • 00:08:45 this approach is absolutely fine it's
  • 00:08:47 not bad does not yield bad performance
  • 00:08:50 or anything like that but this is a
  • 00:08:51 little bit slimmer this approach and
  • 00:08:54 this simply might make it a bit easier
  • 00:08:56 to work with context and to access it
  • 00:08:59 from different points in your component
  • 00:09:01 because now you are not limited to
  • 00:09:04 accessing the context in your render
  • 00:09:05 method of course you could now also
  • 00:09:08 access it in component did mount for
  • 00:09:10 example here if I console
  • 00:09:12 this context and I saved this and I open
  • 00:09:16 my developer tools here we can of course
  • 00:09:18 see an object here and this is our
  • 00:09:20 context object previously this would not
  • 00:09:23 really have been possible because in
  • 00:09:25 profile we just have access to the
  • 00:09:27 context here inside our vendor function
  • 00:09:29 now with this new approach with context
  • 00:09:32 type we can access context from anywhere
  • 00:09:34 in this component and this of course is
  • 00:09:36 a very nice useful feature added with
  • 00:09:38 react 16.6 so that was the new context
  • 00:09:42 hi prop another very nice new feature
  • 00:09:45 added with react 16.6 is the react memo
  • 00:09:49 method now what does this allow us to do
  • 00:09:51 well you might know the pure component
  • 00:09:56 you can use on class-based components or
  • 00:09:57 should component update this lifecycle
  • 00:10:00 hook queue basically make sure that your
  • 00:10:03 class-based components only update in
  • 00:10:06 cases where you want them to update when
  • 00:10:08 you manually implement should component
  • 00:10:10 update or when using the pure component
  • 00:10:12 you can of course ensure that your
  • 00:10:14 class-based components only get
  • 00:10:16 re-rendered and only get basically
  • 00:10:18 touched by react you could say when
  • 00:10:21 their props the props they receive
  • 00:10:24 really changed and previously this was
  • 00:10:27 not something available to your
  • 00:10:30 functional components react memo fixes
  • 00:10:33 this or as this functionality now let's
  • 00:10:35 have a look at an example again you find
  • 00:10:38 some example code below the video and
  • 00:10:40 here it is it's a normal reactor
  • 00:10:42 application simply run npm install and
  • 00:10:45 then npm start and again you'll have a
  • 00:10:47 login button where you can toggle that
  • 00:10:50 state this time I'm not using context
  • 00:10:53 here though I'm using good old props I
  • 00:10:55 change my state in my app j/s failure
  • 00:10:58 and then I passed the authenticated prop
  • 00:11:00 which holds my kurd authentication
  • 00:11:02 status to the login and to the profile
  • 00:11:04 component and to the login component I
  • 00:11:07 also pass my login and logout handler
  • 00:11:10 function references on the on login and
  • 00:11:13 on log out props and then these props
  • 00:11:16 are bound here to on click on my
  • 00:11:18 different buttons so this is how I'm
  • 00:11:21 handling this year now one important or
  • 00:11:23 interesting thing when I turn this
  • 00:11:26 into a function where I actually am able
  • 00:11:29 to write more than just a returning JSX
  • 00:11:32 code then I can console.log my props
  • 00:11:36 here of course and if I now reload well
  • 00:11:40 then we see our props obviously change
  • 00:11:42 true and false changes now let me make
  • 00:11:45 one tiny change here Judah's login
  • 00:11:48 component and let me remove that check
  • 00:11:51 whether we are authenticated or not so
  • 00:11:54 basically what I do now is I always
  • 00:11:56 render both buttons so I will return my
  • 00:12:00 both my two buttons here and one
  • 00:12:02 important note of course is that
  • 00:12:04 adjacent elements like this are not
  • 00:12:06 allowed and react at least not like this
  • 00:12:09 we can wrap them with a div or with
  • 00:12:12 react fragment which is like an empty
  • 00:12:16 component just added to allow us to well
  • 00:12:19 wrap our components and now this will
  • 00:12:22 work and now I have both buttons and
  • 00:12:24 again I can click login multiple times
  • 00:12:26 but here you see that actually my
  • 00:12:29 properties did not change authenticated
  • 00:12:32 is true all the time still react will
  • 00:12:35 have touched my login component and will
  • 00:12:38 have rear entered it because in apt
  • 00:12:40 Reyes we called a set state we set is
  • 00:12:43 off to true and that is basically
  • 00:12:45 treated as a prop change or a prop
  • 00:12:48 update at least since we pass that down
  • 00:12:50 to login and therefore we will have
  • 00:12:54 re-rendered add or will have told react
  • 00:12:57 to compare this against the old work
  • 00:12:59 shall Dom now we can optimize this with
  • 00:13:03 the new react memo method if I wrap
  • 00:13:07 login in this method call react memo now
  • 00:13:12 if I save that and I reload I click
  • 00:13:13 login you see after authenticated was
  • 00:13:17 switched to true I can click it as often
  • 00:13:20 as I want we don't get that console.log
  • 00:13:22 because react will not execute that
  • 00:13:25 rendering function that component
  • 00:13:27 function here it will not execute it
  • 00:13:29 because react memo basically compares
  • 00:13:31 the old props to the new props and it
  • 00:13:34 will see that they are equal by the way
  • 00:13:37 it doesn't perform a shallow check there
  • 00:13:39 so
  • 00:13:40 your props are made up of objects react
  • 00:13:42 will not deeply check them it will not
  • 00:13:45 check the quality of your objects
  • 00:13:47 properties it will only check the
  • 00:13:49 top-level elements and therefore you
  • 00:13:52 should use an immutable approach when
  • 00:13:54 updating objects in your props to take
  • 00:13:57 advantage of this but that's just a side
  • 00:13:59 note when you have something like
  • 00:14:01 strings numbers boolean as we have it
  • 00:14:04 here we have a boolean here then
  • 00:14:06 obviously a shallow check is always
  • 00:14:09 sufficient and therefore here we avoid
  • 00:14:11 unnecessary rerender cycles because of
  • 00:14:14 react memo now important don't start
  • 00:14:18 wrapping all your functional components
  • 00:14:20 with react memo though this is not
  • 00:14:23 recommended because if you have a
  • 00:14:25 functional component which is pretty
  • 00:14:27 much guaranteed to have to be rear-ended
  • 00:14:30 on every prop update because updated
  • 00:14:34 props in the parent component will
  • 00:14:36 always or almost always differ from the
  • 00:14:39 previous props and such use cases of
  • 00:14:41 course exist for example if I didn't
  • 00:14:44 have two buttons here but only a
  • 00:14:46 toggling button then I would know for
  • 00:14:48 sure that whatever this button is
  • 00:14:50 pressed the state will have switched
  • 00:14:52 because it toggles it instead of setting
  • 00:14:55 it to the same all the time then I know
  • 00:14:57 that the state will have switched in the
  • 00:14:58 parent component and therefore the new
  • 00:15:00 props received by this component will
  • 00:15:03 have changed wrapping it and react memo
  • 00:15:05 can then actually be worse than not
  • 00:15:08 doing it because then you force react to
  • 00:15:11 perform an extra quality check even
  • 00:15:13 though you as a developer know that
  • 00:15:15 props will differ always or in most
  • 00:15:18 cases so this really only makes sense if
  • 00:15:21 there is a realistic chance that a set
  • 00:15:24 state call and a parent or generally new
  • 00:15:26 props being received in the login
  • 00:15:28 component in this case can be the same
  • 00:15:30 as the previous set of props you got and
  • 00:15:33 if that is not the case well then using
  • 00:15:36 react memo might not be the best
  • 00:15:38 solution in this exact scenario here it
  • 00:15:41 would make sense though so that was
  • 00:15:43 react memo there's one other very cool
  • 00:15:46 new edition with react 16.6 which
  • 00:15:48 already is a glimpse into the future and
  • 00:15:51 that is react lazy
  • 00:15:53 it uses the new suspense API which is
  • 00:15:57 still work-in-progress which is not
  • 00:15:59 fully finished and which will be all
  • 00:16:01 about suspending rendering cycles and
  • 00:16:04 basically optimizing how react renders
  • 00:16:08 your data to the Dom and you can find
  • 00:16:11 some interesting articles on that below
  • 00:16:13 the video so react lazy as a method that
  • 00:16:17 was added with react 16.6 that allows us
  • 00:16:20 to load components asynchronously which
  • 00:16:23 means they are only loaded the code
  • 00:16:25 behind them is only loaded when they are
  • 00:16:27 really required when they are being
  • 00:16:29 rendered and this is for example useful
  • 00:16:32 when having routing in your application
  • 00:16:35 because only when a user visits a
  • 00:16:37 certain route that component will be
  • 00:16:39 required and react lazy allows you to
  • 00:16:41 defer the rendering and the loading of
  • 00:16:44 the code of that component until it is
  • 00:16:45 required and this of course means that
  • 00:16:48 you don't load redundant code in advance
  • 00:16:51 it's not just useful for routing by the
  • 00:16:53 way whenever you have a use case where
  • 00:16:56 some component is loaded at a later
  • 00:16:58 point of time for example because you
  • 00:17:00 have a if check and some condition needs
  • 00:17:01 to be met to render a certain component
  • 00:17:03 in all such cases you could use react
  • 00:17:06 lazy but let me show you how it works
  • 00:17:09 so let's go to the App J's file and here
  • 00:17:12 I'm using react route or Dom to set up
  • 00:17:15 my browser router I am using react
  • 00:17:17 fragment here which is a feature that
  • 00:17:19 was added with react 16.2 it's basically
  • 00:17:22 a component that you can use to well
  • 00:17:26 wrap Averell components because you
  • 00:17:28 always need that wrapping component and
  • 00:17:30 react it does not render a real Dom
  • 00:17:32 element and therefore does not distort
  • 00:17:34 your Dom and inside of that fragment I
  • 00:17:37 have a little dummy navigation and then
  • 00:17:40 I have three routes here and if we have
  • 00:17:42 a look at that we are on the welcome
  • 00:17:44 page by default and we can switch to the
  • 00:17:46 user and the post page okay so that is
  • 00:17:49 this application
  • 00:17:50 nothing fancies thus far now we could
  • 00:17:53 use react lazy to only load the user and
  • 00:17:56 the posts component when we need them
  • 00:17:59 right now everything is loaded in
  • 00:18:01 advance but we might never visit these
  • 00:18:03 routes so loading the code behind him in
  • 00:18:05 at
  • 00:18:06 is not ideal if that were an even bigger
  • 00:18:10 app with more code behind these
  • 00:18:12 components the issue would of course be
  • 00:18:14 worse so we want to load these two
  • 00:18:17 components only when we need them and we
  • 00:18:19 can't do that with this new lazy method
  • 00:18:22 how is this method used well let's start
  • 00:18:24 with the post component instead of
  • 00:18:27 importing it like this which will always
  • 00:18:29 force the data to be loaded in advance
  • 00:18:31 we need to use a dynamic import so we
  • 00:18:34 create a constant for that which we
  • 00:18:36 named posts you could name it whatever
  • 00:18:38 you want I'll just name it posts so that
  • 00:18:40 I can continue to NAU's that name down
  • 00:18:42 there and the value of that constant
  • 00:18:45 here will be a call cue react dot lazy
  • 00:18:50 this new method that was added with
  • 00:18:53 react 16.6 now let's also move these
  • 00:18:56 imports to the top to not get any
  • 00:18:58 linting warnings and now inside of react
  • 00:19:01 lazy we pass a function here I'll use an
  • 00:19:04 arrow function which returns an import
  • 00:19:07 statement and this is a dynamic import
  • 00:19:10 it which means it's basically executed
  • 00:19:12 when this code runs and react will
  • 00:19:14 execute it when we try to render this
  • 00:19:16 component and here we again still point
  • 00:19:19 Q the file which contains our posts
  • 00:19:22 component and important for that we
  • 00:19:25 should use default exports named exports
  • 00:19:28 are not supported so now I'm importing
  • 00:19:31 my post component but only when this
  • 00:19:34 function runs which means only when
  • 00:19:35 react thinks that we need to use it and
  • 00:19:37 react thinks that we need to use it when
  • 00:19:40 it detects that it needs to render that
  • 00:19:42 now with that changed let's go down to
  • 00:19:46 that route here and there we now need to
  • 00:19:48 make a little change instead of using
  • 00:19:52 that component let's use the render
  • 00:19:55 method here there we would you receive
  • 00:19:57 all these route props but in the end
  • 00:19:59 here I want to return something I want
  • 00:20:01 to return a computer component that
  • 00:20:03 should be rendered and there I now need
  • 00:20:05 to import a new component from react the
  • 00:20:08 suspense
  • 00:20:10 component with an import that that is
  • 00:20:13 what I want to render here suspends like
  • 00:20:17 this and in between I'll render ho
  • 00:20:20 so my constant as a component here and
  • 00:20:23 now let's add one more thing to that
  • 00:20:26 suspense component and that's the
  • 00:20:27 fallback prop which should be zem JSX
  • 00:20:30 code and there I'll add diff where I say
  • 00:20:32 loading and this will actually be
  • 00:20:34 displayed in cases were react basically
  • 00:20:37 postpones the rendering of this rap
  • 00:20:39 component and shows this well fall back
  • 00:20:42 in the meantime and of course that
  • 00:20:43 doesn't have to be a dev with loading
  • 00:20:45 that could be a spinner or anything like
  • 00:20:47 that and now with all that let's save
  • 00:20:50 that go back to the front page load the
  • 00:20:52 users page load the post page all
  • 00:20:54 working so what's special well we can
  • 00:20:57 see what's special when we reload the
  • 00:20:59 page and then go to the network tab now
  • 00:21:02 after reloading clear it and now click
  • 00:21:06 on the post page and you will see that
  • 00:21:08 there it loaded a new file and dad is
  • 00:21:12 the file holding the code for this
  • 00:21:13 component and that is async rendering at
  • 00:21:17 async loading in action because this
  • 00:21:19 component and its code is only fetched
  • 00:21:22 and rendered when we really need it and
  • 00:21:24 therefore we avoid loading everything in
  • 00:21:27 advance which can of course drastically
  • 00:21:29 improve the performance of your
  • 00:21:30 application depending on its size so
  • 00:21:33 this is a neat alternative to the other
  • 00:21:36 way of lazy loading pages which we had
  • 00:21:39 before a great advantage of this
  • 00:21:41 approach is that we of course cannot
  • 00:21:44 just use this in a routing scenario we
  • 00:21:48 could of course also have a scenario
  • 00:21:50 where we don't use that browser router
  • 00:21:54 so let me comment all of that out and
  • 00:21:56 instead let's say I have a simple button
  • 00:22:01 here where I say toggle mode or anything
  • 00:22:06 like that we add a new method to
  • 00:22:09 discompose here mode Handler and we add
  • 00:22:17 a state where we say show and it's false
  • 00:22:21 in the a initially let's say and then
  • 00:22:24 there I call this set state in the
  • 00:22:28 function form of set States and we can
  • 00:22:30 access the old state we return the
  • 00:22:33 updated state or our update to the state
  • 00:22:36 and I'll set show to the opposite of
  • 00:22:39 what it previously was so that I toggle
  • 00:22:41 that show mode and of course you can
  • 00:22:43 also and name this differently now we
  • 00:22:46 have that button now I bind on click
  • 00:22:49 here to my this mode Handler and now I
  • 00:22:53 just want to render either the user or
  • 00:22:55 the post page depending on that mode of
  • 00:22:58 course you can also name that show posts
  • 00:23:00 for example updated here too and now
  • 00:23:05 let's add a simple check where you check
  • 00:23:07 if this state show posts if that is true
  • 00:23:10 then I want to render my posts and for
  • 00:23:14 data will also grab this code which
  • 00:23:16 suspends of course so let's copy that
  • 00:23:17 and move it up there comment that back
  • 00:23:21 in put that in brackets so one I render
  • 00:23:25 with suspense my posts if show post is
  • 00:23:29 true otherwise I'll render my user
  • 00:23:33 component like this now since I have two
  • 00:23:36 adjacent components here I'll again use
  • 00:23:39 react fragment and wrap this and now
  • 00:23:42 with this changed if I go back and I
  • 00:23:46 click on toggle mode we see that chunk
  • 00:23:49 was loaded and we see the post page so
  • 00:23:51 here we also take advantage of this
  • 00:23:54 async rendering and that is really
  • 00:23:57 something useful and a great addition
  • 00:23:59 with react 16.6 will see more on that
  • 00:24:03 async rendering thing in future versions
  • 00:24:05 and right now this is what we can use
  • 00:24:08 react lazy please be aware that this
  • 00:24:10 will not work if you're trying to
  • 00:24:12 server-side render this then this is not
  • 00:24:14 supported this API will not work there
  • 00:24:16 yet but if you have a client-side
  • 00:24:19 rendering application then this is a
  • 00:24:21 great addition and definitely something
  • 00:24:23 you want to check out for cases where
  • 00:24:25 you conditionally render some component
  • 00:24:28 beated now if statement or be dead in a
  • 00:24:31 routing scenario now of course one thing
  • 00:24:34 to keep in mind the benefit you will get
  • 00:24:36 out of this will be greater if you have
  • 00:24:39 larger chunks of data behind your
  • 00:24:41 components if you have very simple
  • 00:24:43 components using suspense might actually
  • 00:24:45 be overkill and
  • 00:24:46 could even slow down your application or
  • 00:24:48 be suboptimal at this point of time so
  • 00:24:51 lazy loading the code of course shows
  • 00:24:54 its full strength if we're talking about
  • 00:24:56 bigger chunks of code so this was a
  • 00:24:59 video with the important additions to
  • 00:25:01 react 16.6 I hope this was helpful check
  • 00:25:05 out the resources below the video to
  • 00:25:06 learn more about react and des update
  • 00:25:09 and all the fun stuff you can do with
  • 00:25:10 web development and I hope to see you in
  • 00:25:12 future videos too bye