Greetings, traveler!

SwiftUI’s declarative syntax makes it easy to build dynamic user interfaces, but sometimes you need to apply view modifiers conditionally based on specific states or conditions. One approach to achieve this is through a custom conditional view modifier, which can streamline your code and improve readability. However, while this technique is powerful, it comes with potential side effects that developers must understand to avoid unexpected behavior. In this article, we’ll explore how to implement a conditional view modifier, provide a practical example, and discuss the pitfalls to watch out for.

What is a Conditional View Modifier?

A conditional view modifier is a custom extension on SwiftUI’s View protocol that allows you to apply a modifier to a view only when a specific condition is met. This approach is particularly useful for scenarios where you want to toggle visual properties based on runtime conditions like user preferences or device states. By encapsulating conditional logic in a reusable extension, you can keep your view code clean and maintainable.

The core idea is to create a method that takes a boolean condition and a closure defining the transformation to apply when the condition is true. If the condition is false, the original view is returned unchanged. This pattern aligns with SwiftUI’s declarative nature, making it intuitive to use.

Implementing a Conditional View Modifier

Let’s create a practical example to demonstrate how a conditional view modifier works. Suppose you’re building a task management app where tasks can be marked as “urgent.” You want urgent tasks to have a distinct appearance, such as a red border and bold text, but only when the isUrgent property is true.

Here’s how you can implement a conditional view modifier:

import SwiftUI

extension View {
    @ViewBuilder
    func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

struct TaskView: View {
    let taskName: String
    let isUrgent: Bool
    
    var body: some View {
        Text(taskName)
            .padding()
            .if(isUrgent) { view in
                view
                    .font(.system(size: 16, weight: .bold))
                    .border(Color.red, width: 2)
            }
            .background(Color.gray.opacity(0.1))
    }
}

In this example, the if extension checks the isUrgent boolean. If true, it applies a bold font and a red border to the Text view; otherwise, the view remains unmodified. The @ViewBuilder attribute ensures that the closure can handle complex view hierarchies, making the extension versatile.

This approach is clean and reusable. You can apply if to any view in your app, reducing code duplication and keeping your view logic concise. For instance, you could use it to conditionally apply accessibility modifiers, adjust padding for specific screen sizes, or toggle visual effects based on user settings.

The Convenience of Conditional View Modifiers

The primary advantage of conditional view modifiers is their ability to simplify view composition. Without them, you might resort to duplicating views within if-else statements, which can lead to verbose and error-prone code. For example, without the if extension, the TaskView might look like this:

struct TaskView: View {
    let taskName: String
    let isUrgent: Bool
    
    var body: some View {
        if isUrgent {
            Text(taskName)
                .padding()
                .font(.system(size: 16, weight: .bold))
                .border(Color.red, width: 2)
                .background(Color.gray.opacity(0.1))
        } else {
            Text(taskName)
                .padding()
                .background(Color.gray.opacity(0.1))
        }
    }
}

Of course, we can resort to ternary operators, but let’s pretend that they are not applicable in this example.

The Hidden Side Effects

While conditional view modifiers are convenient, they can introduce subtle issues that may not be immediately apparent. These side effects stem from how SwiftUI manages view identity and state, as highlighted in discussions within the SwiftUI community.

State Loss with DynamicProperty

SwiftUI relies on a view’s identity and position in the view hierarchy to manage the memory of DynamicProperties like @State, @FocusState and @StateObject properties. When you use a conditional view modifier like if, SwiftUI treats the modified and unmodified views as distinct entities in the view tree. If the condition changes (e.g., isUrgent toggles from false to true), SwiftUI may recreate the view, resetting any dynamic properties in that view (or subviews) to their initial values.

Animation Issues

Conditional view modifiers can also disrupt animations. When the condition changes, SwiftUI doesn’t animate the transition between the modified and unmodified states; instead, it performs a fade transition because it considers the views distinct. For example, if you animate the isUrgent toggle in the TaskView example, the red border and bold font will appear abruptly rather than smoothly transitioning.

Subtle Bugs in Complex UIs

The issues with state loss and animations may not surface immediately, especially if the condition changes infrequently. In complex UIs with multiple conditional modifiers, these problems can manifest as flickering animations, lost user input, or inconsistent view states, making them difficult to debug. Developers might copy a conditional modifier like if into their codebase, unaware of these pitfalls, only to encounter issues weeks later. You can read more about it here.

When to Use Conditional View Modifiers

Given these side effects, conditional view modifiers are best suited for scenarios where the condition is static during the view’s lifetime. For dynamic conditions, consider alternatives like the ternary operator or computed properties to preserve view identity. For instance, you can rewrite the TaskView to avoid conditional modifiers:

struct TaskView: View {
    let taskName: String
    let isUrgent: Bool
    
    var body: some View {
        Text(taskName)
            .padding()
            .font(.system(size: 16, weight: isUrgent ? .bold : .regular))
            .border(isUrgent ? Color.red : Color.clear, width: 2)
            .background(Color.gray.opacity(0.1))
    }
}

This approach ensures that SwiftUI maintains the view’s identity, preventing state loss and enabling smooth animations.

Safer Approach

You can create a Container View to store the condition in a State variable. This will avoid the problems described above.

extension View {
    func `if`<Content: View>(
        _ condition: Bool,
        transform: @escaping (Self) -> Content
    ) -> some View {
        ConditionalView(condition: condition) {
            self
        } transform: {
            transform($0)
        }
    }
}

private struct ConditionalView<Content: View, ModifiedContent: View>: View {
    @State var condition: Bool
    let content: () -> Content
    let transform: (Content) -> ModifiedContent
    
    var body: some View {
        if condition {
            transform(content())
        } else {
            content()
        }
    }
}

Conclusion

Conditional view modifiers offer a convenient way to apply modifiers dynamically in SwiftUI, reducing code duplication and enhancing readability. By creating a reusable extension like if, you can streamline your view logic and handle complex UI requirements with ease. However, their use comes with significant caveats, including potential state loss, broken animations, and subtle bugs in dynamic UIs. To use them effectively, reserve conditional modifiers for static conditions and opt for alternatives like ternary operators for runtime changes. By understanding both their benefits and limitations, you can make informed decisions to build robust and performant SwiftUI applications.