DEV Community: Raushan Sharma

Is your React app RTL language ready?

Raushan Sharma — Fri, 07 Feb 2020 22:21:36 +0000

1. What is RTL?
2. Why your application should have support for RTL?
3. How to make your React apps RTL ready?
4. Demo source code with all the steps done.
5. What's next?

What is RTL?

In a right-to-left(commonly abbreviated RTL) script, flow of the writing starts from the right side of the page and continues to the left.

For example, Arabic script is the most widespread RTL writing system in modern times.

Why your app should have support for RTL?

In simple words, if you want your application to reach out to wider audience, supporting RTL is one of the features that your application must have, especially if your application is being served in the region where format of writing is RTL.

Below are the screenshots of tajawal - UAE's online travel platform for flights and hotels, in both RTL(Arabic) and LTR(English) language, you can see the differences, it is just like a mirror, where everything gets flipped.

Image source: https://www.tajawal.ae/

How to make your React apps RTL ready?

The below steps are for your apps that you have created with Create React App. Also keep in mind that this process will require you to eject your application and add a lightweight dependancy(development only) webpack-rtl-plugin.

The good thing about customizing your build process to implement webpack-rtl-plugin is that this plugin will on the fly generates a different CSS file as soon as you make any CSS changes while running the application in dev mode, and also while creating deployment build of the application.

Instead of authoring two sets of CSS files, one for each language direction. Now you can author the LTR version and this plugin will automatically create the RTL counterpart for you!

.example {
  display:inline-block;
  padding:5px 10px 15px 20px;
  margin:5px 10px 15px 20px;
  border-width:1px 2px 3px 4px;
  border-style:dotted dashed double solid;
  border-color:red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;
}

Will be transformed into:

.example {
  display:inline-block;
  padding:5px 20px 15px 10px;
  margin:5px 20px 15px 10px;
  border-width:1px 4px 3px 2px;
  border-style:dotted solid double dashed;
  border-color:red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;
}

In the following screenshot you can see that during build it has generated a file main.9e32ea2d.chunk.rtl.css that will have all the CSS that needs to be applied in RTL languages.

Oftentimes, ejecting lets you customize build process, but from that point on you have to maintain the configuration and scripts yourself.

You can learn here more about ejecting your React application

Let's do it!

1.Create a new React app with Create React App if you are starting from scratch or skip to the second step.

npx create-react-app react-rtl

2.CD into your newly created app directory or your own CRA app if you already have one.

cd react-rtl

3.Now is the time to eject your app.

Note: this is a one-way operation. Once you eject, you can’t go back!

npm run eject

4.Add webpack-rtl-plugin and @babel/plugin-transform-react-jsx-source as a dev only dependency.

npm install webpack-rtl-plugin @babel/plugin-transform-react-jsx-source --save-dev

5.Go to config/webpack.config.js to make some configuration changes as follows:

// First you need to import the plugin, make sure the plugin is already installed.
const WebpackRTLPlugin = require('webpack-rtl-plugin')

// ...

module: { ... }
plugins: [
   // ...,
   // Put this inside plugins array to use the plugin
   new WebpackRTLPlugin({
        diffOnly: true,
        minify: true
      })
    ].filter(Boolean),
].filter(Boolean),
// ...

On this stage, if you run yarn build and look up build/static/css folder, you should hopefully see additional .rtl.css file that contains your rtl styles.

Now we need to tell webpack to use MiniCssExtractPlugin.loader for development as well so it will serve styles through link tags instead of inline styles:

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    // isEnvDevelopment && require.resolve('style-loader'), comment-out above line and add the below one 
// to enable MiniCssExtractPlugin loader for dev mode.
      isEnvDevelopment && {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '/',
          reloadAll: true
        }
      },

Also you need to add MiniCssExtractPlugin configs in config/webpack.config.js

module: { ... }
plugins: [
   // ...,

   // isEnvProduction &&  comment-out this line so that MiniCssExtractPlugin 
   // could be enabled for dev mode.
   new MiniCssExtractPlugin({
     // Options similar to the same options in webpackOptions.output
     // both options are optional
     filename: 'static/css/[name].[contenthash:8].css',
     chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
   }),

   // ...
].filter(Boolean),

That's it, our build process is customized to have RTL styled CSS file automatically generated as soon as we make any changes in CSS.

Now to change the layout to RTL, we just need to programmatically include .rtl.css file inside body of the HTML so that it could override the styles of our main CSS file.

You can see the below the how it should look once included within body of the HTML.

The following is the screenshot of the demo Create React App where you can see how the layout flips in RTL mode.

Do you think you are missing some steps?

You can follow the source code of the demo application which I have already made available with all the steps, I guess it will help you.

redraushan / reactjs-rtl-support

This is the ejected version of create-react-app with webpack-rtl-plugin configured to work with dev mode as well as prod build.

Screenshot of the running demo application

If you find the article informative, please don't forget to follow 🙈

Happy coding 😍

What's next?

If you talk optimization and walk optimization, memoization is one of the basic concepts that you must add in your skillsets. Moreover you will also learn how you can easily memoize your React components.

Memoizing React components

Raushan Sharma ・ Feb 2 '20

#react #memo #javascript #optimization

Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

#a11y #web #nvda

Learn how code splitting is a thing that you have been missing.

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19

#react #reactrouter #lazyloading #webpack

Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

#optionalchaining #nullishcoalescing #javascript #es6

Accessibility Mantras for web developers

Raushan Sharma — Tue, 04 Feb 2020 23:42:35 +0000

In this article you will learn some of the best practices in web accessibility which myself as a front-end developer learnt the hard way, by fixing tons of accessibility issues in some of the complex UI components.

Before jumping directly on giving the Accessibility Mantras, I would like to answer some of the What's, Why's, and How's so that you could have better understanding about the subject matter and it's importance.

Following are the topics that I will address part of this article:

1. What is accessibility?
2. What do you mean by web accessibility?
3. Why your web app needs to be accessible?
4. How can you make your website accessible?
5. How do you know if your web application is accessible or not?
6. Accessibility Mantras
7. What's next?

Who is the ideal reader of this article?

A web developer who wants to broaden his/her skillsets by learning some of the best practices to make any web application accessible.

Let's start!

What is accessibility?

Accessibility refers to the design of products, devices, services, or environments so as to be used by people with disabilities.

What do you mean by web accessibility?

Web accessibility is the practice of making your websites or web applications usable by as many people as possible. We traditionally think of this as being about people with disabilities.

How can you make your website accessible?

Meet the standards WCAG 2.0

The Web Content Accessibility Guidelines (WCAG 2.0) covers a wide range of recommendations for making Web content more accessible.

Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

Following these guidelines will also often make your Web content more usable to users in general.

What kinds of disability are we looking at?

The concept of disabilities is extremely broad, and not always well-defined. In loose terms, a person with a disability has greater difficulty with one or more types of tasks than the average person. There are too many types of disabilities to list here, but we will cover some of the major categories.

People with visual impairments:
World Health Organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision."

People with hearing impairments:
Hearing-impaired people also represent a significant userbase — "466 million people worldwide have disabling hearing loss", says the World Health Organization's Deafness and hearing loss fact sheet.

Source: http://www.emro.who.int/control-and-preventions-of-blindness-and-deafness/announcements/action-plan-prevention-avoidable-blindness-visual-impairment-2014-2019.html

Following are some commonly available tools that visually impaired person use to access any accessible websites.

Some are paid commercial products, like JAWS (Windows) and Dolphin Screen Reader (Windows).
Some are free products, like NVDA (Windows), ChromeVox (Chrome, Windows and Mac OS X), and Orca (Linux).

Why your web app needs to be accessible?

If you see the number of people who have limited capabilities while accessing web contents - 285 million people with visual impairments and 66 million people worldwide have disabling hearing loss, it's a huge number and we can't certainly ignore them when we are writing any content for web.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web. - https://www.w3.org/WAI/fundamentals/accessibility-intro/

How do you know if your web application is accessible or not?

Lighthouse is one of the tools that you can use to audit your web pages for accessibility issues, it also has audits for performance, progressive web apps, SEO and more.

These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

NVDA screen reader is another free tool that is widely used among visually impaired people, as a developer you can install on your machine and run against any webpage to have an idea about how the actual content is being narrated to the accessible person.

If you really want to have a feel of how a visually impaired person is accessing your web content, you just need to close your eyes and try to navigate your web pages with the help of any screen-readers, preferably NVDA. You can do the manual testing this way and believe me, this is what I have been doing for years to fix some of the challenging accessibility issues.

NVDA also has a dedicated speech viewer that is handy in case you want to see the all speech logs that that is being read out.

Please note: NVDA is only available for PCs running Microsoft Windows 7 SP1 and later.

You might want to have a look at the following an interesting article written by David Ball - Things I learned by pretending to be blind for a week where David has put his observations that he experienced while pretending to be blind for a week.

Accessibility Mantras for web developers

