Supprimer le message d'erreur [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

Si comme moi vous aimez avoir une console propre et sans erreurs, il se peut que vous ayez déjà été titillé par ce message intempestif remonté sur Google Chrome :

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

Traduis en français, ce warning nous signale qu'un listener ajouté à un événement de scroll n'est pas passif, c'est à dire qu'il peut appeler la fonction event.preventDefault ce qui entraîne une prise en charge différente côté navigateur et potentiellement une performance dégradée.

Voici un article détaille de Google avec plus de précisions sur le sujet.

S'il est facile de modifier son propre code pour ajouter une option {passive: true} à ses listeners, il est plus compliqué de le faire sur des librairies tierces n'ayant pas encore implémenté cette bonne pratique.

La librairie passive-events-support

Une libraire à été créée pour répondre à ce problème : https://www.npmjs.com/package/passive-events-support

Importée avant les librairies qui déclenchent ce warning dans la console, elle s'utilise comme suit :

// Before any third party import that causes issues
import { passiveSupport } from 'passive-events-support/src/utils';

passiveSupport({
  events: 'touchstart', // or any other event tyoes
});

Terminés les warnings ! Ultime sophistication ? Optimisation jusqu'au-boutiste ? Je n'ai pas la réponse, mais en attendant que les librairies s'adaptent j'ai trouvé que cette solution était tout de même intéressante à partager.