Forem: swagath TP

Simple Tweaks That Can Make Your Meilisearch Faster

swagath TP — Sun, 03 Aug 2025 16:12:07 +0000

Meilisearch is a really powerful search engine; it’s fast, open-source, and easy to set up.

But if you don’t configure it properly, especially the indexing and attributes, it can start to feel slow.

Let’s say you set up an index with a few thousand records and start running searches. At first, things feel snappy — queries respond in under 20ms, which is very fast.

But then you notice that some searches — especially those with 3 or more keywords — are suddenly taking above 300ms or more, even on a local instance.

Making just a few small tweaks to how you set up your indexes and attributes can significantly improve speed and overall performance.

What Makes Meilisearch Slow?

Have you ever felt like your Meilisearch results are a bit slow? Maybe you’ve had to wait longer than expected for a simple search to load.

In many cases, just tweaking how you index your data can make a huge difference. Small changes, like setting up your searchable and filterable attributes properly or avoiding unnecessary fields, can significantly speed things up.

These little optimizations not only improve performance but also make the whole search experience smoother.

Optimizing Searchable Attributes

When we are working with Meilisearch, it's important to understand which fields in your documents actually need to be searchable.

Sometimes, fields like numeric values or booleans—such as price, age, or isActive—are only used for filtering or sorting and don’t need to be part of the searchable attributes. Including these fields in your searchableAttributes list can slow down indexing and impact search performance unnecessarily.

By removing any non-essential fields from the searchable list, Meilisearch focuses on what really matters for search, leading to faster and more efficient results.

When I didn’t set any searchable attributes, the search took 31ms

"swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{ \"q\": \"Gilbert Chan\" }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      },
      {
         "Show_Id":"s7015",
         "Category":"Movie",
         "Title":"The Workshop",
         "Director":"Laurent Cantet",
         "Cast":"Marina Foïs, Matthieu Lucci, Warda Rammach, Issam Talbi, Florian Beaujean, Mamadou Doumbia, Julien Souve, Mélissa Guilbert, Olivier Thouret, Lény Sellam",
         "Country":"France",
         "Release_Date":"November 10, 2018",
         "Rating":"TV-MA",
         "Duration":"114 min",
         "Type":"Dramas, International Movies",
         "Description":"In an old shipyard town in France, sociopolitical tensions beset a writing workshop where the instructor notices a student with a dark side."
      }
   ],
   "query":"Gilbert Chan",
   "processingTimeMs":20,
   "limit":20,
   "offset":0,
   "estimatedTotalHits":14
}real    0m0.031s
user    0m0.004s
sys     0m0.004s

After specifying Director as a searchable attribute, the search time dropped to 10ms

"swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{ \"q\": \"Gilbert Chan\" }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      }
   ],
   "query":"Gilbert Chan",
   "processingTimeMs":0,
   "limit":20,
   "offset":0,
   "estimatedTotalHits":1
}real    0m0.010s
user    0m0.002s
sys     0m0.005s

I initially didn’t set any searchableAttributes, so Meilisearch ended up searching through every field in the document. This made the search slower, around 31ms.

Later, I explicitly set only the Director field as searchable, and the search time dropped to 10ms. By telling Meilisearch exactly where to look, I avoided unnecessary processing and made the search way faster.

Choosing the Right Filterable Attributes

Just like searchable attributes, it's a good idea to be careful with what you add to your filterable attributes in Meilisearch.

It might seem okay to make everything filterable, but that can slow things down and make your index heavier. We only have to add fields that we really plan to use for filtering, like category, status, or isActive. These are the kinds of fields users might select in a filter or dropdown.

I had many fields marked as filterable — everything from Title to Country to Description. When I ran a filtered search using just Show_Id, it took 19ms

"swagath@VictusbyHP":"~$ curl -X GET""http://127.0.0.1:7700/indexes/shows/settings/filterable-attributes""\\
  -H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E"[
   "Show_Id",
   "Category",
   "Title",
   "Director",
   "Cast",
   "Country",
   "Release_Date",
   "Rating",
   "Duration",
   "Type",
   "Description"
]
swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{
    \"q\": \"Gilbert Chan\",
    \"filter\": \"Show_Id = \"s3\"\"
  }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      }
   ],
   "query":"Gilbert Chan",
   "processingTimeMs":0,
   "limit":20,
   "offset":0,
   "estimatedTotalHits":1
}real    0m0.019s
user    0m0.000s
sys     0m0.007s

