A new version of CRA was released about 7 days ago, but somehow I missed the exciting news and found out about it just now. So here’s a short summary of the most exciting updates in case you missed it too.
Link to the release notes at the end of this post!
Allows the community to build and share their own React Boilerplates and use others if needed.
npx create-react-app my-app --template typescript
If you don’t specify a particular template, it will default to the well known base template that we all know and love ♥️.
Or Elvis operator from CoffeeScript
Personally I’ve been waiting for this feature to be included by default for a long time. The feature is very useful as accessing deeply nested values in JS objects can be a painful experience sometimes.
It allows the developer to access nested values with the
? symbol like so:
const data = a?.b?.c?.d;
If any of these are non existent, currently the JS engine will throw a
Uncaught TypeError…, but with optional chaining it behaves differently, it will just default to
Previously developers used
&& to access a deeply nested value:
const data = a && a.b && a.b.c && a.b.c.d;
This approach is ugly to read and can easily become a nightmare. Another solution were helper functions from libraries like
const data = get(a, [‘b’, ‘c’, ‘d’], ‘defaultValue’);
The issue with this approach is that you cannot use IntelliSense as to access the value you have to provide the path as a string.
Optional Chaining proposal currently is in Stage 4 which means that eventually it will be adopted by the JS engines natively, so it’s a feature that is worth learning and getting your eyes used to 👀.
You can find more details on the official page of the proposal here:
When accessing a value that’s nested in an object, in some cases we want to have a default value if the value from the object is
Currently the most used(and naive) approach is:
const data = a.b.c.undefinedValue || ‘default value’;
falsy values, the above code will use the
default value when the
undefinedValue is an empty string, number 0 or
false. Sometimes this behaviour is wrong and might produce unexpected(and funny 😅) results.
So the Nullish Coalescing operator is here to handle the checks against
null cases properly.
const data = a.b.c.undefinedValue ?? ‘default value’;
The value of
data will be
default value only when the value of
You can also combine the Optional Chaining operator with the Nullish Coalescing operator to have more control over the outcome:
const data = a?.b?.c?.d ?? ‘default value’;
The Nullish Coalescing operator is currently in Stage 3, meaning that it will most probably make it as a native operator. Definitely worth your time to learn and get used to!
Not the most exciting feature for me as I don’t usually work with big numbers, but I’m sure other people will find this feature useful.
It allows the developer to separate big numbers with a
_(underscore) for readability purposes.
const number = 1000000000; // It is pretty hard to read this number
But now it can conveniently be written as:
const number = 1_000_000_000; // Definitely much easier to make sense of it
You can find more information on this proposal here:
I know this post seems more like a new JS features post and not so much React specific, but there’s a particular reason why I'm excited about this version of CRA.
The React community is one of the biggest communities in the JS world, and the adoption of these proposals by the React team is a huge push forward for JS as a programming language. I find it interesting how we as a community can influence the development of one of the most used languages in the world and that’s why this update is particularly exciting for me.
It would be great to hear your opinions on these changes, as well as on the influence of the React community on the JS language in the comments below.
PS: I didn’t cover all of the changes in the v3.3.0 but you can find all the details here: