withFeatureFlag.tsx

export const withFeatureFlag = (featureFlag: string, defaultValue: boolean) => <P extends object>(
  Component: React.ComponentType<P>,
) => {
  interface WithFeatureFlagProps {
    [featureFlag: string]: boolean | undefined;
  }
  const WithFeatureFlag: React.FC<P & WithFeatureFlagProps> = props => {
    const [flag, setFlag] = useState<boolean>(defaultValue);

    // Initial query for feature flag
    useEffect(() => {
      const listener = (flag: string) => {
        if (flag === featureFlag) {
          launchDarklyClient
            .jsonVariation(featureFlag, defaultValue)
            .then((value: boolean) => setFlag(value));
        }
      };

      // Register change listener
      launchDarklyClient.jsonVariation(featureFlag, defaultValue).then((value: any) => {
        setFlag(value);
        launchDarklyClient.registerFeatureFlagListener(featureFlag, listener);
      });

      // Cleanup
      return () => {
        launchDarklyClient.unregisterFeatureFlagListener(featureFlag, listener);
      };
    }, []);

    return <Component {...(props as P)} {...{ [featureFlag]: flag }} />;
  };

  return WithFeatureFlag;
};