Warning: unstable_flushDiscreteUpdates

[iongion]

For react deps:

    "react": "^16.9.0",
    "react-block-ui": "^1.3.1",
    "react-color": "^2.17.3",
    "react-dom": "^16.9.0",

There is now this warning showing up

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
    in BlockUi

[TheSharpieOne]

Looks like it has something to do with the focus calls based on this code comment: https://github.com/facebook/react/blob/c80678c7606b1895573c23182bfb9a418e2ad31e/packages/react-reconciler/src/ReactFiberWorkLoop.js#L605-L607

I'm not sure how to address this.

[goxr3plus]

What is happening with this issue guys ?

[GoPro16]

What is happening with this issue guys ?

No one has picked up this issue if you want to take it. Just a warning so not a top concern.

[goxr3plus]

We are full of warnings bro

[vitaly-redkin]

Looks like it has something to do with the focus calls based on this code comment: https://github.com/facebook/react/blob/c80678c7606b1895573c23182bfb9a418e2ad31e/packages/react-reconciler/src/ReactFiberWorkLoop.js#L605-L607

I'm not sure how to address this.

In my private fork I have replaced
if (typeof this.focused.focus === 'function') { this.focused.focus(); }
with
if (typeof this.focused.focus === 'function') { const focusedControl = this.focused; window.setInterval(() => { focusedControl.focus(); }, 100); }

A hack, no doubt, but seems to be working so far,,,

[goxr3plus]

@vitaly-redkin Can you please make a pull request for that ? :) Thank you

[vitaly-redkin]

@vitaly-redkin Can you please make a pull request for that ? :) Thank you

I probably can but what is the point? The PR to use UNSAFE_ methods for componentWillXXX (#46) is not merged - and probably will not.

My local version has both UNSAFE_ and "wrap this.focusedControl.focus() into setTimeout()" changes so it will break the same tests as the previous PR did. So it will not be merged, etc.

Personally I made my change to serve as a temporary solution and waiting for the hooks rewrite...

[goxr3plus]

Yes i understand . How about you pull reuqest only the wrap this.focusedControl.focus() into setTimeout() , i am having that annoying errors in production code .

[vitaly-redkin]

Will do but a bit later - really tied up right now...

[goxr3plus]

@vitaly-redkin No prob fill free to drop a pull request when you have time :)

[Adam-Asatryan]

any updates here ?

[goxr3plus]

@Adam-Asatryan Vitaly got married i think.

[mehmetkasalak]

Will there be any progress?

[GoPro16]

No it’s Christmas 🎄

[goxr3plus]

😂 😂 😂 😂 😂 😂 😂 😂 😂 I am making bug fixes right now bro for an app.

…

On Wed, 25 Dec 2019, 19:05 Kyle Gray, ***@***.***> wrote: No it’s Christmas 🎄 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#40?email_source=notifications&email_token=AE3OFQCUN2I4N4KSMW6TF3LQ2OHFTA5CNFSM4IODXYEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHUPUJY#issuecomment-568916519>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE3OFQBYLGRVE5UP3S3EXP3Q2OHFTANCNFSM4IODXYEA> .

[joeheror]

I use BlockUi with redux-saga to block screen when fetching data from back-end.
I thought this warning happens when the fetching time is too short.
So I delayed some time after data is fetched but the result was same even with delaying time more than 1 or 3 seconds.
On the other hand, stating BlockUi with button, no warning happens even though I click the buttons twice as quick as possible.
I don't understand why it actually happens.

[diegodesouza]

Yeah, I'm experiencing the same thing
react-block-ui: 1.1.3

[skworden]

@Joe-Cristop it's happening because the dom (in this case x.focus()) is being manipulated outside of react before react has time to finish its rendering process. Adding a slight delay is why the timeout works in most cases.

I had a similar issue on unrelated code but google lead me here. I was able to fix a similar issue in my code using the useEffect hook with the proper dependencies. However, this looks to be a class so calling the focus in the appropriate render stage (didmount/updated/ etc) with the appropriate condition check should eliminate the error.

my og code with the error
if(!open && ref.current){ ref.current.focus(); }

updated code without error
useEffect(()=>{ if(!open && ref.current){ ref.current.focus(); } }, [open]);

I don't use this library and Idk what is calling your update but maybe this helps y'all out.

[whitecobalt]

A fix to this would be welcome

[thushan85]

I'm getting the same issue in 1.3.3. Are there any fix?

[moc89]

I found why it is happening; in my case below;
When I remove value={name} ;It works well.
But when I re-render this element, I want to use in the state value. Is there any other way to use state value when I render this element again? Because currently, it is getting ustable_flushDiscreteUpdates.

My so simple example;

<TextField id="name" onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setName(e.target.value)} value={name}> </TextField>

[shunyh]

"react-block-ui": "^1.3.3" has the same issue, any update?

[rixant]

Did anyone find the solution to this issue? I am using "react-block-ui": "^1.3.3"

[rickhanlonii]

I don't have a repro - but based on the above example the issue may be that you're calling focus inside of render, instead of an effect.

[rtnario]

Was encountering this issue on React 17. After following lifedup's advice on using proper useEffect hooks, and also checking dapabe's mention and updating to React 18, I no longer experience the issue.