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.