- 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