Preact: Is it moreover React?

Astha Sharma
Aug 26, 2017 · 3 min read

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.

Comparison of compiled JSX in 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.

props and states available in render method

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.

Two way binding with and without linkState

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-compat package.

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!

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade