Kinanee SamsonReact 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 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
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.
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;
npm i preact/signals-react
This installs the preact signal library for react, let's go ahead and start creating signals. Let's edit the helper.js file.
// 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.
// 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.
// 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.
// 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.
// 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 where I have a React course for Javascript Developers with over 15 videos on introduction to React, this course is designed to teach you how to build Godlike modern frontend applications with React.
