useFlags doesn't trigger re-render after identify. about flagsmith-js-client

[Pagebakers]

I sent you the env key that i'm using on the chat.

[kyle-ssg]

Creating a new project with the latest SDK (3.13.0), I am unable to replicate this using a similar set of flags.

Flag

User override

App Code

<FlagsmithProvider flagsmith={flagsmith} options={{ environmentID:"FrSKH5vQ7AGcCJ5KfbDok5", }}>
{...yourpage}
</FlagsmithProvider>

Page Code

const Home = () => {
    const flags = useFlags(["cloud_beta_access"])
    const flagsmith = useFlagsmith()
    useEffect(()=>{
        console.log("Flags changed")
    },[flags])
    return (
        <div className="App">
            {
                flagsmith.identity? (
                    <button onClick={()=>flagsmith.logout()}>
                        Logout
                    </button>
                ): (
                    <button onClick={()=>{
                        flagsmith.identify("flagsmith_sample_user")
                    }}>
                        Identify
                    </button>
                )
            }
        </div>
    );
}

From the above, identifying re-renders due to flags changing.

[Pagebakers]

Thanks @kyle-ssg this was our guess as well, I tried adding cloud_beta_access.enabled to deps, without any difference.

 React.useEffect(() => {
    if (!flags.cloud_beta_access?.enabled) {
      // do something
      // enabled is always false and value is null

      // expected to be updated to the user override value
    }
  }, [flags.cloud_beta_access?.enabled])

Will try your approach as well to see if it changes anything.

But in any case I would expect doing a console.log(flags) directly in the render function to always have the latest values in there, which it doesn't.

[kyle-ssg]

Hey, @Pagebakers, actually, trying to replicate this I can see that flags always have the latest value. I can create a git repository with replication if this helps?

    useEffect(()=>{
        console.log("Flags changed", flags.cloud_beta_access.enabled) // always inline with the latest value.
    },[flags])

[Pagebakers]

Really strange, it's always out of date here.

Please note that we have these settings for the feature.

cloud_beta_access
default
enabled: false
value: false

user override
enabled: true
value: true

Whatever I do, useFlags always returns enabled: false, value: null

even with a direct pointer to enabled or value.

[Pagebakers]

Hey, @Pagebakers, actually, trying to replicate this I can see that flags always have the latest value. I can create a git repository with replication if this helps?

    useEffect(()=>{
        console.log("Flags changed", flags.cloud_beta_access.enabled) // always inline with the latest value.
    },[flags])

That'd be great

[Pagebakers]

Regarding your code

const Home = () => {
    const flags = useFlags(["cloud_beta_access"])
    const flagsmith = useFlagsmith()
    useEffect(()=>{
        console.log("Flags changed") // this triggers indeed, but values don't change.
       console.log(flags) // {cloud_beta_access: {enabled: false, value: null}}
    },[flags])
    return (
        <div className="App">
            {
                flagsmith.identity? (
                    <button onClick={()=>flagsmith.logout()}>
                        Logout
                    </button>
                ): (
                    <button onClick={()=>{
                        flagsmith.identify("flagsmith_sample_user")
                    }}>
                        Identify
                    </button>
                )
            }
        </div>
    );
}

[kyle-ssg]

https://github.com/Flagsmith/issue-152-replication

[kyle-ssg]

>         console.log("Flags changed") // this triggers indeed, but values don't change.
>        console.log(flags) // {cloud_beta_access: {enabled: false, value: null}}

If it triggers then definitely flags have the latest value, I've updated the replication to also show this.

[Pagebakers]

Not sure what is going on here, but i have the same issues in your repo.

When clicking Identify doesn't update the state either. (I do see the request being succesful)
Could it be something in my account settings?

Same issues in Chrome and Safari.

[Pagebakers]

Screen.Recording.2022-11-02.at.18.33.10.mov

[Pagebakers]

After identifying, flagsmith.identity stays undefined

[kyle-ssg]

Sorry, I'm a bit confused here. Is this cloning the repository and running without changing code? Doing the same, I get the results of my previous gif.

https://github.com/Flagsmith/issue-152-replication

Screen.Recording.2022-11-02.at.18.33.10.mov

[Pagebakers]

It looks like it's related to the env key/id

With my keys (dev/prod) it isn't working, but with your it's working fine.

[kyle-ssg]

Following our conversation I'll close this, please re-open if you experience an issue. Thanks