Preact — Preact X Features

Photo by REVOLT on Unsplash

Preact is a front end web framework that’s similar to React.

It’s smaller and less complex than React.

In this article, we’ll look at how to get started with front end development with Preact.

Hooks

Just like React, Preact has hooks, and they work the same way.

For example, we can write:

import { render } from "preact";
import { useState, useCallback } from "preact/hooks";
export default function App() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);
  return (
    <div>
      <p>count: {value}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We call the useState hook to create the value state.

And we can set that with the setValue function.

And we create the function to increment the value state with the useCallback hook.

We pass in the function we want to call inside it to cache it until value changes.

And finally, we render the count and the increment button.