I only ever needed to filter by Show_Id, so I cleaned up the filterableAttributes and kept only that one field. The search got even faster, down to 10ms.

"swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{
    \"q\": \"Gilbert Chan\",
    \"filter\": \"Show_Id = \"s3\"\"
  }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      }
   ],
   "query":"Gilbert Chan",
   "processingTimeMs":0,
   "limit":20,
   "offset":0,
   "estimatedTotalHits":1
}real    0m0.010s
user    0m0.000s
sys     0m0.008s

If a field isn’t going to be used in filters, it’s better to leave it out. Keeping the filterable list clean helps Meilisearch work faster.

Keep Meilisearch for Searching Only

Meilisearch is built for fast and efficient information retrieval, not for storing your entire dataset like a database. It works best when you index only the documents that you actually need to search.

The more documents you add, the heavier it becomes—indexing takes longer, and search performance can slow down. So, it’s a good idea to keep your index focused.

Flatten Your Data for Better Speed

Are you storing full HTML content or deeply nested objects inside your documents?

If so, that might be slowing your Meilisearch down. These types of fields add unnecessary weight to each document, making indexing heavier and searches less efficient.

Optimizing your Meilisearch index structure can make a big difference in performance. Instead of dumping everything in, try to normalize and flatten your data before indexing.

Keep only what you need for searching and filtering.

Avoid Overload

Fetching too many results at once can slow down your app and put extra load on the server.
In Meilisearch, large search responses mean more work for the CPU and bigger payloads to send over the network.

A simple way to avoid this is by using pagination. By default, Meilisearch returns 20 results per page, which is usually enough for most use cases.

"swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{
    \"q\": \"s3\",
    \"limit\": 50
  }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      },

   ],
   "query":"s3",
   "processingTimeMs":1,
   "limit":50,
   "offset":0,
   "estimatedTotalHits":1000
}real    0m0.017s
user    0m0.004s
sys     0m0.005s

After reducing the limit to 10 it took only 10ms.

"swagath@VictusbyHP":"~$ time curl -X POST""http://127.0.0.1:7700/indexes/shows/search""-H""Content-Type: application/json""-H""Authorization: Bearer mPGrxPdYtrbGtfQPUMtJfHTyzkkTOtVs6cWXcT4r3-E""--data-raw""{
    \"q\": \"s3\",
    \"limit\": 10
  }"{
   "hits":[
      {
         "Show_Id":"s3",
         "Category":"Movie",
         "Title":"23:59",
         "Director":"Gilbert Chan",
         "Cast":"Tedd Chan, Stella Chung, Henley Hii, Lawrence Koh, Tommy Kuan, Josh Lai, Mark Lee, Susan Leong, Benjamin Lim",
         "Country":"Singapore",
         "Release_Date":"December 20, 2018",
         "Rating":"R",
         "Duration":"78 min",
         "Type":"Horror Movies, International Movies",
         "Description":"When an army recruit is found dead, his fellow soldiers are forced to confront a terrifying secret that's haunting their jungle island training camp."
      },
      {
         "Show_Id":"s36",
         "Category":"Movie",
         "Title":"#Rucker50",
         "Director":"Robert McCullough Jr.",
         "Cast":"",
         "Country":"United States",
         "Release_Date":"December 1, 2016",
         "Rating":"TV-PG",
         "Duration":"56 min",
         "Type":"Documentaries, Sports Movies",
         "Description":"This documentary celebrates the 50th anniversary of the Harlem sports program that has inspired countless city kids to become pro basketball players."
      },
   ],
   "query":"s3",
   "processingTimeMs":0,
   "limit":10,
   "offset":0,
   "estimatedTotalHits":1000
}real    0m0.010s
user    0m0.003s
sys     0m0.004s

Unless you really need more, it’s better not to increase the limit too much. Keeping the number of results small helps your search stay fast.

Setup your Index First

When you're creating a new index in Meilisearch, it's a good idea to configure the settings before you start adding documents.

Things like searchableAttributes or filterableAttributes—if you tweak these after the data is already in, Meilisearch will need to reindex everything. And yep, that can take a while if your dataset is big.

To save time and avoid that extra work, just get your settings right first, then load your documents.

Optimization Area	wihout optimizing	with optimizing
Searchable Attributes	31ms	10ms
Filterable Attributes	19ms	10ms
Overloaded Payloads	17ms (limit: 50)	10ms (limit: 10)
Data structure (raw HTML / nested)	Heavy	Lightweight

