Dan Abramov’s react-redux library gives us a way to connect our redux store to our react components. It saves us from having to pass props all the way down and gives us some vDom optimizations for free. The only downside is having to write all those mapStateToProps functions, but now…

Potential gain: ~30% reduction in bundle size Time required: 5 minutes Difficulty: easy What Is It UglifyJsPlugin is a Webpack plugin that minifies your Javscript, removing whitespace and renaming variables. This will inevitably make debugging harder so only do it on your production build. For me this lead to more than a 30%…

A series of posts on achieving a smaller bundle size — Part 1: react-lite Part 2: UglifyJSPlugin …more to come.

An easy win with potentially large gains — Potential gains: ~30% reduction in bundle size. Time required: 5 minutes. Difficulty: easy. If your app is using React you can use the smaller react-lite as a drop-in replacement for your production builds. This change alone reduced my bundle size by slightly more than 30 percent. What is it? React-lite is an optimized…

Are you using Typescript and Lodash together? If so you’re probably not as type safe as you think. Once you install the Lodash typings from @types/lodash (or from DefinitelyTyped) the “_” type becomes globally available within your project. …

A common problem in react development is unnecessary virtual DOM re-rendering caused by bound functions. Consider the following example: When the value of Textbox changes, all five of the Option components will re-render even though their data is exactly the same. We can’t prevent this with a strict equality…

So you’ve created an awesome react component that displays a group of buttons. Finally, that Button component your colleague Bob wrote is actually useful for something! But you’ll need to write some unit tests in case Bob breaks your component in one of his notorious refactoring binges. One way…