Learning million

Million.js is a tool that makes React applications run faster. I found out about it while looking for ways to improve my website's performance. I stumbled upon a post by Timonwa and decided to explore Million.js further.

According to the documentation. The <For/> component should be used to fetch a list of items from the API database for better performance. This is better than using Array.map(), which could slow down the application. So, Million.js and the <For/> component are recommended for a smoother and quicker React application.

Example?

Let’s retrieve the emails from users using the Typicode API, using either React Query or Tan Query. If you're interested in exploring other alternative methods, you can refer to the article:

How to Fetch API Data in React.

Using the <For/> Tag

<>

  <For each={emails}>

    {(email) => <div key={email}>{email.email}</div>}

  </For>

</>        

Complete code

import { useQuery } from '@tanstack/react-query';
import { For } from 'million';

const UseFor = () => {
 const { data: emails, isLoading, error } = useQuery({
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/comment_limit=10').then(
        (res) => res.json()
      ),
    queryKey: ['emails'],
  });

  if (isLoading) {
    return <h2 className="info">Loading...</h2>;
  }

  if (error) {
    return <h2 className="error">Error</h2>; // Fixed typo in error message
  }

  console.log(emails); // Log comments to the console

  return (
    <>
      <h1>Email of Users</h1>
      {/* Utilize Fragment syntax for cleaner JSX */}
      <For each={emails}>
        {(email) => <div key={email.id}>{email.email}</div>} 
      </For>
    </>
  );
};

export default UseFor;
        

Result

In the gif above, the brief delay happened because I wanted to demonstrate the loading and error states I set up it has nothing to do with million.js. When there's no internet, the error state shows up. But as soon as the internet is back, the list of emails appears quickly, making the application performance 70% faster.?

If there's a better option, feel free to suggest improvements—I'm open to corrections and updates.

and also feel free to experiment with the provided examples and share your experience. Your feedback and questions are not only welcomed but encouraged.

If you like my work, I'd appreciate your support by Buying me a drink??.

?#workinprogress?

Resource

• million

?Thanks for reading ??