0
# Basic Conditional Rendering
1

2
Core If/Then/Else components for standard conditional rendering scenarios. These components provide clear, readable alternatives to JavaScript ternary operators and complex conditional logic.
3

4
## Capabilities
5

6
### If Component
7

8
Primary conditional rendering component that evaluates a condition and renders either Then or Else blocks based on the result.
9

10
```typescript { .api }
11
/**
12
 * If condition evaluates to true, renders the <Then /> block,
13
 * otherwise renders the <Else /> block. Either block may be omitted.
14
 * Can contain any number of <Then /> or <Else /> blocks,
15
 * but only the first matching block will be rendered.
16
 */
17
const If: FC<{
18
  condition: BooleanLike | (() => BooleanLike);
19
  keepAlive?: boolean;
20
  children: ReactNode;
21
}>;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { If, Then, Else } from "react-if";
28

29
// Basic boolean condition
30
<If condition={user.isActive}>
31
  <Then>
32
    <span className="status-active">User is active</span>
33
  </Then>
34
  <Else>
35
    <span className="status-inactive">User is inactive</span>
36
  </Else>
37
</If>
38

39
// Function condition for lazy evaluation
40
<If condition={() => expensiveComputation() > threshold}>
41
  <Then>
42
    <ExpensiveComponent />
43
  </Then>
44
  <Else>
45
    <SimpleComponent />
46
  </Else>
47
</If>
48

49
// Multiple Then/Else blocks (first matching type renders)
50
<If condition={score >= 90}>
51
  <Then>Grade: A</Then>
52
  <Then>This won't render</Then>
53
  <Else>Grade: Below A</Else>
54
</If>
55
```
56

57
### Then Component
58

59
Content block that renders when the parent If condition evaluates to true.
60

61
```typescript { .api }
62
/**
63
 * Must contain only a single child, which it renders as-is.
64
 * Should not be used outside of an <If /> block.
65
 * Renders when parent If condition is true.
66
 */
67
const Then: FC<{
68
  children?: ReactNode | (() => JSX.Element);
69
}>;
70
```
71

72
**Usage Examples:**
73

74
```typescript
75
// Static content
76
<Then>
77
  <div>Content to show when condition is true</div>
78
</Then>
79

80
// Function children for lazy evaluation
81
<Then>
82
  {() => <ExpensiveComponent data={heavyComputation()} />}
83
</Then>
84

85
// Multiple elements
86
<Then>
87
  <h1>Success!</h1>
88
  <p>Operation completed successfully.</p>
89
</Then>
90
```
91

92
### Else Component
93

94
Content block that renders when the parent If condition evaluates to false.
95

96
```typescript { .api }
97
/**
98
 * Must contain only a single child, which it renders as-is.
99
 * Should not be used outside of an <If /> block.
100
 * Renders when parent If condition is false.
101
 */
102
const Else: FC<{
103
  children?: ReactNode | (() => JSX.Element);
104
}>;
105
```
106

107
**Usage Examples:**
108

109
```typescript
110
// Static content
111
<Else>
112
  <div>Content to show when condition is false</div>
113
</Else>
114

115
// Function children for lazy evaluation
116
<Else>
117
  {() => <DefaultComponent />}
118
</Else>
119

120
// Error handling
121
<Else>
122
  <div className="error">
123
    <span>Something went wrong</span>
124
    <button onClick={retry}>Retry</button>
125
  </div>
126
</Else>
127
```
128

129
## Performance Optimization
130

131
### Lazy Evaluation with Function Children
132

133
Use function children to prevent unnecessary computation when conditions are false:
134

135
```typescript
136
const DataDisplay = ({ shouldShow, data }) => (
137
  <If condition={shouldShow}>
138
    <Then>
139
      {() => {
140
        // This expensive operation only runs when condition is true
141
        const processedData = expensiveDataProcessing(data);
142
        return <DataVisualization data={processedData} />;
143
      }}
144
    </Then>
145
    <Else>
146
      <div>No data to display</div>
147
    </Else>
148
  </If>
149
);
150
```
151

152
### Nested Conditions
153

154
Complex conditional logic can be expressed through component nesting:
155

156
```typescript
157
<If condition={user.isLoggedIn}>
158
  <Then>
159
    <If condition={user.isAdmin}>
160
      <Then>
161
        <AdminPanel />
162
      </Then>
163
      <Else>
164
        <UserDashboard />
165
      </Else>
166
    </If>
167
  </Then>
168
  <Else>
169
    <LoginForm />
170
  </Else>
171
</If>
172
```
173

174
## Type Definitions
175

176
```typescript { .api }
177
type BooleanLike = boolean | string | number | null | undefined | ExtendablePromise<any>;
178

179
type ComponentWithConditionProps<P = {}> = P & PropsWithChildren<{
180
  condition: (() => BooleanLike) | BooleanLike;
181
}>;
182

183
type FunctionComponentWithImplicitChildren<P = {}> = FunctionComponent<{
184
  children?: ReactNode | undefined | ((...args: unknown[]) => JSX.Element);
185
} & P>;
186
```