Mastering Optional Chaining in React: Best Practices for Safe and Efficient Code

Optional Chaining is a powerful feature in React that can make working with deeply nested objects much easier. When dealing with large data objects from external APIs, it can be challenging to access object properties without explicit checks for null or undefined values. Thankfully, ECMAScript 2020 introduced Optional Chaining, which allows you to safely access these properties without the risk of errors. In this post, we’ll explore the best practices for using Optional Chaining in React and show you how to write safe, efficient, and maintainable code.

The Issue: Dealing with Deeply Nested Objects

Let’s say you have a component that receives a prop called “user” that contains an object with a property called “address.” To access the “street” property of the “address” object, you might write code like this:

const street = user.address.street;        

This code assumes that both “user” and “user.address” are not null or undefined. If either of those values is null or undefined, the code will throw an error and crash your application.

To avoid these errors, you might write code like this:

const street = user && user.address && user.address.street;        

However, this approach can quickly become cumbersome and hard to read, especially when dealing with deeply nested objects.

The Solution: Optional Chaining

With Optional Chaining, you can write safe, efficient, and maintainable code. To use Optional Chaining, add a question mark (?) before each property you want to access. For example, to access the “street” property of the “address” object using Optional Chaining, you can write:

const street = user?.address?.street;        

This code will only access the “street” property if both “user” and “user.address” are not null or undefined. If either of those values is null or undefined, the code will gracefully return undefined instead of throwing an error.

Best Practices for Using Optional Chaining in JavaScript

Here are some best practices for using Optional Chaining in your JavaScript code:

1. Use Optional Chaining sparingly:?Only use Optional Chaining when dealing with deeply nested objects that may be null or undefined.
2. Use nullish coalescing to provide default values:?To provide a default value if a property is null or undefined, use the?nullish coalescing operator (??).

const street = user?.address?.street ?? 'Unknown'        

This code will return the “street” property of the “address” object if it exists and is not null or undefined. If the “street” property is null or undefined, the code will return the string “Unknown” instead.;

1. Use destructuring to simplify your code:?If you’re accessing multiple properties of an object using Optional Chaining, you can simplify your code by using object destructuring.

const { name, email } = user?.profile ?? {};        

This code will destructure the “name” and “email” properties of the “user.profile” object if it exists and is not null or undefined. If the “user.profile” object is null or undefined, the code will destructure an empty object instead.

Conclusion

Optional Chaining is a powerful feature that can help you write safer, more efficient, and more maintainable code in your JavaScript applications. By following the best practices outlined in this post, you can use Optional Chaining with confidence and avoid common errors that arise when dealing with deeply nested objects.

Happy coding ??!

Source of this post:?apoorveverma.com