Wrapping up

Meilisearch is a powerful tool—but like any tool, it performs best when used correctly.
Over time, I’ve learned that keeping the index lean, focusing only on the necessary searchable and filterable attributes, and avoiding overly complex data structures can lead to significantly better performance.

Configuring things like searchable attributes and filterable fields before indexing goes a long way in keeping everything efficient and smooth.
These aren’t massive changes, but they have a noticeable impact.

What the Hash?! Understanding the Basics of Hashing

swagath TP — Sun, 04 May 2025 17:13:25 +0000

Hashing is an important concept that helps us organize and manage data more efficiently. It's like a shortcut to finding things quickly!
Whether it's for quickly looking up data in hash tables or storing passwords securely, hashing makes sure we can access data quickly and consistently.

In this article, we’ll explore what hashing is, how it works, and the key components behind it.

What is Hashing?

Hashing is a technique used to convert a given input—such as a string, number, or file—into a unique value, often in the form of a hash code.

Hashing for Utility vs. Security

It's also important to know that not all hashing algorithms are built for the same job. Some are designed just to help organize and retrieve data quickly—like the ones used in hash tables or dictionaries.

These are great when you need fast lookups and don’t care much about security. On the other hand, algorithms like SHA-256 or MD5 are made for security purposes. They’re used when you want to protect sensitive data, like storing passwords or verifying file integrity.

So basically, if you're building something like a login system, you'd use a secure hash like SHA-256. But if you're just mapping keys to values in a hash table, a simple and fast hash function is all you need.

How Hashing Makes Data Lookup Fast

In data structures like hash tables, which store key/value pairs, each piece of data is stored in an array-like structure, and the hashing process helps determine the specific location where each element will go.

When you want to find or update a value, hashing makes it quick and efficient because it allows for constant-time lookups. Rather than searching through the entire dataset, hashing quickly identifies the location of the data by generating a unique hash code for each key. This unique code is then used as an index to access the corresponding value.

This method is especially useful for large datasets, as it ensures that lookups, insertions, and deletions happen in nearly constant time, regardless of the size of the data.

Components of Hashing

Keys

A key can be any piece of data, such as a string, number, or file, which is input into the hash function. This key is used to determine where the data will be stored in a hash table.

Hash function

We use the hash function to take an input key and generate a unique index, known as the hash index, where the corresponding data will be stored.
It converts the key into an index in the hash table, making it easier to locate and retrieve the data efficiently.

Hash table

A hash table is a data structure that stores data by mapping keys to values with the help of a hash function. It organizes the data inside an array, where each value is placed at a specific index generated from its key, making it easy to access the data later.

What is Hash Collision

A hash collision happens when two different keys are assigned the same index in a hash table. This occurs because the hash function, which calculates where each item should go, might occasionally produce the same result for different inputs.
It's like two people accidentally having the same house number on the same street.

To handle collisions, hash tables use techniques like placing both items at the same index using a list (chaining), or finding another nearby spot for one of them (open addressing).

These methods help ensure that even when collisions happen, the data remains accessible and the system continues to work without any issues.

What Are Hashing Algorithms?

Basically, a hash algorithm is just a set process that takes any kind of input—like a bit of text, a number, or even a whole file—and turns it into a fixed-length string that looks totally random.

Regardless of the size of the input, the resulting hash always has a fixed length. And if you give it the same input again, you’ll always get the exact same hash back.

Over the years, plenty of different hashing algorithms have been created—each with its own way of working, along with its pros and cons depending on where it's used.
MD5, SHA, and CRC32 are some of the most popular algorithms used nowadays.

MD5 (Message Digest 5)

MD5 was widely used in the past but now it is considered insecure because it can cause collisions (two different inputs giving the same hash).
It’s still used for tasks like checking file integrity but not for sensitive data.

import hashlib

def md5_hash(text):
    text_bytes = text.encode('utf-8') 
    hash_object = hashlib.md5(text_bytes)  
    return hash_object.hexdigest() 


user_input = input("Enter text to hash using MD5: ")
hashed = md5_hash(user_input)
print(f"MD5 hash of '{user_input}': {hashed}")

Output:

This is a hash function that uses the MD5 algorithm from Python's hashlib module.
MD5 produces a 32-character hexadecimal string. It's fast but not secure for cryptographic use.

SHA (Secure Hash Algorithm)

