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 (state) itself.
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 initialState property you can pass a JavaScript object representing the initial state for that section. Then you just need to provide the implementation in 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.
Behind the scenes, your initial state is changed into a watchable object using a technique inspired by Meteor’s reactive system. Thanks to JavaScript property accessors this is completely transparent to a developer. Basically this sort of magic is only possible due to single-threaded processing of JavaScript runtime.
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 props.
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! ❤️
