Not handling null or undefined values in JSX

Dealing with null or undefined values incorrectly in JSX is a common source of React application errors. Here’s how to handle these cases properly to prevent runtime crashes and ensure smooth rendering.

The Problem: Unhandled Null/Undefined

// ❌ Dangerous - will crash if user is null/undefined
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

Solutions for Safe Rendering

1. Conditional Rendering

// ✅ Safe - conditional rendering
function UserProfile({ user }) {
  if (!user) {
    return <div>Loading user...</div>;
    // or return null to render nothing
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

2. Optional Chaining (?.)

// ✅ Safe - optional chaining
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.bio ?? 'No bio available'}</p>
    </div>
  );
}

3. Nullish Coalescing (??)

// ✅ Safe - with fallback values
function Post({ post }) {
  return (
    <article>
      <h2>{post.title ?? 'Untitled Post'}</h2>
      <p>{post.content || 'No content available'}</p>
    </article>
  );
}

4. Default Props

// ✅ Safe - default props
function Comment({ comment }) {
  return (
    <div className="comment">
      <p>{comment.text}</p>
    </div>
  );
}

Comment.defaultProps = {
  comment: { text: 'Comment not available' }
};

Advanced Patterns

1. Higher-Order Component for Null Safety

function withNullCheck(WrappedComponent, fallback = null) {
  return function NullCheckedComponent(props) {
    if (!props.data) return fallback;
    return <WrappedComponent {...props} />;
  };
}

// Usage
const SafeUserProfile = withNullCheck(UserProfile, <LoadingSpinner />);

2. Custom NullCheck Component

function NullCheck({ value, fallback = null, children }) {
  if (value == null) return fallback;
  return typeof children === 'function' ? children(value) : children;
}

// Usage
function UserDetails({ user }) {
  return (
    <NullCheck value={user} fallback={<LoadingSpinner />}>
      {(validUser) => (
        <div>
          <h1>{validUser.name}</h1>
          <p>{validUser.email}</p>
        </div>
      )}
    </NullCheck>
  );
}

3. TypeScript Integration

interface User {
  name: string;
  bio?: string; // Optional property
}

function UserProfile({ user }: { user: User | null }) {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.bio ?? 'No bio provided'}</p>
    </div>
  );
}

Best Practices

1. Always validate props before rendering
2. Use TypeScript to catch null/undefined issues at compile time
3. Provide meaningful fallbacks when data is missing
4. Document expected types using PropTypes or JSDoc
5. Consider the empty state in your UI design

// Good example with multiple safeguards
function ProductCard({ product }) {
  // Component-level check
  if (!product) return <EmptyProductCard />;

  return (
    <div className="card">
      {/* Field-level checks */}
      <h3>{product.name ?? 'Unnamed Product'}</h3>
      <p>{product.description || 'No description available'}</p>
      <span>${product.price?.toFixed(2) ?? '0.00'}</span>
    </div>
  );
}

Common Scenarios and Solutions

1. Loading States

function UserPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  if (user === null) {
    return <UserLoadingSkeleton />;
  }

  return <UserProfile user={user} />;
}

2. Array Safeguards

function ProductList({ products }) {
  if (!products?.length) {
    return <div>No products found</div>;
  }

  return (
    <ul>
      {products.map(product => (
        <ProductItem key={product.id} product={product} />
      ))}
    </ul>
  );
}

3. Nested Object Access

function OrganizationProfile({ org }) {
  return (
    <div>
      <h1>{org?.name ?? 'Unnamed Organization'}</h1>
      <p>
        {org?.address?.city}, {org?.address?.country}
      </p>
      <a href={org?.website ?? '#'}>Website</a>
    </div>
  );
}

Remember that proper null checking:

• Prevents runtime errors
• Improves user experience with graceful fallbacks
• Makes your components more robust
• Reduces unexpected behavior

Always assume that data might be null or undefined, especially when dealing with:

• API responses
• User input
• Optional props
• Asynchronously loaded data
• Complex nested objects