Build a Frontend Web Framework (From Scratch)

9 Stateful components

This chapter covers

• Understanding the anatomy of a stateful component
• Implementing a factory function to define components
• Implementing the first version of a component that manages its own state

Your framework works well; it manipulates the Document Object Model (DOM) so that the developer doesn’t need to, and it patches the DOM efficiently thanks to the reconciliation algorithm. But using stateless components (pure functions) forced us to move all the state to the top of the application along with the reducers. This approach isn’t ideal for several reasons:

• A component deep down in the hierarchy needs all the components above it to pass the state down to it, even when they don’t need it. As the number of levels ...