Simple example produces console warning: Can't perform a React state update on an unmounted component

[rmckeel]

Just started integration of Optimizely's React SDK into my React project. I've used the SDK set up guide, and the product is functional: I successfully get the dev JSON datafile, it loads and checks if I have access to the feature - which I do.

However, I receive the console warning attached - pardon the length, I wanted to provide full context.

I have tried creating a timeout of 1 millisecond on the OptimizelyProvider (gives fail to initialize onReady before timeout and the same "Can't perform a React state update..." warning). I have also varied the locatino of OptimizelyProvider, starting at the highest level of the application, and brought it down several "rings" until after auth state is known (so it only triggers once when a known user is set). Additionally, I have the simplest possible set up and an OptimizelyFeature straight out of the docs.

At this point, it seems the issue is with the react-sdk, especially since the warning is most related to FeatureComponent, created by Context.Consumer.

Key versions:

• @optimizely/react-sdk: 1.0.1
• react: 16.11.0

[OPTIMIZELY] - INFO  2020-01-08T20:10:13.835Z DatafileManager: Updating datafile from response
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.837Z PROJECT_CONFIG: Skipping JSON schema validation.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.840Z OPTIMIZELY: Updated Optimizely config to revision 15 (project id 17165161924)
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.840Z <OptimizelyFeature>: feature="abc" successfully rendered for user="ryan@example.com"
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.842Z DECISION_SERVICE: Audiences for experiment 17283183885 collectively evaluated to TRUE.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.843Z BUCKETER: User ryan@example.com is in variation 17273943456 of experiment 17283183885.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.843Z OPTIMIZELY: Feature abc is enabled for user ryan@example.com.
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in FeatureComponent (created by Context.Consumer)
    in WithOptimizely (created by ForwardRef(withOptimizely(FeatureComponent)))
    in ForwardRef(withOptimizely(FeatureComponent)) (at Device.tsx:313)
    in div (at Device.tsx:194)
    in div (at Page.tsx:20)
    in div (at Page.tsx:11)
    in Page (at Device.tsx:164)
    in Device (at routes.tsx:59)
    in Route (at routes.tsx:46)
    in SecureRoute (at routes.tsx:92)
>> additional detail
console.<computed> @ index.js:1
warningWithoutStack @ react-dom.development.js:530
warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:25738
scheduleUpdateOnFiber @ react-dom.development.js:23679
enqueueSetState @ react-dom.development.js:13994
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:325
(anonymous) @ react-sdk.js:644
Promise.then (async)
FeatureComponent.componentDidMount @ react-sdk.js:635
commitLifeCycles @ react-dom.development.js:22101
commitLayoutEffects @ react-dom.development.js:25344
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25082
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
e @ VM245:1
(anonymous) @ middleware.js:22
dispatch @ VM245:1
(anonymous) @ redux.js:475
(anonymous) @ App.tsx:43
Promise.then (async)
getUser @ App.tsx:40
AppBase @ App.tsx:53
renderWithHooks @ react-dom.development.js:16260
mountIndeterminateComponent @ react-dom.development.js:18794
beginWork$1 @ react-dom.development.js:20162
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
(anonymous) @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
./src/index.tsx @ index.tsx:25
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ Utility.ts:126
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.845Z <OptimizelyFeature>: feature="abc" successfully rendered for user="ryan@example.com"
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.845Z DECISION_SERVICE: Audiences for experiment 17283183885 collectively evaluated to TRUE.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.846Z BUCKETER: User ryan@example.com is in variation 17273943456 of experiment 17283183885.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.846Z OPTIMIZELY: Feature abc is enabled for user ryan@example.com.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.846Z <OptimizelyFeature>: feature="abc" successfully rendered for user="ryan@example.com"
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.846Z DECISION_SERVICE: Audiences for experiment 17283183885 collectively evaluated to TRUE.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.847Z BUCKETER: User ryan@example.com is in variation 17273943456 of experiment 17283183885.
[OPTIMIZELY] - INFO  2020-01-08T20:10:13.847Z OPTIMIZELY: Feature abc is enabled for user ryan@example.com.

[RLLivingston]

I'm also experiencing this when using Optimizely in our project. Would love to see a solution!

[samskarvan]

+1 for this issue - I am also encountering this warning when implementing the examples from the Opitmizely docs

[stefanstaynimble]

Also receiving this

[idbd1]

same

[stefanstaynimble]

Same here, any workarounds in the meantime?

[zashraf1985]

This was caused by an error in our documentation on this page. In this example, OptimizelyFeature contained a PurchaseButton component which was there by mistake. OptimizelyFeature is only supposed to take one child and that too a function. We fixed the documentation and the sample should work correctly without any errors.