what’s-new-in-react-v16.9

I was starting to get a bit worried. The last few minor point releases of React had come out months apart and we were already into Q3 without a new release. My fears have been quelled though as React v16.9 is finally here with a few new features, bug fixes and deprecations!

The deprecations

I’m a “start with the bad news” type of guy, so let’s start by talking about the deprecations that were included in React v16.9 which will help us better prepare for v17 (and other future versions) down the road.

No more javascript: URLs

URLs that begin with javascript: have long been considered dangerous because of the potential of malicious data making it into your application:

const userProfile = {
  // Whoops, forgot to ensure this use input was /actually/ a URL
  websiteUrl: 'javascript: alert("Remember little bobby tables?")';
}

<a href={userProfile.websiteUrl}>My Website</a>

Obviously it wouldn’t be good if your users could inject JavaScript right into your running application.

As mentioned, this is simply a deprecation in v16.9 and will only log a warning. You could go out of your way to circumvent this entirely by using dangerouslySetInnerHTML but you’d still be asking for trouble.

In a future major version (not necessarily v17) this will be converted from a warning to an error. I’d say it’s best to just stop using it all together so you can save the trouble in the future.

No more “factory” components

A feature I can file in the “TIL” category, is that React had support for a “factory” component.

For those unfamiliar, the factory pattern is when you have a creator class handles creating new classes for you rather than instantiating them directly. This is great in scenarios where you are dynamically generating class names and such.

In React, this means you can have a component that returns an object with it’s own render method. It also has a pretty nasty syntax that looks an awful lot like a function component:

function GatorFactoryComponent() {
  return {
    render() {
      return <div />;
    }
  };
}

As mentioned, this was news to me, and evidently not that widely used of a feature as the React Team mentioned that this is rarely used and probably won’t affect the majority of modern code bases.

If you do attempt to use it, you will receive a warning. There’s also a work around, but you’re better off converting it to a function of class component instead of trying to stay set in your ways.

Unsafe lifecycle methods renamed

The React Team gave us a head’s up over a year ago that the lifecycle methods that were considered unsafe would be renamed in a future 16.x release and the old names removed completely from the 17.x series.

The methods in question are as follows:

  • componentWillMount renamed to UNSAFE_componentWillMount
  • componentWillReceiveProps renamed to UNSAFE_componentWillReceiveProps
  • componentWillUpdate renamed to UNSAFE_componentWillUpdate

Never fear though, the old names will still work in React v16.9 but will throw a helpful warning to urge you to refactor your code or move to the new UNSAFE_ naming.

The purpose of the UNSAFE_ naming convention is to make it easier for us developers to identify potentially problematic code when doing reviews and such.

To ease migration efforts, there is a “codemod” script that can update your entire project to the new UNSAFE_ naming convention:

$ npx react-codemod rename-unsafe-lifecycles

The features

While not necessarily a let down of a release, this particular React release is a bit light on new features. One man’s opinion though 🙂

Measuring performance with

You may remember back in React v16.5 when the React Profiler was added to the React DevTools. This is great for a lot of smaller applications, but for a larger application, you probably want a more programmatic way to gather metrics.

The solution to this comes in the way of the component which you can be used to wrap components to help gain insight to the rendering “cost” of your application.

The new component requires an id property as well as an onRender property which will fire every time a component within the tree updates and triggers a re-render:

import React, { Profiler } from 'react';

render(
  <Profiler id="alligator-app" onRender={onRender}>
    <AlligatorApp>
      <Switch>
        <Route {...props} />
        <Route {...props} />
        <Route {...props} />
      </Switch>
    </AlligatorApp>
  </Profiler>
);

The onRender callback will receive information about which component re-rendered, how long it took, and other valuable information. You can read more about the profiler here.