Finally, as you have reached this far, now you might have enough learning to make these accessibility mantras sense to you, in other words - these are the best practices that I have been keeping in mind while developing an accessible web content/page or component.

1. Making use of aria-label
In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

Note: Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.

The following example shows how aria-label could be used to distinguish two navigation landmarks, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

<div role="navigation" aria-label="Primary">
  <ul>
    <li>...a list of links here ...</li>
  </ul>
</div>
<div role="navigation" aria-label="Secondary">
  <ul>
    <li>...a list of links here ...</li>
  </ul>
</div>

2. Using aria-labelledby to combine multiple labels

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs

<form>
  <p>
    <span id="timeout-label" tabindex="-1">
      <label for="timeout-duration">Extend time-out to</label>
    </span>

    <input
      type="text"
      size="3"
      id="timeout-duration"
      value="20"
      aria-labelledby="timeout-label timeout-duration timeout-unit"
    />
    <span id="timeout-unit" tabindex="-1"> minutes</span>
  </p>
</form>

3. You must know when to use aria-hidden
Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:

Purely decorative content, such as icons or images
Duplicated content, such as repeated text
Offscreen or collapsed content, such as menus

4. Making use of aria-role, states and properties
ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element).

You must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element).

Example: role="button"

The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons.

<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>

You can learn more about many different roles and their use cases in detail here

5. aria-livefor dynamically updated content
Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. Below is a list of each related ARIA live region property with a description.

Normally, only aria-live="polite" is used.

If you try to access the following codepen which demonstrated the use case of aria-live with any screen-reader, you will notice that it starts announcing the content as soon as it's updated.

Another ideal usecase of aria-live would be making screen-readers announce whenever a user comes online or goes offline in your chat application.

<div id="userStatus" class="screen-readers-only" aria-live="polite">Raushan is online</div>

You can learn more about aria-live here.

6. Accessing Modal popups can be a nightmare for screen-readers if not developed properly

Modal dialogs must contain their tab sequence. That is, Tab and Shift + Tab do not move focus outside the dialog.

Example: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

ARIA Roles, States, and Properties:

The element that serves as the dialog container has a role of dialog.
All elements required to operate the dialog are descendants of the element that has role dialog.
The dialog container element has aria-modal set to true.
The dialog has either aria-labelledby or aria-label property that refers to a visible dialog title.

7. Tab order plays a very important role in terms of accessibility, you must know how to deal with tabindex

The tabindex attribute of defines the logical navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not. tabindex="-1" will make an element not accessible by keyboards.
Learn more about tabindex...

8. Providing text alternative for meaningful images

Images must have text alternatives that describe the information or function represented to them. This ensures that images can be used by people with various disabilities.

George Washington Painting:

<img src="image.jpg" alt="Geroge Washington and Lafayette on horseback talking to soldiers in snow at Valley Forge">

9. 200% rule
Web pages shouldn’t break while resizing, as it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier. Users may benefit from scaling all content on the Web page, but text is most critical.

Web-page must be accessible and working at least for 200% zoom.

10. Skip to main content implementation
When keyboard-only users interact with your site they use the tab key to jump from link to link.

If you have a lot of links at the first of your page in your header or in a menu, they must tab through those every time they come to a new page just to get to the main content. Providing a skip to main content link allows them to easily bypass this.

You can see the in the below screenshot that how BBC has implemented Skip to main content.

Source: https://www.bbc.com/

If you are interested in learning how it's done, you might want to have a look at this.

Note: These techniques are also sometimes referred to as “skip navigation links”.

What's next?

More Resources:

Interested in having a look at my other articles?

Memoizing React components

Raushan Sharma ・ Feb 2 ・ 4 min read

#react #memo #javascript #optimization

Learn how code splitting is a thing that you have been missing.

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19 ・ 3 min read

#react #reactrouter #lazyloading #webpack

Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19 ・ 2 min read

#optionalchaining #nullishcoalescing #javascript #es6

Memoizing React components

Raushan Sharma — Sun, 02 Feb 2020 22:48:49 +0000

Alright what is Memoization first?

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

In other words, Memoization is a way to lower a function's time cost in exchange for space cost; that is, memoized functions become optimized for speed in exchange for a higher use of computer memory space.

If you see the diagram below, a function named sum is getting called multiple times. Even though the function is called with the same parameters 1,2 it has to re-calculate the result.

Well, wouldn't it be nice if we put the already calculated result and store somewhere in memory against the parameters passed while each call. This way we can return directly from the memory if we observe that the result for the passed parameter was already calculated?

