Violation of 'requestIdleCallbackHandler' took ms

Question

I am writing an application with create-react-app with redux , react-redux and react-router . Whenever I click Link as follows:

 import React from 'react' import { Link } from 'react-router' import ThingCard from '../../components/ThingCard' const ThingsList = ({things}) => { return ( <ul> {things.map(thing => <Link to={"/things/"+thing.id} key={thing.id}><ThingCard thing={thing}/></Link> )} </ul> ) } export default ThingsList 

I see the following warnings in my console. I have no idea where they come from or what they mean. Google search did not bring any useful results. Can these warnings be safely ignored, if not, how can I find out more about them? I believe this problem prevents the parent page from displaying its children.

I disabled all network requests.

EDIT: This error only appears in Chrome Canary, not in Google Chrome. However, Google Chrome does not display children correctly (perhaps due to this problem).

Answer 1

It can be safely ignored. Here is a good explanation why you see it. The reason you see requestIdleCallback here is most likely because you are using React 16+, which has a completely new architecture. Fiber You can learn more about this.

TL DR; It just notifies you that part of your / their code took more than 16 ms, so you cannot always get 60fp.