Also, the profiler is automatically disabled in production, so there’s no additional logic to implement to make sure you don’t accidentally deploy with the profiler turned on. (C’mon, we’ve all done it 😉

Asynchronous ReactTestUtils.act()

React v16.8 introduced the act() utility to help with testing your application as if it were being run in a web browser.

While extremely useful, the act() utility was synchronous with no easy way to get it work in a more asynchronous fashion. This may have resulted in some sporadic warnings in your logs which couldn’t be easily fixed. Quite the bummer.

Fortunately, the React Team has improved the act() utility in React v16.9 so it can function asynchronously!

The Rest

A release of React is never complete without some notable bug fixes:

  • Fix for a memory leak caused by deleted subtrees being retained.
  • Better handling of infinite loops caused by setState inside of useEffect.
  • Fix for a crash in when findDOMNode() is called.

Ready to start using React v16.9?

React v16.9 is ready for your hacking pleasure, all you need to do is install it via your favorite package manager:

# Via npm
$ npm install --save react@^16.9.0 react-dom@^16.9.0

# Via Yarn
$ yarn add react@^16.9.0 react-dom@^16.9.0

95 comments

  1. When someone writes an article he/she keeps the image of
    a user in his/her mind that how a user can be aware of it.
    Thus that’s why this piece of writing is perfect. Thanks!

  2. Amazing blog! Is your theme custom made or did you download it
    from somewhere? A theme like yours with a few simple adjustements would really make
    my blog stand out. Please let me know where you got your theme.
    Thank you

  3. Nice post. I was checking constantly this blog
    and I’m inspired! Extremely useful info particularly the ultimate
    part 🙂 I maintain such information much. I was looking for this particular info
    for a long time. Thank you and best of luck.

  4. You have made some decent points there. I checked on the net for more info about the issue and found most
    individuals will go along with your views on this web site.

  5. I got this website from my buddy who informed me on the topic of
    this web site and at the moment this time I am browsing this site
    and reading very informative articles at this place.

  6. I’ve been exploring for a little bit for any high quality articles or
    weblog posts in this sort of house . Exploring in Yahoo I ultimately stumbled upon this website.

    Reading this information So i am glad to express
    that I’ve a very excellent uncanny feeling I discovered just what I needed.
    I so much unquestionably will make sure to do not fail to remember this website and provides it a glance regularly.

  7. My partner and I stumbled over here from a different web page and thought I
    might check things out. I like what I see so now i’m following you.
    Look forward to exploring your web page yet again.

  8. Hmm is anyone else experiencing problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my
    end or if it’s the blog. Any feed-back would be greatly
    appreciated.

  9. Hi mates, how is everything, and what you desire to say on the topic of this article, in my view its in fact remarkable
    in support of me.

  10. I’ve read some good stuff here. Definitely value bookmarking for revisiting.
    I surprise how much attempt you place to make this kind of excellent informative web site.

  11. My spouse and I stumbled over here coming from a different web address and thought I may as well check
    things out. I like what I see so now i am following
    you. Look forward to exploring your web page yet again.

  12. Its not my first time to go to see this web site, i am browsing
    this site dailly and take good facts from here everyday.

  13. Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your weblog?

    My blog is in the very same niche as yours
    and my visitors would truly benefit from a lot of the information you provide here.
    Please let me know if this okay with you. Many thanks!

  14. Hi there! Do you know if they make any plugins to safeguard against
    hackers? I’m kinda paranoid about losing everything I’ve worked
    hard on. Any recommendations?

  15. Nice blog here! Also your website loads up fast!
    What host are you using? Can I get your affiliate link to your host?

    I wish my web site loaded up as quickly as yours lol

  16. I do not even know how I ended up here, but I thought this post was
    great. I don’t know who you are but certainly you’re going to a famous blogger if you are not already
    😉 Cheers!

  17. Remarkable! Its actually amazing piece of writing, I have got much clear
    idea regarding from this paragraph.

  18. Hello, all is going perfectly here and ofcourse every
    one is sharing facts, that’s genuinely excellent, keep
    up writing.

  19. Hey there just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Chrome.
    I’m not sure if this is a format issue or something
    to do with browser compatibility but I thought I’d post to let
    you know. The layout look great though! Hope you get the problem solved soon. Thanks

  20. What i don’t realize is in fact how you are now not actually a lot more neatly-liked than you might be now.
    You’re very intelligent. You know thus significantly in terms of this topic, made me personally
    believe it from numerous numerous angles. Its like women and men are not involved except
    it is something to accomplish with Lady gaga! Your personal stuffs great.
    At all times care for it up!

  21. I like what you guys are usually up too. Such clever work and exposure!
    Keep up the amazing works guys I’ve added you guys to my personal blogroll.

  22. When I initially left a comment I seem to have clicked the -Notify me when new comments are added- checkbox and now every time a comment
    is added I get 4 emails with the same comment. Is there
    a means you are able to remove me from that service?
    Thanks a lot!

  23. Howdy! This is kind of off topic but I need some guidance from an established blog.
    Is it hard to set up your own blog? I’m not
    very techincal but I can figure things out pretty fast.
    I’m thinking about creating my own but I’m not sure where to start.
    Do you have any ideas or suggestions? Many thanks

  24. I feel that is one of the most significant information for me.
    And i am satisfied studying your article. However want to
    observation on some general issues, The site style is perfect,
    the articles is really excellent : D. Just right process,
    cheers

  25. When some one searches for his essential thing, therefore he/she needs to be available that in detail,
    thus that thing is maintained over here.

  26. First of all I want to say fantastic blog! I had a quick question in which I’d like to ask if you don’t mind.
    I was interested to find out how you center yourself and
    clear your thoughts prior to writing. I have had a tough time clearing my
    thoughts in getting my ideas out. I truly do take pleasure
    in writing but it just seems like the first 10 to 15 minutes
    are wasted just trying to figure out how to begin. Any suggestions or hints?
    Appreciate it!

  27. Excellent pieces. Keep writing such kind of information on your page.
    Im really impressed by your blog.
    Hello there, You have done a fantastic job.

    I will certainly digg it and in my opinion suggest to my friends.
    I am confident they’ll be benefited from this
    web site.

  28. Hi to every body, it’s my first pay a quick visit
    of this website; this webpage consists of remarkable and truly excellent data in favor of readers.

  29. I all the time emailed this weblog post page to
    all my contacts, because if like to read it then my contacts will too.

  30. Hello There. I discovered your weblog the usage of msn. This is
    a very neatly written article. I’ll make sure to bookmark it and come back to learn more
    of your helpful information. Thanks for the post. I will certainly return.

  31. Great goods from you, man. I’ve understand your stuff previous to
    and you’re just too wonderful. I really like what you’ve acquired
    here, really like what you are stating and the way in which you say it.

    You make it enjoyable and you still care for to keep
    it smart. I cant wait to read far more from you. This is actually a great
    site.

  32. Hello there! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Many thanks

  33. Right here is the perfect web site for anybody who really wants to find out about this
    topic. You realize so much its almost tough to argue with
    you (not that I personally will need to…HaHa).
    You definitely put a new spin on a subject that’s been discussed
    for years. Wonderful stuff, just wonderful!

  34. Exceptional post however I was wanting to know if you
    could write a litte more on this topic? I’d be very grateful if you could elaborate a little bit
    more. Appreciate it!

  35. Hello there! This is kind of off topic but I need some advice from an established blog.
    Is it very hard to set up your own blog? I’m not
    very techincal but I can figure things out pretty fast.
    I’m thinking about creating my own but I’m not sure where
    to start. Do you have any points or suggestions? With thanks

    My web page pokerpulsa388.xyz

  36. I like the valuable information you provide on your articles.
    I will bookmark your weblog and check again right here
    regularly. I am somewhat sure I will be told many
    new stuff right right here! Good luck for the following!

  37. Good day! I could have sworn I’ve been to this web site before but
    after looking at many of the articles I realized it’s new to me.
    Anyways, I’m definitely delighted I came across
    it and I’ll be bookmarking it and checking back frequently!

  38. I’m gone to tell my little brother, that he should also visit this webpage on regular basis to
    get updated from latest reports.

  39. It’s a shame you don’t have a donate button! I’d certainly donate to this excellent blog!
    I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to new updates and will share this website with my Facebook group.

    Chat soon!

  40. I’m curious to find out what blog system you have been utilizing?
    I’m experiencing some minor security problems with my latest website
    and I’d like to find something more safe. Do you have any solutions?

  41. These are actually great ideas in regarding blogging. You have touched
    some fastidious factors here. Any way keep up wrinting.

  42. An interesting discussion is worth comment. I do think that you should publish more about this
    topic, it might not be a taboo subject but generally people do not talk about such subjects.

    To the next! Kind regards!!

  43. each time i used to read smaller content which as well clear their motive, and that is also happening with this post
    which I am reading at this time.

  44. Nice post. I was checking continuously this blog and I am impressed!
    Very helpful info specially the last part 🙂 I
    care for such info a lot. I was looking for this certain info for a long time.
    Thank you and best of luck.

  45. First off I would like to say terrific blog! I had a quick question which I’d
    like to ask if you don’t mind. I was interested to find out how you center yourself
    and clear your mind before writing. I’ve had a difficult time clearing my thoughts in getting my
    thoughts out there. I truly do enjoy writing however
    it just seems like the first 10 to 15 minutes are generally lost simply just trying to
    figure out how to begin. Any recommendations or hints?
    Many thanks!

  46. Somebody necessarily lend a hand to make significantly articles I
    would state. This is the very first time I frequented your website page and up
    to now? I amazed with the research you made to make this particular publish extraordinary.
    Fantastic process!

  47. What’s up, I would like to subscribe for this website to take most recent updates, therefore where can i do it please help.

  48. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You clearly know what youre talking about, why throw
    away your intelligence on just posting videos to your site when you could be giving us something informative
    to read?

  49. Excellent way of explaining, and nice paragraph
    to take data regarding my presentation focus, which
    i am going to present in institution of higher education.

  50. Hey there! Do you use Twitter? I’d like to follow you if that would
    be ok. I’m definitely enjoying your blog and look forward to new posts.

  51. hey there and thank you for your information – I’ve definitely picked up anything
    new from right here. I did however expertise several technical issues using this website, as I experienced to
    reload the website many times previous to I could get it to load properly.

    I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times
    will often affect your placement in google and could damage your
    high quality score if advertising and marketing
    with Adwords. Well I am adding this RSS to my e-mail and
    can look out for a lot more of your respective exciting content.
    Make sure you update this again soon.

  52. Simply want to say your article is as surprising.
    The clearness on your post is just spectacular and i could think you are
    knowledgeable in this subject. Fine with your permission allow me to snatch
    your RSS feed to stay updated with forthcoming post.
    Thank you one million and please carry on the enjoyable work.

  53. Just want to say your article is as amazing. The clarity in your post is simply cool and i could assume
    you are an expert on this subject. Fine with your permission let me
    to grab your feed to keep updated with forthcoming post.
    Thanks a million and please carry on the rewarding work.

  54. You actually make it seem so easy with your presentation but
    I find this matter to be actually something which I think I would never understand.
    It seems too complicated and extremely broad
    for me. I’m looking forward for your next post, I will try to get the hang
    of it!

  55. Hi, i read your blog occasionally and i own a similar one
    and i was just wondering if you get a lot of
    spam remarks? If so how do you prevent it, any
    plugin or anything you can recommend? I get so much lately it’s driving me mad so any assistance is
    very much appreciated.

  56. Hi there would you mind sharing which blog platform you’re working with?
    I’m looking to start my own blog soon but I’m having
    a difficult time making a decision between BlogEngine/Wordpress/B2evolution and
    Drupal. The reason I ask is because your design seems different
    then most blogs and I’m looking for something unique.
    P.S Apologies for being off-topic but I had to ask!

  57. Your style is really unique compared to other people I’ve read stuff from.
    I appreciate you for posting when you have the opportunity, Guess I’ll
    just book mark this blog.

  58. Admiring the time and energy you put into your site and in depth
    information you provide. It’s nice to come across
    a blog every once in a while that isn’t the same unwanted rehashed information. Great read!
    I’ve saved your site and I’m including your RSS feeds to my Google account.

  59. Woah! I’m really enjoying the template/theme of this site.

    It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between user friendliness and visual appeal.
    I must say you have done a excellent job with this. Also, the blog loads extremely quick
    for me on Firefox. Excellent Blog!

  60. Its such as you learn my mind! You appear to understand so much about this,
    such as you wrote the guide in it or something.
    I feel that you just can do with a few % to drive the message home a bit, however other than that,
    this is fantastic blog. A fantastic read. I will certainly be back.

  61. Spot on with this write-up, I seriously believe this
    web site needs a great deal more attention. I’ll probably
    be back again to see more, thanks for the info!

  62. I like the helpful info you provide in your articles.
    I’ll bookmark your weblog and check again here frequently.
    I’m quite certain I’ll learn many new stuff right here!
    Good luck for the next!

  63. My coder is trying to persuade me to move
    to .net from PHP. I have always disliked the idea because of
    the expenses. But he’s tryiong none the less. I’ve been using Movable-type
    on a number of websites for about a year
    and am nervous about switching to another platform.
    I have heard very good things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?

    Any help would be greatly appreciated!

  64. Hello there, just became aware of your blog through Google, and found that it is really
    informative. I’m going to watch out for brussels.
    I will be grateful if you continue this in future. Lots
    of people will be benefited from your writing. Cheers!

  65. fantastic issues altogether, you simply received a logo new reader.
    What might you recommend in regards to your submit that you
    simply made some days ago? Any positive?

  66. Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is important and everything. But think of if you added some great visuals
    or videos to give your posts more, “pop”! Your content is excellent but
    with pics and videos, this site could certainly be one of the
    very best in its field. Wonderful blog!

  67. Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out much.
    I hope to give something back and help others like you
    aided me.

  68. fantastic post, very informative. I ponder
    why the opposite experts of this sector do not realize this.
    You should proceed your writing. I’m sure, you have
    a huge readers’ base already!

  69. An impressive share! I have just forwarded this onto a coworker
    who was doing a little research on this. And he
    actually ordered me lunch because I stumbled
    upon it for him… lol. So allow me to reword
    this…. Thank YOU for the meal!! But yeah, thanks for spending time to talk about this issue here on your site.

  70. Hi, i feel that i saw you visited my blog thus i got here
    to go back the want?.I’m attempting to to find things to enhance my web site!I
    guess its ok to use a few of your ideas!!

Leave a Reply

Your email address will not be published.