Is Preact really React Alternative

Is Preact really React Alternative

Rahul Singh's photo
Rahul Singh
·

5 min read

Fast 3kb alternative to React with the same modern API stated by preact developer in their official site but the question remains the same. Let's find out?

What is PreactJS

Preact is a Javascript Library that describes itself as a fast 3KB with the same ES6 API.

Short Comparison

ReactJS Simple Counter

constructor() {
    super();
    this.state = {
      count: 0
    };
  }

incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

 <div class="buttons">
            <Button title={"-"} action={this.decrementCount} />
            <Button title={"+"} action={this.incrementCount} />
</div>

PreactJS Simple Counter

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

What do you think? which ends happy, let me know in the comment.

Enough comparison let's see what Preactjs offer that gives him so much confidence to come against React.

But what if I say Preact is like an iPhone 11 and React is iPhone 11 Pro Max. I think you get my point.

A different kind of library?

Closer the DOM

According to their website, Preact provides the thinnest possible Virtual DOM abstraction on the top of the DOM. Obviously, when you cut down the most and heavy DOM and convert it into the API DOM, it will be still closer to the DOM. Our iPhone 11 is closer to the iPhone 11 Pro Max

Small Size

I agree somehow they manage to keep all the important DOM API into the 3kb, this is seriously insane?

No, really not

Most of the important DOM API is missing, PropType is missing, You can create children component, Synthetic handlers are missing, thinking to use redux leave it.

Component.render({props}, {state});

Let's see another example of Preactjs, here we will create a simple Todo App to get the idea, how light it is from ReactJS.

I have a simple idea of creating an addTodo function to store in the state and after than displaying the data using Map.

Note: Not going the add validation and other function to make it feasible.

Todo example with PreactJs

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

Pros of Preact:

  • A lot faster and lighter than React.
  • Preact is compatible and even encourages using HTML over JSX.
  • It offers its own Server-side rendering, routing.

Why Preact is so small?

The answer is simple—the main reason for its smaller size is that Preact is only intended to work in a browser with DOM. It has different renderer syntax from React (such as react-dom or react-native), but it's not a drawback because it is compatible with React way too.

Cons of Preact:

  • At the time of writing, Hooks are in a separate preact package: preact/hooks.
  • At the time of writing, Preact only has experimental support for Lazy and Suspense components.
PreactReactalternative