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

You may also like