What are some examples of using optional chaining in React with TypeScript?

What are some examples of using optional chaining in React with TypeScript?

Optional chaining is a feature in TypeScript that allows you to safely access deeply nested properties without having to check each level for null or undefined. In React, this can be particularly useful when dealing with props or state that may not always be defined.

Can you show me a code example?

Sure! Here's a simple example:

const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.address?.city}</p>
    </div>
  );
};

In this example, user?.name will return undefined if user is null or undefined, preventing runtime errors.

What happens if the property doesn't exist?

If the property doesn't exist, optional chaining will return undefined instead of throwing an error. This allows your application to continue running smoothly.

Are there any performance concerns with using optional chaining?

Generally, optional chaining is efficient and doesn't introduce significant performance overhead. However, it's good to use it judiciously in performance-critical paths.