Preact: Is it moreover React?

Those of you who are already familiar with Preact would instantly say ‘NO’. The documentation states that Preact doesn’t contain all the features of React. But during my exploration of Preact, I really found some amazing features in Preact. So let’s go through each of them one by one and I’ll leave up to you to decide the answer to the title of this post.
h() function
The h1() function comes from hyperscript and it converts your JSX code into virtual DOM elements. The first parameter is the tag name, the second is a set of attributes attached with the element which are usually wrapped in {}. The code snippet below will illustrate the JavaScript code created by React and Preact.
The h() function reduces the verbosity of the compiled JSX code and is easier to read and write.
state and props as params to render method
render() method in Preact provides props and state by default for our convenience. We can use destructuring here to pull off the properties of local state for the Component. The following code example will explain this in detail.
this.state has a lot of references in React and Preact applications. So it can be easily replaced with state inside render method in Preact. Using destructuring you can use the local properties of the component at your convenience.
linkState in Preact
linkState help to reduce boilerplate code from your app and allows you easily create two way bindings. Thus, it automatically handle state changes of our components. linkState is available as an external module in Preact. You can download it using npm. The following illustrates a small example of two way binding.
Without linkState, there is a lot of code for creation of a simple form component. This can be avoided by linkState which reduces the the function bindings. You can ask the component for the value of the form field instead of searching the DOM. The internal state of the component can be tracked by the form field. In React also you can use linkState for two way binding by importing linkState from npm or yarn.
Notes
- To use preact as complete drop-in for react for compatibility with other react packages use the aptly named
preact-compatpackage.
These are some of the outstanding features of Preact. There is much more to it; to learn more about Preact you can read about it at
Finally, thanks to https://egghead.io for an amazing course on fundamentals on Preact.
Thanks for reading, all feedback is appreciated!
