Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

flushSync React warning occurs on render() for Modal that contains a Checkbox

See original GitHub issue

🐛 Bug report

Since upgrading Chakra from 1.1.6 to 1.2.1 (and beyond), some of our existing code now emits a React warning on render. From what I can tell, this is a regression in Chakra relating to @chakra-ui/focus-lock, or potentially how it interacts with the underlying react-focus-lock or react-clientside-effects dependencies.

It looks like when we bumped our Chakra version, the underlying react-focus-lock and react-clientside-effects dependency versions have remained the same in our lockfile.

💥 Steps to reproduce

Render a Modal with a Checkbox element inside of it. You’ll hit the following React warning:

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

💻 Link to reproduction

Here’s a minimal reproduction, the flushSync warning exhibits on initial render:

https://codesandbox.io/s/exciting-keller-j95hk

🧐 Expected behavior

No React warning emitted.

🧭 Possible Solution

Not sure sorry, I haven’t yet dug into these internals. My next step would be looking into what changed in the @chakra-ui/focus-lock package version that comes with chakra-ui/react >= 1.2.0.

🌍 System information

Software	Version(s)
Chakra UI	>= 1.2.0
Browser	any
Operating System	any

📝 Additional information

nil

Issue Analytics

State:
Created 3 years ago
Reactions:14
Comments:11 (3 by maintainers)

Top GitHub Comments

9reactions

segunadebayocommented, Apr 3, 2021

I just pushed a fix for this. We’ll release an update shortly.

If the issue persists after upgrading, I’ll re-open it.

9reactions

nfmcommented, Mar 19, 2021

Thanks for taking a look @segunadebayo ❤️

I can confirm we are hitting this on the latest version of react (17.0.1) and chakra-ui/react (1.3.4), so I think something else might be going on.

Would you be able to reopen this issue? Thanks!

Top Results From Across the Web

reactjs - Avoid Rerendering of modal if checkbox is selected

My checkbox is appearing and i am able to select , unselect .But evertytime when i check/uncheck i.e when state is updated using...

ReactDOM – React

Portals provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component. flushSync(). flushSync(callback). Force...

What is Dom in React - Javatpoint

The render () method handles the component's render by the UI. The render () contains all the logic displayed on the screen. It...

FAQs | React Hook Form - Simple React forms validation

React Hook Form relies on uncontrolled form, which is the reason why the register function capture ref and controlled component has its re-rendering...

How to Render Components Outside the Main ReactJS App

With React, you have JSX which is just XML sugar for declaring what DOM elements you want React to render. React just renders...