December 9, 2019
13.1.2020 UPDATE: Babel 7.8.0 supports optional chaining out of the box
The main advantage of using optional chaining is a smaller and cleaner code which makes it easier to comprehend once people get used to the syntax.
Last autumn Optional Chaining proposal got to the Candidate stage (stage 3) which means that the specification is very close to the final version. This change resulted it to be part of Typescript 3.7 in late October 2019 and Create React App 3.3.0 at the beginning of December 2019. Also supporting tools like Prettier have already added the support.
If you are using one of these, then optional chaining should work out of the box. At the current state (December 2019) the major editors like VSCode may need a bit of configuration to handle the new syntax but I would expect this to be changed very soon. If you have some trouble, check Configuring VSCode to handle optional chaining-topic from below.
Typescript or CRA is luckily not the requirement to use optional chaining when developing with React. You can do the same with Babel 7.8.0 and greater or with optional chaining plugin (@babel/plugin-proposal-optional-chaining)
Since babel usually isn't used alone but as part of the toolchain, the required packages may differ from setup to setup. If you are starting to use babel, I would suggest to first follow one of these tutorials / repos:
If you have older than 7.8.0, you need to install optional chaining plugin with following command:
npm install --save-dev @babel/plugin-proposal-optional-chaining
and adding it to .babelrc
After this you should have a working setup.
Install ms-vscode.vscode-typescript-next extension which adds support for new typescript features including optional chaining to
Eslint needs a babel-eslint package to understand the new syntax.
npm install --save-dev babel-eslint
It also needs addtional configuration to .eslintrc
All these functions are still as usable as they used to be but using a future native way in code makes it more future proof and reduces the amount of external code needed. Right now the optional chaining needs to be always transpiled but that won't be the case in the future. Once browsers and NodeJS start supporting it, the transpiling can be dropped without the need to change the code.Comment or ask about the post in Dev.to