Unveiling React 19: New hooks Explained!

khush — Tue, 12 Mar 2024 09:21:25 +0000

React 19 is here, and it's bringing some seriously cool stuff to the table. Among the highlights are four new hooks: useOptimistic, useFormStatus, useFormState, and the intriguingly named use. So, let's dive in and see how these hooks can sprinkle some magic into your coding adventures.

Exploring React 19’s New Hooks:

useOptimistic: Imagine this: you click a button, and bam! The UI updates instantly, no waiting around for the server to catch up. That's what optimistic UI is all about, and the useOptimistic hook makes it a piece of cake to implement. It allows you to update the UI optimistically before receiving confirmation from the server, providing a seamless user experience. With useOptimistic, you can ensure that your users never have to twiddle their thumbs waiting for feedback again.

useFormStatus: The useFormStatus hook manages the status of form fields, handling validation logic and submission state, making form management a breeze. It gives you status information of the last form submission.

useFormState: The useFormState hook serves as a manager for form input states, offering a centralized mechanism to monitor and modify their values efficiently. It allows you to update state based on the outcome of form actions.

This hook requires two arguments:

fn: This parameter represents the function to execute when the form is submitted or a button is pressed. Upon invocation, this function receives the previous state of the form (initially the initialState that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
initialState: This argument denotes the initial state value desired for the form. It can be any serializable value. Once the action is initially invoked, this parameter becomes irrelevant.

use is a versatile React Hook designed to fetch and utilize the value of a resource, such as a Promise or context, within your components or custom hooks. What sets use apart from other React Hooks is its unique ability to be invoked within loops and conditional statements, such as if blocks. However, it still adheres to the standard requirement that the function utilizing use must be either a Component or another Hook.

And that's a wrap, folks! You can read about React 19’s new hooks in depth and their potential uses from the official react documentation:
use , useFormState,
useFormStatus,
useOptimistic

So, next time you're coding away, keep these hooks in mind. They'll make your life easier and your projects way more awesome. After all, in the world of web dev, it's all about staying fresh. Happy coding!

find() vs filter()

khush — Tue, 04 May 2021 08:12:07 +0000

Many of us are accustomed to using to two common functions in js, that is, filter() and find(). A lot of the times we use these functions without paying a lot attention to it. Let's discuss in which situations should you actually use them.

find():

find is a function that iterates through an array and returns the first element in the array that matches the given predicate.
eg. find the person with name Amy


    
const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}];
console.log(arr.find((person) => person.name === 'Amy'));

filter():

filter is a function that iterates through an array and returns a new array of all elements in the array that matches the given predicate.
eg. finding all person whose name's start with 'R'


    
const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}];
console.log(arr.filter((person) => person.name[0] === 'R'));

Now, that we have seen what these two functions essentially do let's see when should we use them.

filter() basically runs through the entire array to see if the given predicate is matched which means you should be only using it if you expect more than one item to match this predicate. Although, this seems like a pretty simple thing to remember a lot of the times we see people using filter in place of find().
When you want to search for an element in the array use find() instead of returning an array from filter and doing something like resultOfFilter[0].

The main advantage of using find() in those cases is that find returns as soon as a match is found, but filter would run through the entire array even if a match is found in the 1 st index position and you don't want to do that for large arrays when all you are concerned about is one match!

See below how filter iterates through all the elements while find returns on the first match.


    
const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}];
console.log(arr.filter((person) => { 
console.log('inside filter, current name: ',person.name);
return person.name === 'Tom' }));
console.log(arr.find((person) => { 
console.log('inside find, current name: ',person.name);
return person.name === 'Tom' }));

DEV Community: khush

Unveiling React 19: New hooks Explained!

Exploring React 19’s New Hooks:

find() vs filter()

find():

filter():