Preact — Hooks
Tags: webdev, programming, javascript, beginners
Published: 2021-01-22 21:38:32

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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

Preact comes with hooks just like React.

We can use them to set states and commit side effects.

For example, we can use them by writing:

```
import { render } from "preact";
import { useState, useCallback } from "preact/hooks";

function useCounter() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => {
    setValue(value + 1);
  }, [value]);
  return { value, increment };
}

function App() {
  const { value, increment } = useCounter();
  return (
    <div>
      <p>Counter {value}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We create the `useCounter` hook with the `useState` and `useCallback` hooks.

The `useState` hook lets us create and set a state.

We have the `value` state and we can set it with the `setValue` function.

The `increment` function is created from the `useCallback` hook.

It takes a callback that lets us create a function to let us set states and commit side effects.

We used the callback to call `setValue` to set the value of `value` .

Then in the `App` component, we use the `useCounter` hook, which returns the `value` state and `increment` function to let us increase `value` by 1.

We render a button to call `increment` when we click it.

And we display the latest value of `value` .

Each instance of a hook is different from each other.

So using them in different places wouldn’t affect its state.

### useState

The `useState` hook lets us create and set a state.

The state change will cause the component to be re-rendered.

Therefore, we can see the latest value of the state.

For example, we can write:

```
import { render } from "preact";
import { useState } from "preact/hooks";

function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount((currentCount) => currentCount - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We create the `increment` function which calls the `setCount` function to update the state.

Also, we can pass in a callback to return the latest value of the state derived from the previous value of the state.

`currentCount` has the current value of the `count` state.

So when we click Increment, we see the `count` increment by 1.

And when we click Decrement, we see `count` decrease by 1.

### useReducer

The `useReducer` hook takes a function that looks like a Redux reducer.

We can use it to update more complex states.

For example, we can write:

```
import { render } from "preact";
import { useReducer } from "preact/hooks";

const initialState = 0;
const reducer = (state, action) => {
  switch (action) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return 0;
    default:
      throw new Error("Unexpected action");
  }
};

function App() {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch("increment")}>increment</button>
      <button onClick={() => dispatch("decrement")}>decrement</button>
      <button onClick={() => dispatch("reset")}>reset</button>
    </div>
  );
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We create the `reducer` function, which takes the `state` and `action` parameters.

`state` has the state.

`action` has the action name we pass into the `dispatch` function.

In `App` , we use the `useReducer` hook by passing in the `reducer` function and the `initialState` , which has the initial value of `count` .

Then we call the `dispatch` function to update the `count` state.

### Conclusion

We can use various hooks with the Preact hooks package.

Also, we can compose hooks to create other hooks.