13

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.

enter image description here

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)

Carpetfizz
  • 8,707
  • 22
  • 85
  • 146
  • 2
    I'm seeing this in Chrome stable as well now. A react app made with CRA circa January 2017 and ejected. So not tracking whatever CRA has become. Only place I see it used is in the dependencies `node_modules/coniuse-db/{data.json,features-json/{requestidlecallback.json,data-1.0.json,data-2.0.json}}`. – Harry Moreno Apr 12 '17 at 19:49

1 Answers1

6

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.

dehumanizer
  • 1,250
  • 12
  • 15