# Variation Distribution

When running an A/B Test, you need to distribute users across Variations and implement logic for each Variation. You can use the Hackle SDK to handle user distribution.

## useVariation or useLoadableVariation

You can distribute users to a specific Variation and receive the result using Hackle's provided components or Hooks API. You must pass the **Experiment Key** when distributing.

<table><thead><tr><th width="150">Parameter</th><th width="120">Type</th><th width="110">Required</th><th>Constraints</th></tr></thead><tbody><tr><td>Experiment Key (key)</td><td><code>int</code></td><td>Required</td><td><code>-</code></td></tr></tbody></table>

#### Example

In the example code below, Experiment Key 42 is passed, and there are two Variations: A and B.

{% tabs %}
{% tab title="Component 사용" %}

```javascript
import {HackleExperiment, HackleVariation} from '@hackler/react-native-sdk';

function App() {
  return (
    // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
    // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
    <HackleExperiment experimentKey={42}>
      <HackleVariation variation={"A"}> // 할당받은 그룹에 대한 로직
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}
```

{% endtab %}

{% tab title="Hooks API 사용" %}

```javascript
function App() {
  // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
  // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
  const variation = useVariation(42)

  // 할당받은 그룹에 대한 로직
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}


// Loadable 사용 시
function App() {
  // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
  // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
  const { loaded, result } = useLoadableVariation(42)

  // SDK Loading 전 컴포넌트 비노출
  if (!loaded) return null

  // 할당받은 그룹에 대한 로직
  if (result === "A") return <AwesomeFeature />
  if (result === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}
```

{% endtab %}
{% endtabs %}

## useVariationDetail or useLoadableVariationDetail

The `useVariationDetail()` Hooks API works the same as `useVariation()` but also provides the reason for the distribution decision. This method is useful for verifying that distribution is working correctly.

<table><thead><tr><th width="150">Parameter</th><th width="120">Type</th><th width="110">Required</th><th>Constraints</th></tr></thead><tbody><tr><td>Experiment Key (key)</td><td><code>int</code></td><td>Required</td><td><code>-</code></td></tr></tbody></table>

#### Example

You must pass the Experiment Key as a parameter. In the example code below, Experiment Key 42 is passed.

```javascript
// 분배 결정 상세
const decision = useVariationDetail(42)

// 분배 그룹
const variation = decision.variation

// 분배 결정 사유
const reason = decision.reason

// 분배 결정 상세 - Loadable 사용 시
const { loaded, result } = useLoadableVariationDetail(42)

// 분배 그룹
const variation = result.variation

// 분배 결정 사유
const reason = result.reason
```

### Distribution Reason

The distribution decision reason is returned in the format **`SDK_NOT_READY`**. See the table below for details.

<table><thead><tr><th width="319.12109375">Distribution Reason</th><th width="305.35546875">Description</th><th>Distribution Result</th></tr></thead><tbody><tr><td><code>SDK_NOT_READY</code></td><td><p>The SDK is not ready to use.</p><p>(e.g., initialization attempted with an invalid SDK Key)</p></td><td>A (Control Group)</td></tr><tr><td><code>EXPERIMENT_NOT_FOUND</code></td><td>No A/B Test was found for the provided Experiment Key. The Experiment Key may be incorrect, or the experiment may be archived.</td><td>A (Control Group)</td></tr><tr><td><code>NOT_IN_MUTUAL_EXCLUSION_EXPERIMENT</code></td><td>The experiment is included in Mutually Exclusive Settings, but<br>the user was not assigned to that Mutually Exclusive Group.</td><td>A (Control Group)</td></tr><tr><td><code>EXPERIMENT_DRAFT</code></td><td>The A/B Test is in draft state.</td><td>A (Control Group)</td></tr><tr><td><code>EXPERIMENT_PAUSED</code></td><td>The A/B Test is paused.</td><td>A (Control Group)</td></tr><tr><td><code>EXPERIMENT_COMPLETED</code></td><td>The A/B Test has ended.</td><td>Winning Variation selected at completion</td></tr><tr><td><code>OVERRIDDEN</code></td><td>The user was assigned to a specific group<br>by Override.</td><td>Override-assigned<br>group</td></tr><tr><td><code>NOT_IN_EXPERIMENT_TARGET</code></td><td>The user is not an A/B Test target.</td><td>A (Control Group)</td></tr><tr><td><code>TRAFFIC_NOT_ALLOCATED</code></td><td>The A/B Test is running, but<br>the user was not allocated to the test.</td><td>A (Control Group)</td></tr><tr><td><code>TRAFFIC_ALLOCATED</code></td><td>The user has been allocated to the A/B Test.</td><td>Allocated group</td></tr><tr><td><code>VARIATION_DROPPED</code></td><td>The originally allocated group has been removed from the test.</td><td>A (Control Group)</td></tr><tr><td><code>INVALID_INPUT</code></td><td>The input value is invalid.</td><td>A (Control Group)</td></tr><tr><td><code>EXCEPTION</code></td><td>An unknown error occurred.</td><td>A (Control Group)</td></tr></tbody></table>

### Parameters

{% hint style="info" %}
This feature is supported in React Native SDK version 3.3.0 and above.
{% endhint %}

* You can also receive the parameter values for the assigned Variation via the `useVariationDetail()` Hooks API.
* You can use the config object and `getSync()` method to retrieve the Parameter Settings configured on the A/B Test screen. If you change the value on the A/B Test parameter settings screen, the updated value is applied to your code.
* The `parameterKey` in the `getSync()` method is the key configured in the A/B Test parameter settings, and `defaultValue` is the value returned when distribution fails or an incorrect parameter type value is provided.
* To correctly retrieve the configured value, you must enter a value of the same type as the parameter type you configured in `defaultValue`.

<table><thead><tr><th width="120">Type</th><th width="200">Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>get</code></td><td><code>string</code>, <code>number</code>, <code>boolean</code></td><td><ul><li>Returns the configured parameter value.</li><li>JSON type can be received as a string (String).</li><li>The default value for JSON type must be entered as a string type.</li></ul></td></tr></tbody></table>

#### Example

```javascript
// 분배 결정 상세
const decision = useVariationDetail(42)

//분배 결정 상세에서 getSync() 메소드를 통해 parameter 값 가져오기
const parameterValue = decision.getSync("parameterKey", "defaultValue")

// string 유형의 parameter값 예제
const strValue = decision.getSync("parmeterKey", "defaultValue")

// 분배 결정 상세 - Loadable 사용 시
const { loaded, result } = useLoadableVariationDetail(42)

//분배 결정 상세에서 getSync() 메소드를 통해 parameter 값 가져오기
const parameterValue = result.getSync("parameterKey", "defaultValue")

// string 유형의 parameter값 예제
const strValue = result.getSync("parmeterKey", "defaultValue")
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/react-native/react-native-variation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.