onChoice callback called multiple times

[lucasfeliciano]

I'm using onChoice callback to trigger some tracking, however, it is being called two times

          <Experiment
            name="Wanted listing button label"
            onChoice={(experimentName, variantName) => {
              console.log('test', Math.random())
              track(EXPERIMENT_VIEWED, {
                variant: variantName,
                experiment: experimentName,
              })
              setExperiment(experimentName)
              setVariant(variantName)
            }}
          >
            <Variant name="A (current)">{t('event:cta.wanted')}</Variant>
            <Variant name="B (new)">{t('event:cta.wanted_variant')}</Variant>
          </Experiment>

So on render this is the output

I tried to make my component a pure component or even using memo on Experiment component with no success.

Any ideas?

[michael-sulyak]

Does setExperiment or setVariant change the state of a component?

[lucasfeliciano]

It does, which I understand that triggers a re-render.

Do you think that this should be the normal behavior of the Experiment component? Might be an idea to use the lifecycle on the Experiment component and just trigger the variant selection on componentDidMount?