As React developers, we know how hard it can be to control deeply nested child
components from a parent component. Several tools and methodologies are available for doing this.
Some of these techniques include passing controlled state down explicitly via props (the dreaded
prop drilling approach), Compositioning (Using the children prop), enclosing a context over the
children elements(createContext & useContext) & Global state management by using stage management
libraries such as Redux or Mobx.
All the approaches mentioned above are valid solutions to the problem posed above. The only issue is
most of the solutions involve either a lot of code restructuring and manual intervention(in the case
of prop drilling and composition) or boilerplate code scaffolding(In the case of using context or
most global state management libraries).
With signals, Controlling such states becomes trivial and developer friendly but do note that there
are certain caveats to this approach if you use React’s latest concurrency features in your code
base. At this point, there are no official exports from the react library that fully supports
signal-based state updates. As a result, we’ll use the lightweight version of react known as Preact
that offers this capability.
Using Preact Signals in React
Let’s start by creating a new react project. I’ll scaffold a new project using Vite as the build
tool and pnpm as the package manager. You may follow along with the aforementioned tools or any tool
that you are comfortable using.
Run the following in your shell:
pnpm create vite
It will show a few prompts like the library to install(choose React) & whether to use
typescript or not(I’ve chosen to use typescript with swc compiler). Finally, Run pnpm install to
install all dependencies into node_modules.
To start the development server with the boilerplate code introduced by vite, Execute the following
in your shell:
pnpm dev
To use react signals we’ll have to install the preact signals package from pnpm. In your shell, run:
pnpm i @preact/signals-react
Once this package gets installed, We can start using signal-based state variables by importing the
signal function from the preact signals package as follows:
GlobalState.ts
import { signal } from "@preact/signals-core";
To create a global state variable, Do the following in the global scope of your file(Basically not
inside your React component code):
GlobalState.ts
import { signal } from "@preact/signals-core";
const theme = signal('light');
Now you can use this in your components and change values by direct mutation(there’s no need to
return new values in a setter function as the update is handled internally by proxies). We can do
one better. Instead of using the global state variable directly, we can use the computed function
provided by the preact-signals library to derive the state and use it in our components as
follows:
GlobalState.ts
const theme = signal('light');
import { computed, signal } from "@preact/signals-react";
const currentTheme = computed(() => theme.value);
export default currentTheme;
Now it’s only a matter of importing the currentTheme in any of your tsx files and embedding it into
the JSX using the curly brace notation({currentTheme}).
Somefile.tsx
<div>{currentTheme}</div>
To make changes to the theme state variable, You can either directly export and import the theme
global state variable or preferably create helper functions to restrict the usage of the theme state
variable. For example:
GlobalState.ts
const theme = signal('light');
import { computed, signal } from "@preact/signals-react";
const currentTheme = computed(() => theme.value);
export const toggleTheme = () => (
currentTheme.value === 'Light' ?
theme.value = 'Dark'
:
theme.value = 'Light'
);
export default currentTheme;
To use toggleTheme function, Import it in your tsx files and call it like any normal
function.
Somefile.tsx
<button onClick={toggleTheme}>Toggle Theme<button>
Just by looking at the sample code, it is quite evident that using and manipulating global state
variables becomes a lot easier plus there are no performance side effects related to unnecessary
rerenders as signal-based state change cause the affected part of the DOM tree to get the new state
without causing the entire component to rerender.
Final Code
App.tsx
GlobalState.ts
ShowCurrentTheme.tsx
ToggleThemeButton.tsx
Many other use cases and advanced scenarios can leverage the various other exports from the
preact-signals package. There are hooks variant to create signal-based state within local to your
function component if you do not want it to be globally accessible with the added benefit of being
more performant with updates. Reading the preact signals documentation for more complex use cases
and guidelines on best practices is a necessary first step in your journey to learn and integrate
signal-based state management into your codebase. You can checkout the above code at this link.
Conclusion
React signals are a powerful tool for React developers that can help create more efficient and
maintainable code. By using React signals, you can create loosely coupled components that
communicate with each other without relying on props or state. This can lead to better performance,
improved code readability, and easier maintenance over time. If you are looking for a way to improve
your React applications, consider using React signals in your code.