Question about using hooks

[martijnvanderwoud]

I managed to display a flag value in one of my components using the useFlags() hook. The component displays the latest flag vale when it is rendered, but any change to the flag value does not seem to trigger a re-render of the component. Is this by design? I do see the change message coming in over the web socket

[cosmos-explorer]

Hello @martijnvanderwoud
sorry for the late reply. I just retested but can not reproduce the issue. Can you provide more information?
Which version of SDK are you using? Can you try with the react-app example included in the repo? https://github.com/featbit/featbit-react-client-sdk/tree/main/examples/react-app

[eduardofischer]

Just mentioning that we are having the same issue here. The update events come thorough websockets and the context seems to be updated, but the flags read with useFlags() do not trigger a component re-render for some reason. Didn't have the time to investigate much further yet, but this is basically the setup of my custom provider:

const initialConfig: ProviderConfig = {
  options: {
    sdkKey: import.meta.env.VITE_FEATBIT_CLIENT_KEY,
    streamingUri,
    eventsUri,
    user: formatFlagsUser(storedUser)
  }
}

const fbClient = new FbClientBuilder(initialConfig.options).build()
await fbClient.waitForInitialization()
const Provider = await asyncWithFbProvider({ ...initialConfig, fbClient })

const FlagsProvider: React.FC<{ children: React.ReactNode }> = ({
  children
}) => {
  const user = useUserStore(state => state.user)

  useEffect(() => {
    fbClient.identify(formatFlagsUser(user))
  }, [user])

  return <Provider>{children}</Provider>
}

[martijnvanderwoud]

Sorry, I completely missed the responses to this issue somehow. We are using version 1.0.6. of the react-client-sdk. The problem is exactly like @eduardofischer describes: the update events come through the web sockets and the context is updated, but the changes do not trigger a re-render of the component that called the useFlags() hook.

I ended up creating a service that listens to the client update events (we use Redux and RxJS):

import {EMPTY, Observable} from "rxjs";
import {AnyAction} from "redux";
import {fbClient} from "../../components/OutHook";
import {featureDisabled, featureEnabled} from "./actions";

class FeatureFlagService {

    private observers: Map<string, { observer: any, eventHandler: () => void }> = new Map();

    watch(featureFlagKey: string): Observable<AnyAction> {
        const client = fbClient();
        const enabledAction = featureEnabled({featureFlagKey});
        const disabledAction = featureDisabled({featureFlagKey});

        return new Observable<AnyAction>(observer => {
            const eventHandler = () => {
                const enabled = client.boolVariation(featureFlagKey, false);
                if (enabled) {
                    observer.next(enabledAction);
                } else {
                    observer.next(disabledAction);
                }
            };
            client.on(`update:${featureFlagKey}`, eventHandler);
            this.observers.set(featureFlagKey, {observer, eventHandler});
        });
    }

    unwatch(featureFlagKey: string): Observable<AnyAction> {
        const client = fbClient();
        const observerData = this.observers.get(featureFlagKey);
        if (observerData) {
            client.off(`update:${featureFlagKey}`, observerData.eventHandler);
            observerData.observer.complete();
            this.observers.delete(featureFlagKey);
        }
        return EMPTY;
    }

}

export default FeatureFlagService;

[cosmic-flood]

@martijnvanderwoud @eduardofischer

We have not been able to reproduce the bug before. Could you please provide us with a small, complete React project that can reproduce this issue?

PS: The GitHub notifications don't seem to be working correctly. You can join our Slack, and we may reply to your message within 4-48 hours.