·
The React 18 useState() hook and the Angular 16 Signal feature are both ways of managing state in functional components. However, they have some differences in how they work and what they offer.
Differences:
Here are some of the main differences:
- React useState() hook returns an array with two elements: the current state value and a function to update it. Angular Signal feature returns an object with a getter function to access the value and methods to update, mutate, or compute it.
- React useState() hook requires you to pass a new value or a function that returns a new value to update the state. Angular Signal feature allows you to use the set(), update(), or mutate() methods to directly set, compute, or modify the value.
- React useState() hook does not provide a built-in way to create computed values that depend on other state values. You need to use other hooks like useMemo() or useEffect() for that. Angular Signal feature provides the computed() function to create read-only signals that derive their values from other signals.
- React useState() hook relies on Zone.js to detect changes and trigger rendering updates. Angular Signal feature tracks changes granularly and optimizes rendering updates without Zone.js.
React Snippet showing a counter with useState()
import { useState } from "react"; const Counter = (props) => { // Define a state variable for the count and initialize it to 0 const [count, setCount] = useState(0); // Define a function to increment the count by 1 function increment() { // Update the count by passing a new value setCount(count + 1); } // Define a function to decrement the count by 1 function decrement() { // Update the count by passing a function that returns a new value setCount((prevCount) => prevCount - 1); } return ( <div> <p>The count is: {count}</p> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </div> ); }; export default Counter;
Links to practice courses: React, Angular
import { Component } from "@angular/core"; import { signal, computed }from '@angular/core'; @Component({ selector: "my-counter", template: ` <div> <p>The count is: {{ count() }}</p> <p>The double count is: {{ doubleCount() }}</p> <button (click)="increment()">+</button> <button (click)="decrement()">-</button> </div> `, }) export class CounterComponent { // Define a writable signal for the count and initialize it to 0 count = signal(0); // Define a computed signal for the double count that depends on the count doubleCount = computed(() => this.count() * 2); // Define a method to increment the count by 1 increment() { // Update the count by using the update method this.count.update((value) => value + 1); } // Define a method to decrement the count by 1 decrement() { // Update the count by using the set method this.count.set(this.count() - 1); } }