An easy way to write stateful React components
Introducing the stateful package to overcome the limitations of setState
React is an innovative UI library that lets you create the most complex dynamic view by only specifying how it looks for the given data. You don’t ever need to worry about the transitions to accommodate the mutation of parameters which is a milestone in front-end development. Every React component can either only react to the properties (
props) assigned to it by the outside world or also carry some mutable information (
The way React deals with the state as of version 16 has certain limitations. Every piece of application state must be managed by a component and there is no way for other components to access it unless they are passed the information in
props. There are some popular third party libraries and architectures to mitigate this, however, something this simple should not require a complex solution.
Developers also need to write their component as a class if they want to use state. Let’s take a look at a simple application with a counter:
Here’s the same application using the stateful package:
You can now just wrap any part of your application in a
Stateful component, to make it respond to state changes. In the
children specifying how this part of application should respond to any changes to its state. If you wish to change any property of
state, you can just assign a new value to it and your view will update. It’s that simple.
Actually, your components can now respond to any watchable data even outside of components— not only the one that was passed into
initialState. This makes relying on global state a breeze:
You can easily compose stateful parts of your application the way you like. The component below has two parts that update independently of each other for best performance. The
compute property, which is the function used for tracking data changes, gets called with a single argument — a dictionary including all information needed to compute the data for the given component. Whatever it returns will be passed into the children function.
State management doesn’t require class components anymore! You still need classes though if you have to respond to lifecycle events. However, that should be much easier now when you only need to worry about changes to
Please find the complete source code for the stateful package at GitHub. We believe that by stopping requiring people to write classes to build a simple website, we can attract more people towards React development. Contributions are welcome! ❤️