GoKawiilbippy is a toolkit to hack into react internals
by default, you cannot access react internals. bippy bypasses this by "pretending" to be react devtools, giving you access to the fiber tree and other internals.
works outside of react – no react code modification needed
utility functions that work across modern react (v17-19)
no prior react source code knowledge required
import { onCommitFiberRoot, traverseFiber } from 'bippy' ; // must be imported BEFORE react instrument ({ onCommitFiberRoot : (root) => { traverseFiber (root.current, (fiber) => { // prints every fiber in the current React tree console. log ( 'fiber:' , fiber); }); }, });
how it works & motivation
bippy allows you to access and use react fibers outside of react components.
a react fiber is a "unit of execution." this means react will do something based on the data in a fiber. each fiber either represents a composite (function/class component) or a host (dom element).
here is a live visualization of what the fiber tree looks like, and here is a deep dive article.
... continue reading