Have a look at below function call diagram, you can see that the result is directly being return from memory when we are calling memoSum(1,2) for the second time with same parameters 1,2.

This is pretty much fine to have a function without memoization if we are considering a function which is not CPU intensive, but however, if you consider a pure function which is very frequently called, and takes considerable amount of time to return the results, it's better to memoize the function, so that already computed results can be used instead of computing again and again for the same parameters.

Always remember that only pure functions can be memoized. If you don't have a clue about what makes a function pure, you might want to follow the following article written by ysael pepin which explains on of the most basic concepts of functional programming - https://dev.to/ysael/functional-programming-basics-part-1-pure-function-e55

How can we memoize a given pure function?

Well there are bunch of libraries available which has already implemented memoization and made it available different API's for that.

Lodash is one of the JavaScript libraries that provides memoize function to solve this problem.


    
const lodash = require('lodash');

const add = function(a, b){return a + b};
const memoizedAdd = lodash.memoize(add);

console.log('1 + 1', memoizedAdd(1,1));

// This will return the memoized result
console.log('1 + 1', memoizedAdd(1,1));

But what memoization has to do with React components?

As we already know that a React component is just like another JavaScript function that returns bunch of HTML tags, that we call JSX and the parameters passed to this very function is called Props.

Yes your guess is right, we can definitely memoize a React component.

Memoizing a React Component with React.memo

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo is a higher order component. It’s similar to what React.PureComponent does, but for functional components.

If your function component renders the same result given the same props, you can wrap it in a call to React.memo() for a speedy rendering in some cases by memoizing the result. This means that React will skip rendering process for the component and doesn't perform a virtual DOM difference check, it will just re-use the last rendered result.

export function PassengerDetails({ passengerName, departureDate }) {
  return (
    <div>
      <div>Passenger: {passengerName}</div>
      <div>Departure: {departureDate}</div>
    </div>
  );
}

export const MemoPassengerDetails = React.memo(PassengerDetails);

By default it will only shallowly compare complex objects in the props object.

If you want control over the comparison, you can also provide a custom comparison function as the second argument.


export function PassengerDetails({ passengerName, departureDate }) {
  return (
    <div>
      <div>Passenger: {passengerName}</div>
      <div>Departure: {departureDate}</div>
    </div>
  );
}


function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}

export default React.memo(PassengerDetails, areEqual);

Limitations

To be able to memoize, the function must be a pure function.
Where space is critical than computation time, you might not need to memoize you function.
When you function is less frequently executed, there's no much benefit of memoizing the function.

Things to remember

Instead of Lodash's memoize use React.memo to memoize React components as the later one is more optimized to work with React components.
React.memo only compare props shallowly, if you want to deep compare the props then it's better to pass your own compare function as a second parameter in React.memo function.
Do not get confused React.memo with useMemo, you can learn about useMemo which is explained well by Linas Spukas in the following article - https://dev.to/spukas/react-usememo-for-optimisation-5gna

If you find the article informative, please don't forget to follow.

Happy coding :)

Interested in having a look at my other articles?
Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

#a11y #web #nvda

Learn how code splitting is a thing that you have been missing.

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19

#react #reactrouter #lazyloading #webpack

Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

#optionalchaining #nullishcoalescing #javascript #es6

Route-based code splitting in ReactJS

Raushan Sharma — Sun, 08 Dec 2019 11:36:12 +0000

Bundling

Since decades (if not years), it has been a general practice to bundle all the javascript files in a single main.bundle.js file that will have all the codes of the project, including third party libraries.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="main.bundle.js"></script>
</head>
<body>
    <h1>Route-based code splittig in ReactJS</h1>
</body>
</html>

Separate vendor bundling

Another common optimisation technique is to define a Vendor bundle vendor.bundle.js to include all the third-party libraries in a separate bundle that can be cached much longer than your main bundle - main.bundle.js (because, presumably, you wouldn’t update your third-party dependencies nearly as much as you would update your app code).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vendor.bundle.js"></script>
    <script src="main.bundle.js"></script>
</head>
<body>
    <h1>Route-based code splittig in ReactJS</h1>
</body>
</html>

Problem

The above two approaches certainly works pretty well considering small single page application. However if your application grows and have multiple-routes, you will end up loading unnecessary codes that are not particularly needed for that specific route.

This can considerably affect the initial rendering of your page, and you might be already aware that how page speed affects SEO ranking of your application

You also don't want your bandwidth to be eaten-up by downloading on client side, especially on mobile devices.

For example, there is no point of loading functional codes for Home page in Contact us page.

Route-based bundling in ReactJS (16.6 and onwards)

