Updating your Component

It probably goes without saying, but the first thing to do is to make sure your component actually works with React 15.

Most of the changes with React 15 were behind-the-scenes optimizations, and if you weren’t tinkering with any lower-level APIs, you likely won’t run into problems.

If your component uses SVGs, you’ll need to be aware that in rc-1, SVGs were treated as exceptions, and all attributes need to be dash-separated-like-in-regular-html. In rc-2, however, that decision was reversed, and now they can be used like all React components, inTypicalCamelCase.

Updating your Peer Dependencies

I’m assuming that, if you have a module that has run into this issue, you know what peer dependencies are. If not, there’s a fantastic article from their author explaining the why and how of it.

In NPM 1 and 2, peer dependencies will be automatically installed. This is bad, because it means our users’ apps would simultaneously be running React 0.14 and React 15. Things are better in NPM 3 (a warning is displayed, nothing is installed), but we should still update our dependencies ASAP.

Our Friend, the Caret

The caret, in NPM, is a way of specifying that you want to include all versions of a module up to but not including the next major version.

For example, a dependency of ‘^1.2.3` would support any version greater than 1.2.3, but less than 2.0.0.

Many module authors treat modules that have not yet hit 1.0 as pre-releases. As a result, there are often breaking changes between, say, 0.1.0 and 0.2.0. NPM decided that the caret should treat the first non-zero digit as the ‘major’ value:

^1.2.3 = 1.2.3 <= v < 2.0.0

^0.1.2 = 0.1.2 <= v < 0.2.0

^0.0.1 = 0.0.1 <= v < 0.0.2

Because of this, the caret feels a little over-complicated to me for most common use-cases. Recently, I’ve eschewed it in favour of a more explicit syntax: the `x` wildcard.

1.2.x = 1.2.0 <= v < 1.3.0

1.x.x = 1.0.0 <= v < 2.0.0

I prefer this syntax because it’s more intuitive, it makes sense.

It’s not as flexible, though. The current version of React 15 is `15.0.0-rc.2`. That’s a mouthful, and sadly, wildcards don’t work for it:

NPM has a semver package that allows you to test whether your dependency will match the version you’d like. Highly recommended!

By using a caret, we can specify that we want to target React 15 including beta releases:

Pretty spiffy! Handily, it’ll continue to work even after 15 is officially released.

We do still want to support whatever our currently-supported version is, though. NPM allows us to specify multiple ranges with the or operator (||):

Learning about NPM’s semver implementation isn’t the most exciting thing on the planet, but it’s a lot more flexible than I had realized before looking into it, and it’s super helpful to know about.

You can read much more about their implementation. Knowledge is power.