Violation 'requestIdleCallbackHandler ' took ms

Question

I'm writing an app generated with create-react-app with redux, react-redux, and react-router. Whenever I click a Link like this:

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 didn't yield any useful results. Can these warnings be safely ignored, if not how can I find out more about them? I believe this issue is preventing the parent page from rendering it's children.

I've disabled all network requests.

EDIT: This error only shows up in Chrome Canary and not Google Chrome. However, Google Chrome is not rendering the children properly (potentially due to this issue)

Answer 1

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

TL;DR; It just notifies you that some of your/their code took longer than 16ms, thus you may not always get 60fp.