React Hooks are Dead? How Signals Are Taking Over
Tags: react, javascript, webdev
Published: 2023-12-15 23:28:46

React Hooks are dead and it's official! hooks have always been the traditional way of handling state and running side-effects in our React components and for a while, they made it easy for React. However old things shall pass away and all things will become new. This post is just to say grace for Hooks before we usher it into the great beyond. [Signals](https://preactjs.com/guide/v10/signals/) are a concept that has been around in other frameworks for a while but they just got added to react and since then signals have blown up in popularity and usage. All major frontend frameworks have their implementation of signals.

You now have to ask the question, why are signals so popular and why is everyone using them? You see signals provide another layer of abstraction on top of your framework and in this case React, signals take care of tracking a variable state, updating it, and rerendering your components for you. Signals also allow us to write reactive code which makes it very easy to run side-effects without having to manage any dependency array because that has already been done for you. They can reduce your reliance on `useMemo` and `useCallback` due to their lazy nature and dependency tracking feature.

So we have established that signals are the new knight in shining armor, well let's get on with how that is of any use to us. In today's post, I'm going to show you how to get started with using signals in your react project, I'm going to keep the react application as simple as possible, and we will be considering the following talking points

- Setup React Project Setup/Walkthrough
- Installing and using signals
- Computed Signals
- Side Effects with Signals
- Will signals replace hooks?

## Project Setup

The setup for this project is simple, I'm going to assume that you already know how to set up a React project so I'm going skip that however let me show you what our overall project structure looks like

```javascript
src-----/assets
    |---/components
    |---/navigation
    |---/pages
    |---/App.jsx
    |---/helper.js
    |---/index.css
    |---/main.jsx
```

The only folders we will concern ourselves with are the `components` folder, the `pages` folder and the `helper.js` file, the `components` folder has two three components inside, a `Navbar` component, a `Footer` component and `Post` component.

```javascript
src---/components/Footer.jsx
      |----------/Navbar.jsx
      |----------/Post.jsx

  ----/pages/index.jsx
      |-----/post/index.jsx
            |----/components/post_detail.jsx

  ----/helper.js

```

The `pages` folder has an `index.jsx` file which is the home page, and a folder, `post` which in turn has its own `index.jsx`  file, and a `components` folder which has just one component inside, a `post_detail.jsx` file. The `helper.js` file will export functions that we will use inside our application.

## Installing and using signals

To install signals in your project spin up a terminal and run the following command;

```bash
npm i preact/signals-react
```

