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.

Hooks API 사용 (1)

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

Hooks API 사용 (2)

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

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

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.

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

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

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


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

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

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

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

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

Feature Flag Parameters

This feature is supported in React Native SDK version 3.3.0 and above.

• You can also receive the parameter values for the state decision via the useFeatureFlagDetail() Hooks API.

• You can use the config object and getSync() 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.

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

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

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


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

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

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

• The parameterKey in the getSync() 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 same type as 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.