React Hooks

Use React hooks for seamless feature flag integration

useFeatureFlag Hook

Basic hook with loading states and error handling

This hook fetches the flag status on component mount and provides loading/error states

SDK not initialized

useFeatureFlagCached Hook

Enhanced hook with caching for better performance

This hook caches flag values to reduce API calls and improve performance

SDK not initialized

Custom Flag Test

Test any flag key with the useFeatureFlag hook

SDK not initialized

Implementation Examples

Code snippets showing how to use the hooks

Basic useFeatureFlag Hook

import { useFeatureFlag } from '@flagvault/sdk';

function MyComponent() {
  const { isEnabled, isLoading, error } = useFeatureFlag(
    sdk, 
    'new-feature', 
    false // default value
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return isEnabled ? <NewFeature /> : <OldFeature />;
}

Cached Hook with TTL

import { useFeatureFlagCached } from '@flagvault/sdk';

function MyComponent() {
  const { isEnabled, isLoading } = useFeatureFlagCached(
    sdk,
    'premium-feature',
    false,      // default value
    300000,     // 5 minutes cache TTL
    'user-123'  // context for percentage rollouts
  );

  return isEnabled ? <PremiumFeature /> : <BasicFeature />;
}

Performance Comparison

// Without cache - API call every render
function SlowComponent() {
  const [isEnabled, setIsEnabled] = useState(false);
  
  useEffect(() => {
    sdk.isEnabled('feature').then(setIsEnabled);
  }, []);
  
  return <div>{isEnabled ? 'On' : 'Off'}</div>;
}

// With cache - API call once, cached for TTL
function FastComponent() {
  const { isEnabled } = useFeatureFlagCached(sdk, 'feature', false, 300000);
  return <div>{isEnabled ? 'On' : 'Off'}</div>;
}

Hook Features

Key benefits of using FlagVault React hooks

useFeatureFlag

Real-time updates when flags change
Loading and error states included
Automatic cleanup on unmount
TypeScript support with full types

useFeatureFlagCached

Configurable cache TTL
Reduced API calls for better performance
Instant loading for cached values
Context support for percentage rollouts