Part 1 — Keeping dependencies up to date The JavaScript ecosystem moves fast and most tools, frameworks & libraries are updated quite frequently. Most libraries release minor updates (e.g. to ) every month and major updates with breaking changes (e.g. to ) every 6 to 12 months. 2.3.x 2.4.x 2.x 3.x There are many good reasons for keeping your application’s dependencies up to date: You get to use the latest and greatest features. Often, you can submit a feature request or pull request on a project’s Github page and expect to see it included in the next minor release. Updates almost always include bug fixes, performance improvements and critical security patches. Documentation, tutorials and stack overflow answers generally refer to the most recent version of a library/framework. It’s hard to find docs or support for older versions. A lot of stuff is deprecated or removed over time, and it’s easier to update your application gradually than to do it all at once after several releases. As a rule of thumb, you should update your application’s dependencies at least once every quarter. Following is a recommended order for updating dependencies in web applications built using React. React was released recently, and if you’re still using React (or lower), it would be good idea to switch to as soon as possible, not just for the improvements, but also because it includes several . If you’re already on the latest version, you can go through the release notes or the official blog to track changes and decide when it makes sense for you to upgrade. React 16 15.x 16.x breaking changes , Links: release notes official blog _We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests…_reactjs.org React v16.0 - React Blog Create React App If your application wasn’t created using , you should consider migrating to it, since it’s a really powerful tool with amazing new features being added every month. It also conveniently bundles all (like Webpack, Babel, Jest etc.) into a single package called , so you just have to update one package instead of dozens, without worrying about compatibility issues. [create-react-app](https://github.com/facebook/create-react-app) devDependencies [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) , Links: release notes user guide _create-react-app - Create React apps with no build configuration._github.com facebook/create-react-app React Router has a somewhat poor reputation for revamping the API and again, but let’s face it: it’s an indispensable library with no reasonable alternative (except its offspring ). React Router v4 is a complete rewrite and several new features and bug fixes are still being added with every minor release, so it would be a good idea to stay up to date. react-router over over [@reach/router](https://reach.tech/router) , Links: release notes official docs _Learn once, Route Anywhere_reacttraining.com React Router: Declarative Routing for React Redux Redux is a tiny library with a small and fairly stable API, so it really doesn’t need to be updated frequently (or at all). That said, was released recently, and it includes many improvements, so you should consider upgrading. Also, while Redux is quite stable, you might want to update the middleware and helper libraries like , , etc. more frequently. Redux 4.0 react-redux redux-saga reselect , Links: release notes official docs _A predictable state container for JavaScript apps._redux.js.org Redux Other Dependencies Once you the core dependencies have been upgraded, you can go over other dependencies one by one and update each one to the latest version. If you’re using , you can simply hover over a dependency to find the latest version. VS Code For dependencies with breaking changes, you can decide whether to update immediately or later (if at all), on a case-by-case basis. Remove Unused/Rarely Used Dependencies Developers often install several libraries that do similar things just to try them out, and forget to remove them from . Redundant, duplicate and unused dependencies should be removed while updating. If you’re doing this for the first time, don’t be surprised to find that 30–50% of the dependencies in are never used in the project. package.json package.json You should also consider removing dependencies that are used very infrequently or can be replaced with small helper functions. Libraries like and can add over 100 KB to your production bundle. Use a tool like to decide whether a dependency is worth keeping, especially if it’s only used in a handful of places. lodash moment BundlePhobia _Bundlephobia helps you find the performance impact of adding a npm package to your front-end bundle_bundlephobia.com BundlePhobia Conclusion Updating your project’s dependencies can seems like a boring task, but it’s actually quite the opposite: you get to learn about exciting new features and improvements that can help you be more productive, improve the quality of your codebase and improve your application’s performance. And it really doesn’t take that long, if you do it frequently enough!

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Maintaining Large React Applications

Too Long; Didn't Read

Company Mentioned

Aakash N S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Maintaining Large React Applications

Too Long; Didn't Read

Company Mentioned

Aakash N S

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES