Appendix

Appendix A – React side effects

When it comes to React, the most well-known effects are passive effects, as introduced and explained in detail in this chapter. However, React supports different kinds of effects, and in the future, it might add more. The two others currently are mutation effects and layout effects.

All effects are shared with certain features, such as getting collected from the fibers before the screen gets updated. But they also differ in some ways. Take the mutation effects as a first example. Under the engine, these kind of effects are the most important effects because each mutation effect tracks the addition, removal, or change of a DOM element. Therefore, all fiber reconciliation ends up with mutation effects that get committed to the screen. The mutation of the DOM elements is also part of the update, or more accurately, the commit phrase of the update. While the passive effects run after the update, all mutation effects happen before the...