TLDR: A function which runs to completion without returning anything has a return type of void, but a function which never completes execution has a return type of never.
The best way to illustrate the difference is with an example. A function which always throws an exception will never finish executing. Compare this to a function which does some work and then finishes without a return statement.
const thisThrows = (): never => {
throw('someError');
return 'thisNeverHappens';
}const thisDoesNotReturnAValue = (): void => {
someGlobal = 1 + 2;
}
Why does this distinction matter? It’s all down to…
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, thanks to two new React features, we may no longer have to.
The new Context API allows us to share state throughout the component hierarchy. This works much like the Provider component from react-redux allowing us to make the store available to the entire component tree.
const MyContext = React.createContext(someInitialValue);…
- 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% reduction in bundle size.
How To Do It
Add the UglifyJsPlugin to the plugins section of your Webpack config. It already comes with Webpack so there’s no need to install anything from npm.
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]By default UglyifyJsPlugin will warn you about things such as…
A series of posts on achieving a smaller bundle size
…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 implementation of React’s APIs. It leaves out some of the lesser used features such as server-side rendering (so only use it client-side), but it includes everything that’s used in the majority of builds.
If you want to know whether it will work for you, the easiest way to find out…
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. If you start using Lodash without having imported it first, not only will Typescript fail to warn you, it will actually provide intellisense for methods you don’t even have!
This problem isn’t unique to Lodash. The same is true of core-js and many other multi-module packages.
Wait, what’s a multi-module package?
Let’s say you want to use the map method from lodash…
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 check in shouldComponentUpdate because every time we bind the function we are creating a new function with a different reference.
We could instead pass in the unbound function and the value we wish to bind so the Options component could do it internally. …
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 of doing this is to render the component and test the output, but that means you’ll be testing Bob’s Button component as well as your own code. Every time someone changes Button, your tests will fail even though your component it still working perfectly.
Thomas James Byers
Javascript Developer — Manchester
