Un nuevo toolkit llamado 'Bippy' ha surgido, generando preocupación por la seguridad en la comunidad React. Bippy permite a los desarrolladores acceder y manipular los 'fibers' internos de React, estructuras de datos cruciales para el funcionamiento de la aplicación, sin necesidad de modificar el código React existente. Normalmente, el acceso a estos internals está restringido para evitar manipulaciones no deseadas.
Bippy opera 'hackeando' la forma en que React DevTools interactúa con la aplicación, aprovechando una propiedad global (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) para inyectar sus propias funciones. Esto permite a los desarrolladores inspeccionar y modificar el árbol de 'fibers', obteniendo información sobre componentes, estado y contextos. Aunque ofrece utilidades para simplificar la navegación y el análisis de estos 'fibers', su uso incorrecto podría comprometer la seguridad y estabilidad de las aplicaciones React.
Para su correcta implementación, Bippy debe ser importado antes de cualquier librería React, lo que requiere configuraciones específicas en herramientas como Next.js y Vite. Los desarrolladores de librerías pueden optar por una versión reducida de Bippy (bippy/install-hook-only) para minimizar el tamaño del paquete, importando solo la funcionalidad necesaria.