SHA refers to a group of hashing algorithms, with SHA-2 being the most common these days.
It’s trusted for securing private data and is used in applications like blockchain and digital certificates.

import hashlib

def sha256_hash(text):
    text_bytes = text.encode('utf-8')
    hash_object = hashlib.sha256(text_bytes)
    return hash_object.hexdigest()


user_input = input("Enter text to hash using SHA-256: ")
hashed = sha256_hash(user_input)
print(f"SHA-256 hash of '{user_input}': {hashed}")

Output:

In this example, we're using Python's built-in 'hashlib' module
to create a SHA-256 hash of a string entered by the user.
HA-256 produces a 256-bit (32-byte) hash value, represented as a 64-character hexadecimal string.

CRC32 (Cyclic Redundancy Check)

CRC32 is mainly used for error checking—like making sure files haven’t been corrupted during download.
It’s quick and easy but not strong enough to protect sensitive data.

import zlib

def crc32_hash(text):
    text_bytes = text.encode('utf-8')
    crc = zlib.crc32(text_bytes)
    return format(crc & 0xFFFFFFFF, '08x')

user_input = input("Enter text to hash using CRC32: ")
hashed = crc32_hash(user_input)
print(f"CRC32 hash of '{user_input}': {hashed}")

Output:

This function computes the CRC32 checksum of a given input string.
CRC32 is used for error-checking, not for cryptographic purposes.
It returns a 32-bit unsigned integer value.

Why Hashing is More Efficient

Arrays are commonly used to store data and allow fast access by index in O(1) time. However, searching for a specific value—when the index is unknown—takes O(n) time in an unsorted array.

To address this inefficiency, we use hashing. Hashing enables key-based access in O(1) average time by applying a hash function to the key, which maps it to a specific position in a hash table.

Conclusion

Hashing is a simple but useful technique that helps us store and secure data efficiently.
There are different algorithms depending on what you need, but the core idea stays the same: take some data and turn it into a unique, fixed-size value that’s quick to work with.

Understanding how hashing works gives us a better idea of what’s happening behind the scenes in apps, websites, and systems we use every day.

React 19: New Hooks Every Developer Should Know

swagath TP — Sun, 26 Jan 2025 15:53:15 +0000

React 19 was officially released on npm on April 25, 2024.

This latest version brings a strong focus on enhancing performance and efficiency, along with exciting features designed to simplify web development and improve overall user experience.

What's new?

React 19 has some new features like automatic performance optimizations through the new React Compiler, server side rendering with Server Components for faster load times, enhanced concurrent rendering for smoother user experiences, etc.
One thing that caught my attention is the introduction of some brand-new hooks.

In this article, we'll look into these new hooks, explore their unique capabilities, and discuss how they can enhance your projects.

useTransition-Make slow tasks feel smooth

The useTransition() hook is designed for handling asynchronous operations by keeping your interface smooth and responsive.
It allows you to manage pending states and errors seamlessly, ensuring that your app doesn't freeze or become unresponsive during async tasks.

Have you ever clicked a button in an app and felt like it froze for a second? useTransition() can fix that.
It lets React handle loading in the background while keeping the app smooth and interactive. The UI can let users do other things, and when the data is ready, it updates without any delay.

For example, you can use it to implement a "delete item" feature where the item disappears from the UI instantly, while the actual deletion happens in the background.

If the operation fails, useTransition allows you to handle errors gracefully without freezing the input or affecting the user experience, creating a more polished, responsive interface.
It's an essential tool for modern apps, especially when dealing with user interactions that depend on backend operations.

const Transition = () => {
 const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
 const [isPending, startTransition] = useTransition();
 const [error, setError] = useState(null);
const deleteItem = (itemToDelete) => {
 const updatedItems = items.filter(item => item !== itemToDelete);
 setItems(updatedItems);
 startTransition(() => {
 fakeDeleteAPI(itemToDelete)
 .then(() => {
 console.log(`${itemToDelete} deleted successfully.`);
 })
 .catch((err) => {
 setError(`Failed to delete ${itemToDelete}: ${err.message}`);
 setItems(items); 
 });
 });
 };
return (
 <div className="trans-container">
 <h1 className="trans-heading">Delete Item Example</h1>
 {error && <div className="error-message">{error}</div>}
 <ul className="item-list">
 {items.map((item) => (
 <li key={item} className="item">
 {item}
 <button className={`delete-button ${isPending ? "loading" : ""}`} onClick={() => deleteItem(item)}>
 {isPending ? "Processing…" : "Delete"}
 </button>
 </li>
 ))}
 </ul>
 {isPending && <p className="loading-indicator">Processing…</p>}
 </div>
 );
};

