How to reflect updated data in react application after changing feature flag value in launch darkly

Question

I am changing feature flag value in launch darkly dashboard, the updated flag data is not getting reflect in the application. We need to refresh the application or open in new tab to see the updated results

Answer 1

I recently set this up with React & launch darkly. We did 2 things to achieve this:

1. subscribe the launch darkly client to changes with on('change')
2. make those updates trigger a react component re-render (a prop, state, or hook change will do this, the way we did it is through redux)

see the launch darkly documentation here

import * as LDClient from 'launchdarkly-js-client-sdk';

...

// where you initialize the sdk 
ldclient = LDClient.initialize(LAUNCH_DARKLY_CLIENT_ID, user);

// set featureFlags in redux when ld client is ready
ldclient.on('ready', () => {
  const flags = ldclient.allFlags();        // get the flags
  dispatch(actions.setFeatureFlags(flags)); // store them in redux
});

// *the part you're asking about*
// on('change') to subscribe to flag changes
ldclient.on('change', () => {
  // you could listen for the specific flag change, but can also just grab all flags whenever there is a change
  const flags = ldclient.allFlags();
  dispatch(actions.setFeatureFlags(flags));
});

From there, your components can connect to redux, and when the flags get updated in redux, your components will be passed the new flag props which triggers a re-render.

The same idea can work if you replace redux with some other method that passes the flag props/state to components.