DEV Community: Moises Marques da Silva

React 18 - useTransition hook

Moises Marques da Silva — Wed, 07 Feb 2024 19:50:38 +0000

In March 2022 React 18 was launched with some new interesting features, in this article we'll talk about the one of the 5 new hooks on React, the useTransition hook.

useTransition

This hook is used to control the timing of state changes that could occur based on user interactions. Simply put, useTransition hook enables state updates to occur in a way that is less blocking for user inputs resulting in a smoother user experience.

Benefits of useTransition

Improved User Experience: By using useTransition, developers can ensure that the application remains responsive and interactive during resource-intensive tasks, leading to a better overall user experience.
Smooth Animations: With useTransition, you can create smooth animations that run seamlessly, without blocking the user interface.

Better Performance: By deferring rendering and updates, the useTransition hook helps prevent unnecessary re-renders and optimizes performance.
Enhanced Code Maintainability: useTransition simplifies the management of complex animations and transitions, making the codebase cleaner and more maintainable.

Example: Infinite Scrolling with useTransition

Imagine you have a web application that displays a list of items retrieved from an API. As the user scrolls down, the application fetches additional data to load more items dynamically.

To provide a smooth user experience, you want to use the useTransition hook to handle the loading state and animations during data fetching.

Step 1: Create the app

Open VS Code and run the command bellow:

npx create-react-app infinity-scroll-app

Step 2: Write the following code on App.js

import React, { useState, useEffect, useTransition, useCallback } from "react";
import "./App.css";
import dummyData from "./dummyData"; // Assuming the file path is correct

function App() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);
  const [isPending, startTransition] = useTransition();

  const getItemsFromPage = (currentPage) => {
    const itemsPerPage = 10; // You can adjust the number of items per page
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return dummyData.slice(startIndex, endIndex);
  };

  const fetchMoreData = useCallback(() => {
    startTransition(() => {
      setItems((prevItems) => [...prevItems, ...getItemsFromPage(page)]);
      setIsFetching(false);
    });
  }, [page, startTransition]);

  useEffect(() => {
    if (isFetching) {
      fetchMoreData();
    }
  }, [fetchMoreData, isFetching]);

  const handleScroll = () => {
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = window.scrollY;

    if (scrollTop + windowHeight >= documentHeight) {
      setIsFetching(true);
      setPage((prevPage) => prevPage + 1);
    }
  };

  useEffect(() => {
    fetchMoreData();
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [fetchMoreData]);

  return (
    <div>
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => (
            <tr key={item._id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.country}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {isPending && <div>Loading more items...</div>}
    </div>
  );
}

export default App;

My Favorite Microservices Courses

Moises Marques da Silva — Wed, 17 Jan 2024 12:10:51 +0000

Microservices Foundations
https://www.linkedin.com/learning/microservices-foundations

Microservices Design Patterns
https://www.linkedin.com/learning/microservices-design-patterns

DevOps Foundations: Microservices
https://www.linkedin.com/learning/devops-foundations-microservices

Microservices Security
https://www.linkedin.com/learning/microservices-security/securing-microservices

Microservices Asynchronous Messaging
https://www.linkedin.com/learning/microservices-asynchronous-messaging

Software Architecture: Breaking a Monolith into Microservices
https://www.linkedin.com/learning/software-architecture-breaking-a-monolith-into-microservices

The Age of AI: Three disruptive SaaS Ideas for your AI business

Moises Marques da Silva — Thu, 10 Aug 2023 15:43:49 +0000

As the development of AIs becomes more and more prominent, it is necessary to update and think of new ways to generate revenue using this new technology.

Here are some disruptive ideas:

Psychotherapy: A portal where people can consult and get help for psychological treatment, taking advantage of generative AI resources and teaching it to serve people. Don't forget to keep the user in control of their information, an RSA + AES encryption would come in handy here.
Legal advice: There are several areas of law that can be explored in order to provide legal advice, clients can even use an APP on their smartphones that uses information such as location and voice recording to provide insight into their actions and understand what to avoid in order not to fall into a trap for example. Web3 concepts will also apply here, as nobody wants their data exposed.
Medical Report: Once you went to a clinic and did several tests, from a simple glucose index to an Electrocardiogram (ECG), you must present them to a doctor so that he can carry out the report and in case of a disease recommends a treatment or medicine, logically it is not possible to issue a medical report without a doctor "yet".

How about adding to the tool the possibility of doctors being able to validate the report generated by the AI?

Are we talking about the Uber of doctors?

Perhaps...

AI Developer - The future of software development

Moises Marques da Silva — Thu, 10 Aug 2023 13:37:47 +0000

As AI tools improve to aid software development, it is increasingly noticeable how language-specific semantics and syntax become obsolete, as well as libraries and frameworks. Tools like Github Copilot and Amazon's Code Whisperer translate intent from the developer and deliver the block or algorithm done, with few or no adjustments it is possible to have entire code pages working.

A possible collision and intersection of all languages and frameworks for a single development package is expected for the future, probably as machine-optimized as possible, since we will only interact with AI to develop our systems.

In DevOps we can already find tools like AWS Copilot, a tool capable of automatically creating deployment flows, based on the best configurations made by specialists over the years.

To say that a person has a better capacity to validate an algorithm than an AI is a contentious statement, it would take several years of study for someone to be able to beat a machine that already has all this information, however it is necessary to take some care so that the instructions are provided appropriately.

The AI Developer will be at the forefront of decision-making with the business that is intended to be served, he will have to develop skills much more similar to that of a salesperson than a technician, he will need to understand the business in order to deliver the best solution, he will practically configure the solution intended by the customer.

Obviously, this all sounds simple in words, but those who have already taken the AWS, Azure or GCP certifications know that there are countless possibilities to solve the same problem, and that from the point of view of business, budget and customer needs.

Conclusion:

In my view, highly technical people will continue to work behind AI tools for a long time, as there is a need to code them, until one day they can solve their own limitations and upgrade themselves.

The current developer, who is not working with AI development needs to start thinking more like an architect and salesperson and look to solve real world problems with the help of AI, as the software developer will not exist in a few years, but to do maintenance or migrating existing code bases. Why not create tools to migrate codes or systems?

Despite everything read above, the future looks promising, in all my career I met few people really dedicated to technology, many used it only as a business or a means to an end, from now on, I begin to realize that the market will need extremely technical people (scientists) while the rest will look more like business consultants to meet market needs.