Нарушение 'requestIdleCallbackHandler' взял мс

Question

Я пишу приложение, созданное с помощью create-react-app с redux, react-redux и react-router. Всякий раз, когда я нажимаю Link так:

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 

Я вижу следующие предупреждения в моей консоли. Я понятия не имею, откуда они или что они означают. Поиск Google не принес каких-либо полезных результатов. Могут ли эти предупреждения быть безопасно проигнорированы, если нет, то как я могу узнать больше о них? Я считаю, что эта проблема мешает родительской странице отображать ее дочерние элементы.

Я отключил все сетевые запросы.

EDIT: эта ошибка появляется только в Chrome Canary, а не в Google Chrome. Тем не менее, Google Chrome не предоставляет детей должным образом (возможно из-за этой проблемы)

Answer 1

Его можно безопасно игнорировать. Вот good explanation почему вы это видите. Причина, по которой вы видите requestIdleCallback здесь, скорее всего, потому, что вы используете React 16+, у которого есть совершенно новая архитектура. Волокно You can read more about it

TL; DR; Он просто уведомляет вас о том, что часть вашего/их кода заняла более 16 мс, поэтому вы не всегда можете получить 60fp.