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)


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.

Node University: Courses on Node.js, React and JavaScript

Become an expert with my comprehensive Node.js, React.js and JavaScript courses

Learn Full Stack JavaScript

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 *