# Feature Flag Decision

A Feature Flag has two states: on and off. Different features are configured for each state. When a user accesses a feature with a Feature Flag applied, the SDK must return the on or off state. You can use the Hackle SDK to determine this state.

## useFeature or useLoadableFeature

You can receive the state result for a user using the Hooks API provided by Hackle. You must pass the **Feature Key**, then implement logic based on the state.

In the example code below, Feature Key 42 is passed.

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

```javascript
function App() {
  return (
    // 기능 키가 42인 기능 플래그에서 사용자의 상태를 결정합니다.
    // 결정하지 못하는 상황인 경우 false(꺼짐 상태)를 반환합니다.
    <Feature featureKey={42}>
      {(featureOn) =>
        featureOn ? (
          <SuperAwesomeFeature /> // 켜짐 상태일 때의 기능
        ) : (
          <AwesomeFeature /> // 꺼짐 상태일 때의 기능
        )
      }
    </Feature>
  )
}
```

{% endtab %}

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

```javascript
function App() {
  // 기능 키가 42인 기능 플래그에서 사용자의 상태를 결정합니다.
  // 결정하지 못하는 상황인 경우 false(꺼짐 상태)를 반환합니다.
  const featureOn = useFeature(42)
  return (
    <>
    {
      featureOn ? (
        <SuperAwesomeFeature /> // 켜짐 상태일 때의 기능
      ) : (
        <AwesomeFeature /> // 꺼짐 상태일 때의 기능
      )
    }
    </>
  )
}

// SSR 사용 시
function App() {
  // 기능 키가 42인 기능 플래그에서 사용자의 상태를 결정합니다.
  // 결정하지 못하는 상황인 경우 false(꺼짐 상태)를 반환합니다.
  const { isLoading, isOn } = useLoadableFeature(42)
  return (
    <>
    {
      isOn ? (
        <SuperAwesomeFeature /> // 켜짐 상태일 때의 기능
      ) : (
        <AwesomeFeature /> // 꺼짐 상태일 때의 기능
      )
    }
    </>
  )
}
```

{% endtab %}
{% endtabs %}

## useFeatureFlagDetail or useLoadableFeatureDetail

The `useFeatureFlagDetail()` Hooks API works the same as `useFeature()` but also provides the reason for the state decision. This is useful for verifying that Override is working correctly or when the distribution result ratio seems inconsistent with the configured Traffic Allocation.

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

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

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

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


// SSR 사용 시
// 분배 결정 상세
const { isLoading, decision } = useLoadableFeatureDetail(42)

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

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

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

<table><thead><tr><th width="233.71875">Decision Reason</th><th width="370.8046875">Description</th><th>Distribution Result</th></tr></thead><tbody><tr><td><code>SDK_NOT_READY</code></td><td>The SDK is not ready to use.<br>(e.g., initialization attempted with an invalid SDK Key)</td><td>Default state<br>(off)</td></tr><tr><td><code>FEATURE_FLAG_NOT_FOUND</code></td><td>No Feature Flag was found for the provided Feature Key.<br>The Feature Key may be incorrect, or the Feature Flag may be archived.</td><td>Default state<br>(off)</td></tr><tr><td><code>FEATURE_FLAG_INACTIVE</code></td><td>The Feature Flag is in the off state.</td><td>Default state<br>(off)</td></tr><tr><td><code>INDIVIDUAL_TARGET_MATCH</code></td><td>Matched by Individual Targeting.</td><td>State configured by<br>Individual Targeting</td></tr><tr><td><code>TARGET_RULE_MATCH</code></td><td>Matched by User Targeting.</td><td>State configured by User Targeting</td></tr><tr><td><code>DEFAULT_RULE</code></td><td>Did not match either Individual Targeting or User Targeting.</td><td>State configured by<br>default rule</td></tr><tr><td><code>EXCEPTION</code></td><td>An unknown error occurred.</td><td>Default state<br>(off)</td></tr></tbody></table>

## Feature Flag Parameters

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

* You can also receive the parameter values for the state decision via the `useFeatureFlagDetail()` Hooks API.
* You can use the config object and `get()` method to retrieve the Parameter Settings configured on the Feature Flag screen. If you change the value on the Feature Flag parameter settings screen, the updated value is applied to your code.

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

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

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


// SSR 사용 시
// 분배 결정 상세
const { isLoading, decision } = useLoadableFeatureDetail(42)

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

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

* The `parameterKey` in the `get()` method is the key configured in the Feature Flag parameter settings, and `defaultValue` is the value returned when state decision fails or an incorrect parameter type value is provided.
* To correctly retrieve the configured value, you must enter a value of the type matching the parameter type you configured in `defaultValue`.
* JSON type can be received as a string (String), so the `defaultValue` for JSON type must be entered as a string type.
* The parameter types provided by the SDK are string, number, and boolean. The JSON type configured on the Feature Flag screen can be received as a string (String). The default value for JSON type must be entered as a string type.


---

# 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/react-feature-flag.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.