This installs the [preact signal library for react](https://www.npmjs.com/package/@preact/signals-react), let's go ahead and start creating signals. Let's edit the `helper.js` file.

```javascript
// src/helper.js
import { signal } from "@preact/signals-react";

const Posts = signal([
  {
    id: 1,
    title: "Introduction to Javascript",
    published: "10th May 2020",
    tags: ["javascript", "programming"],
    readingTime: 3,
    description:
      "Lorem ipsum dolor sit amet c....",
    author: "Kinanee Samson",
  },
  {
    id: 2,
    title: "Introduction to Python",
    published: "8th March 2021",
    tags: ["python", "programming"],
    readingTime: 3,
    description:
      "Lorem ipsum dolor sit amet c....",
    author: "Kinanee Samson",
  },
]);

export const getPosts = () => {
  return Posts;
};
```

I've imported the `signal` from `preact/signals-react` and this is a function that takes in a single value as its argument and returns a signal for us. I just use the function here to wrap our array of posts then we store the result inside a variable `Post`. Then we create a function `getPosts` which just returns the `Posts` signal we've created, and then we export the `getPosts` function from this file so we can use it in other files.  Now let's head back to the index file to make use of these Posts.

```jsx
// src/pages/index.jsx

import Navbar from "../../components/navbar";
import Footer from "../../components/footer";
import Post from "../../components/post";
import { getPosts } from "../../helper";

const posts = getPosts();

const Home = () => {

  return (
    <section>
      <Navbar />
      <main>
        {posts.value.map((post, index) => (
          <Post
            key={index}
            title={post.title}
            description={post.description}
            author={post.author}
            published={post.published}
            readingTime={post.readingTime}
            id={post.id}
          />
        ))}
      </main>
      <Footer />
    </section>
  );
};

export default Home;
```

If you observe there's no use of any `useState` or `useEffect` statement to do any side effect or any complex state management. This is because like I stated earlier `Signals` abstracts all of that away from you and handles state management and reactivity by default. You can see how elegant our component looks and the fact that the signal will only also take care of rerendering components. Each signal has a `value` property defined on it, it is on this value property that the current value of that signal is stored. Whenever you access the value property on a signal you are subscribing to that signal. Whenever the `value` on the signal is updated your component will automatically be rerendered to display the current value of that signal.

## Computed Signals

Now let's write the function for retrieving an individual post. First, we'll edit the `helper` file.


```javascript
// src/helper.js

//....cont'd

export const getPost = (id) => {
  return signal(Posts.value.find((post) => post.id === Number(id)));
};

```

The function above accepts an `id` argument then we use the `id` to search through the `Post` signals to return the post with an id that matches the `id` we passed in, and then we return that value/post as a signal and this Pattern is known as `computed signals`. A computed signal is a signal whose value depends on another signal. Computed signals are read-only and they also manage their dependencies by default only updating when the underlying signal or dependency has updated. Now let's make use of this in our component.

```jsx

// src/pages/post/index.js

import Navbar from "../../components/navbar";
import Footer from "../../components/footer";
import PostDetails from './components/post-details'
import { getPost } from "../../helper";
import { useParams } from "react-router-dom";

const Post = () => {

  const {id} = useParams()

  const post = getPost(id)

  return (
    <section>
      <Navbar links={links} title="todo-blog" />
      <main className="body">
       {post && (<PostDetails 
        author={post.value.author}
        content={post.value.content}
        published={post.value.published}
        readingTime={post.value.readingTime}
        title={post.value.title}
       
       />)}
      </main>
      <Footer company_name="Netcreed" />
    </section>
  );
};

export default Post;

```

## Side Effects

I know you are wondering how on earth am I going to handle side effects in my components. If for any reason you have to run some side effects then you can use the `effect` function from preact signals-react. 

```jsx
// src/pages/post/index.js

// ...contd
import {effect} from '@preact/signals-react'


const Post = () => {

  const {id} = useParams()

  const post = getPost(id)

  effect(() => console.log(post.title))

  // ...contd

}

export default Post
```

The effect function accepts a callback function as its argument, now anytime the post changes the title of the post is going to be logged to the console, you can take advantage of this to run side-effects in your components.

## Will signals replace Hooks

Will signals replace Hooks? This is an interesting question to ask. Personally in my humble opinion signals will replace some hooks but not all hooks, as you can observe from the code examples we considered above you can see that things like state management and component side effects can be managed with signals which eliminate the need to use hooks for handling such situations. Even some basic implementations of useCallback and useMemo hooks can be replaced with signals. However, we can only go so far, for more complex useCallback and useMemo hooks we will still stick to hooks.

Although signals are quite new to React expect them to get so much better with time but for now this is what we have. At the end of the day, it might still boil down to the developer and what they'd prefer to use. Do you think that signals have just made hooks obsolete? Do you see the day when we no longer have to use hooks and instead signals become the bedrock of everything in React? Let me know what your thoughts are in the comment section. If you'd like to learn more about React and React hooks then you can check out my [YouTube channel](https://youtube.com/@netcreed?si=NzMDql5yyZmRlg9p) where I have a [React course for Javascript Developers](https://www.youtube.com/playlist?list=PLQOQaFJExIyOjLpBBSJAgGnLYUL3yjAUr) with over 15 videos on introduction to React, this course is designed to teach you how to build Godlike modern frontend applications with React.

{% youtube rUo3aeA9ybQ %}