Considering all the above problems, it does completely make sense to split the code on the basis of routes.

Here’s an example of how to setup route-based code splitting into your app using libraries like React Router with React.lazy.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const ContactUs = lazy(() => import('./routes/ContactUs'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/contact-us" component={ContactUs}/>
      </Switch>
    </Suspense>
  </Router>
);

One thing here is to notice that while the component is being fetched in a lazy manner, you might see some flickering or delay based on network conditions or computation in rendering. In that case, we can take advantage of Suspense API and and pass a component in fallback like a spinner.

const Home = React.lazy(() => import('./home')); // Lazy-loaded

// Show a spinner while the home is loading
<Suspense fallback={<Spinner />}>
  <Home />
</Suspense>

Note:
React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, it recommend to use Loadable Components that supports server-side rendering.

In Create React App, code-splitting is already configured for you and you can start using it immediately. It’s also supported out of the box in Next.js.

If you’re setting up Webpack yourself, you’ll probably want to read Webpack’s guide on code splitting.

If you find the article informative, please don't forget to follow.

Happy coding :)

Interested in having a look at my other articles?

Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

#a11y #web #nvda

Memoizing React components

Raushan Sharma ・ Feb 2 '20

#react #memo #javascript #optimization

Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

#optionalchaining #nullishcoalescing #javascript #es6

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma — Sun, 10 Nov 2019 10:14:10 +0000

Optional Chaining & Nullish Coalescing are coming to JavaScript! They're short and readable. Both these features are currently in stage 3, however we can start using the same with the help of following plugins that Babel provides:

@babel/plugin-proposal-optional-chaining
@babel/plugin-proposal-nullish-coalescing-operator

The optional chaining operator can be combined with the nullish coalescing ?? operator when a non-undefined default value is needed. This enables safe deep property access with a specified default value, addressing a common use case that previously required libraries such as lodash’s _.get:

const object = { id: 123, names: { first: 'Alice', last: 'Smith' }};

{ // With lodash:
  const firstName = _.get(object, 'names.first');
  // → 'Alice'

  const middleName = _.get(object, 'names.middle', '(no middle name)');
  // → '(no middle name)'
}

{ // With optional chaining and nullish coalescing:
  const firstName = object?.names?.first ?? '(no first name)';
  // → 'Alice'

  const middleName = object?.names?.middle ?? '(no middle name)';
  // → '(no middle name)'

}

Github:
https://github.com/tc39/proposal-nullish-coalescing
https://github.com/tc39/proposal-optional-chaining

V8.dev:
https://v8.dev/features/nullish-coalescing
https://v8.dev/features/optional-chaining

If you find the article informative, please don't forget to follow.

Happy coding :)

Interested in having a look at my other articles?

Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.

DEV Community: Raushan Sharma

Is your React app RTL language ready?

What is RTL?

Why your app should have support for RTL?

How to make your React apps RTL ready?

Let's do it!

Do you think you are missing some steps?

redraushan / reactjs-rtl-support

This is the ejected version of create-react-app with webpack-rtl-plugin configured to work with dev mode as well as prod build.

Screenshot of the running demo application

What's next?

Memoizing React components

Raushan Sharma ・ Feb 2 '20

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

Accessibility Mantras for web developers

Who is the ideal reader of this article?

What is accessibility?

What do you mean by web accessibility?

How can you make your website accessible?

What kinds of disability are we looking at?

Why your web app needs to be accessible?

How do you know if your web application is accessible or not?

Accessibility Mantras for web developers

What's next?

Memoizing React components

Raushan Sharma ・ Feb 2 ・ 4 min read

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19 ・ 3 min read

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19 ・ 2 min read

Memoizing React components

Alright what is Memoization first?

How can we memoize a given pure function?

But what memoization has to do with React components?

Memoizing a React Component with React.memo

Limitations

Things to remember

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

Route-based code splitting in ReactJS

Bundling

Separate vendor bundling

Problem

Route-based bundling in ReactJS (16.6 and onwards)

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 '20

Memoizing React components

Raushan Sharma ・ Feb 2 '20

JavaScript - Optional Chaining & Nullish Coalescing

Raushan Sharma ・ Nov 10 '19

JavaScript - Optional Chaining & Nullish Coalescing

Accessibility Mantras for web developers

Raushan Sharma ・ Feb 4 ・ 10 min read

Memoizing React components

Raushan Sharma ・ Feb 2 ・ 4 min read

Route-based code splitting in ReactJS

Raushan Sharma ・ Dec 8 '19 ・ 3 min read