The Optional Chaining Operator, `?.`, can be used as a simple way to check if a variable has a _nullish_ value (`null` or `undefined`). Instead of littering your app with checks like `data && data.movies`, you can write `data?.movies` instead.

Check out the [Optional chaining MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to read more about the new operator.

https://app.egghead.io/api/v1/lessons/react-use-the-optional-chaining-operator-to-simplify-checking-for-nullish-values/subtitles

Use the Optional Chaining Operator to Simplify Checking for Nullish Values

Sam Selikoff: [0:00] This app renders a list of movies after fetching the data from an API endpoint. If I reload the app, you will see that it first renders without the data, and then re-renders once the data is coming back.

[0:11] Since it needs to be able to render before the data has come back, we have this check to make sure that there is data before we try to map over the movies key.

[0:20] If we were to remove this check, we'll get an error that React is trying to read property movies of null. Adding a check like data && data.movies is a common way to solve this problem.

[0:33] We're making sure the data variable isn't null or undefined before trying to call that movies on it. The optional chaining feature is a new syntax that lets us do the same thing. Instead of having to check whether data is undefined on its own, we can do it like this ?.

[0:51] This ?. is the syntax for optional chaining. It essentially acts like a short circuit for anything to the left of it. It means if the thing to the left isn't null or undefined, go ahead and continue with the statement. If it is, just return undefined.

[1:09] Here when we save this and look at our app, we can see that the initial render doesn't have any data but it doesn't throw that error. Once the data comes back, we're able to map over the rest of the movies and render out the full table.

Use the Optional Chaining Operator to Simplify Checking for Nullish Values

Share this video with your friends