useActionState-Manage action states easily

The useActionState() hook is a real-time saver when it comes to managing async actions.

If you've ever dealt with fetching data from an API or performing background tasks, you know how tricky it can be to track loading states, success, and errors.

This is where useActionState() steps in to simplify the process.
It automatically gives you access to the action's pending status, so you can easily show loading spinners or placeholder content while the operation is in progress.

Once the action is complete, it updates with the latest data, so you don't have to worry about manually managing the state or re-rendering components.

For example, imagine you're building a user profile page that fetches user data from an API.
With useActionState, you can automatically display a loading while the data is being fetched, and once the data arrives, it's seamlessly updated on the page.

function UserDetails() {
 const [result, formAction, isPending] = useActionState(fetchUser, null);

 return (
 <div className="user-details-container">
 <h2 className="user-details-heading">Fetch User Information</h2>
 <form action={formAction} className="fetch-user-form">
 <button
 type="submit"
 className={`fetch-user-button ${isPending ? "loading" : ""}`}
 disabled={isPending}
 >
 {isPending ? "Loading…" : "Fetch User Info"}
 </button>
 </form>
{isPending ? (
 <div className="loading-indicator">Loading…</div>
 ) : result?.success ? (
 <div className="user-details">
 <p><strong>Name:</strong> {result.details.name}</p>
 <p><strong>Email:</strong> {result.details.email}</p>
 <p><strong>Age:</strong> {result.details.age}</p>
 </div>
 ) : result?.message ? (
 <p className="error-message">{result.message}</p>
 ) : null}
 </div>
 );
}

useOptimistic-Make the updates feel instant

The useOptimistic() hook is a great tool for handling optimistic UI updates, making your app feel faster and more responsive.
If you've ever clicked a button and waited for a backend response before seeing the UI update.

This hook allows you to make temporary changes to the UI immediately while waiting for confirmation from the server.
If the backend operation succeeds, the temporary changes are finalized, but if it fails, useOptimistic automatically reverts the changes to maintain data consistency.

In this Todo List app, the useOptimistic() hook lets users see new tasks instantly, even before the server confirms them.

If something goes wrong, like a network issue, the app removes the task and keeps everything in sync, ensuring a smooth and consistent experience for the user.

function Todo({ messages, sendMessage }) { 
 const formRef = useRef(); 

 async function formAction(formData) { 
 addOptimisticMessage(formData.get("message")); 
 formRef.current.reset(); 
 await sendMessage(formData); 
 } 

 const [optimisticMessages, addOptimisticMessage] = useOptimistic(
 messages, 
 (state, newMessage) => [
 …state, 
 { text: newMessage, sending: true }
 ]
 );
}

By eliminating the delay between user actions and UI feedback, useOptimistic() creates a snappier and more engaging user experience.

Use-Simplify complex async workflows

The use() hook simplifies working with asynchronous resources, like promises and context, directly within the render phase.
Traditionally, managing async data in React required a combination of useEffect, useState, and conditional rendering for loading states.

With use(), you can now fetch data or consume async resources seamlessly without juggling multiple hooks or adding unnecessary complexity to your components.

It's like cutting out the middleman and letting React handle async workflows natively.

function UsersList({ promise }) {
 const users = use(promise);
 return (
 <div>
 <h1>User List</h1>
 <ul>
 {users.map((user) => (
 <li key={user.id}>{user.name}</li>
 ))}
 </ul>
 </div>
 );
}
export default function App() {
 const [userPromise, setUserPromise] = useState(null);
 const handleLoadUsers = () => {
 setUserPromise(fetchUsers());
 };
}

For instance, instead of using useEffect to fetch user data and update the state once the data arrives, you can now call the async function directly in your render code using use.

React will automatically pause rendering until the promise resolves, ensuring your UI updates only when the data is ready.
This not only simplifies your code but also makes it easier to reason about your components' behavior.

Conclusion

The new hooks like useTransition(), useActionState(), useFormStatus(), useOptimistic(), and use() will make development much more efficient.

They make coding simpler, save time by cutting out repetitive tasks, and improve the UI smoother.

Most importantly, they help create a better user experience, making apps faster, and more responsive. With these hooks, you'll find building modern, user-friendly applications quicker and more efficient than ever.