React SDK

React SDK คืออะไร

React SDK เป็น wrapper บน core JS SDK ที่มี React context และ hooks มาให้พร้อมใช้งาน ทำให้คุณสามารถประเมิน feature flags ได้ทุกที่ใน component tree โดยไม่ต้อง prop-drilling ใช้ package @growthbook/growthbook-react

การติดตั้ง

npm install @growthbook/growthbook-react

package @growthbook/growthbook-react re-export ทุกอย่างจาก @growthbook/growthbook ด้วย จึงต้องติดตั้งแค่ครั้งเดียว

การตั้งค่า Provider

สร้าง GrowthBook instance เหมือนกับโปรเจกต์ vanilla JS แล้ว wrap app root ด้วย <GrowthBookProvider growthbook={gb}> จากนั้น component ทุกตัวใน tree สามารถอ่าน flag ผ่าน hooks หรือ declarative component ได้เลย

Hooks ที่ใช้งาน

useFeatureIsOn('flag-key') คืนค่า boolean — วิธีที่ง่ายที่สุดในการ gate component โดยไม่ render อะไรเพิ่มและ re-render เมื่อ flag เปลี่ยน
useFeatureValue('flag-key', fallback) คืนค่า feature value พร้อม type-safe fallback — ส่ง typed default แล้ว TypeScript จะ infer return type ให้อัตโนมัติ

แบบ Declarative ด้วย IfFeatureEnabled

<IfFeatureEnabled feature="flag-key"> render children เฉพาะเมื่อ flag ประเมินเป็น true เท่านั้น เป็น wrapper บาง ๆ รอบ useFeatureIsOn ที่ช่วยให้ JSX template อ่านง่ายโดยไม่ต้องใช้ ternary เพิ่มเติม

import { GrowthBook } from '@growthbook/growthbook';
import { GrowthBookProvider, useFeatureIsOn, useFeatureValue, IfFeatureEnabled } from '@growthbook/growthbook-react';

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: 'sdk-abc123',
});

await gb.init({ timeout: 2000 });
gb.setAttributes({ id: 'user-abc' });

// Wrap your app once
export function App() {
  return (
    <GrowthBookProvider growthbook={gb}>
      <HomePage />
    </GrowthBookProvider>
  );
}

// Use hooks anywhere inside the tree
function HomePage() {
  const darkMode = useFeatureIsOn('dark-mode');
  const theme = useFeatureValue('ui-theme', 'light');

  return (
    <div className={darkMode ? 'dark' : 'light'}>
      <p>Theme: {theme}</p>
      <IfFeatureEnabled feature="new-dashboard">
        <NewDashboard />
      </IfFeatureEnabled>
    </div>
  );
}

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
`GrowthBookProvider` + hooks	integrate เข้ากับ React lifecycle เนียนกว่า re-render อัตโนมัติ	ต้องเข้าใจ React Context pattern
เรียก SDK ตรงๆ นอก React	ควบคุม logic ได้เต็มที่	ต้อง sync re-render เอง เสี่ยง UI ไม่ update ตาม flag

ข้อผิดพลาดที่พบบ่อย

เรียก useFeatureValue ก่อนที่ SDK จะ init() เสร็จ ทำให้ได้ default value เสมอ
สร้าง GrowthBook instance ใหม่ทุกครั้งที่ component re-render
ไม่ wrap app ด้วย GrowthBookProvider ทำให้ context หาย

💡 ตัวอย่างจากของจริง

ทีม frontend จำนวนมากใช้ pattern เดียวกับที่ใช้กับ React Context ทั่วไป — provider ชั้นบนสุด แล้ว hook อ่านค่าที่ layer ล่าง