Preact: Fast 3kB alternative to React with the same ES6 API.

Preact is a lightweight (just 3kb) alternative to React which has same interface (ES6), but better performance. Preact also has a few new features, i.e.,

  • Arguments props, state and context are passed to render()
  • Standard HTML attributes class and for
  • React DevTools right out of the box

There is a migration guide at the which is basically replacing react and react-dom with preact npm packages.

I imported my AnalogDisplay component (original in React) into preact JSFiddle code, and they worked well. I can either use this.state or just state in render(). Here’s the JSFiddle code: and the source code:

/** @jsx h */

const { h, render, Component } = preact;
const AnalogDisplay = (props) => {
  var date = new Date(props.time)
  var dialStyle = {
    position: 'relative',
    top: 0,
    left: 0,
    width: 200,
    height: 200,
    borderRadius: 20000,
    borderStyle: 'solid',
    borderColor: 'black'
  var secondHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid red',
    width: '40%',
    height: 1,
    transform: 'rotate(' + ((date.getSeconds()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'red'
  var minuteHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid grey',
    width: '40%',
    height: 3,
    transform: 'rotate(' + ((date.getMinutes()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  var hourHandStyle = {
    position: 'relative',
    top: 92,
    left: 106,
    border: '1px solid grey',
    width: '20%',
    height: 7,
    transform: 'rotate(' + ((date.getHours()/12)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  return <div>
    <div style={dialStyle}>
      <div style={secondHandStyle}/>
      <div style={minuteHandStyle}/>
      <div style={hourHandStyle}/>

class Clock extends Component {
    constructor() {
        this.state.time =
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({ time: })
        }, 1000)

    componentWillUnmount() {

    render(props, state) {
        let time = new Date(state.time).toLocaleTimeString()
        return <span>{ time }<br/><AnalogDisplay time={this.state.time}/></span>

render(<Clock />, document.body)



Reading blog posts is good, but watching video courses is even better because they are more engaging.

A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course!

Go check out Node University which has FREE video courses on Node:

[End of sidenote]

More examples are at

The missing or different things are PropTypes, Children and Synthetic Events (source).

Overall, Preact seems like a good alternative especially when performance is vital and there’s no need for extra features like ES5 createClass or PropTypes.

Sidenote: If you like this post and interested in a corporate on-site JavaScript, Node.js and React.js training to boost productivity of your team, then contact

Azat Mardan
Azat Mardan avatar
To contact Azat, the main author of this blog, submit the contact form.

Also, make sure to get 3 amazing resources to FREE when you sign up for the newsletter.
No commitment.

Leave a Reply

Your email address will not be published. Required fields are marked *