
Every frontend application is part of a distributed system. We usually need to fetch and send information to a server connected to a database, and in a small and simple application, this works without major issues.

However, as our application and data consumption grow, we need to start thinking about strategies to improve the user experience and make pages faster, smoother, and more dynamic.

Caching is one of those strategies.

After all, why should we fetch information that was already retrieved a short time ago?

By using cache, we can avoid unnecessary requests to the server and the frequent display of loaders on the page.

However, this raises other questions, such as:

- How long can we trust that the cached data is up to date?
- How can we keep it synchronized with the database?
- When should we update it?

There are libraries that help us implement and handle these challenges, such as TanStack Query, SWR, RTK Query, and Apollo Client for GraphQL.

In this article, we will explore how to manage this lifecycle, from the first request to strategies such as invalidation, direct cache updates, optimistic updates, polling, and prefetching.

<Summary headings="h2" />

## Fetching data from the server

As an example for this article, we will use a simple page that fetches and displays a list of products.

With React, we can use the `useEffect` and `useState` hooks to implement it like this:

```jsx
import { useEffect, useState } from "react";

export function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchProducts().then((data) => {
      setProducts(data);
      setIsLoading(false);
    });
  }, []);

  if (isLoading) {
    return <p>Loading products...</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — $ {product.price}
        </li>
      ))}
    </ul>
  );
}
```

Although we need to handle several scenarios manually, such as loading, storage, and error handling, this code works for a simple page.

This is the flow:

```text
The page is mounted
        ↓
We fetch the data from an API — We display a loader
        ↓
We store the response in local state — We hide the loader
        ↓
We display the data in the interface
```

Now imagine that the user navigates to another page and then comes back. With this implementation, the user will go through the same flow again:

```text
The page is mounted
        ↓
We fetch the data from an API — We display a loader
        ↓
We store the response in local state — We hide the loader
        ↓
We display the data in the interface
```

We can improve the user experience by moving server data into an application-level cache using TanStack Query, previously known as React Query.

## Application-level cache

Using cache makes the interface feel faster because we can reuse the response from a previous request without needing to fetch it again and display a loader or a blank page.

First, let us install and configure the library in our application:

```bash
npm install @tanstack/react-query
```

```jsx
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { ReactNode } from "react";
import { ProductList } from "./ProductList";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ProductList />
    </QueryClientProvider>
  );
}
```

---

### Fetching data with useQuery

The list can now be loaded using `useQuery`:

```jsx
import { useQuery } from "@tanstack/react-query";

export function ProductList() {
  const {
    data: products,
    error,
    isPending,
    isFetching,
  } = useQuery({
    queryKey: ["products"], // Identifies the data inside the cache
    queryFn: fetchProducts, // Defines how the data will be fetched
  });

  if (isPending) {
    return <p>Loading products...</p>;
  }

  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <section>
      {isFetching && <p>Updating products...</p>}

      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} — $ {product.price}
          </li>
        ))}
      </ul>
    </section>
  );
}
```

The first time the component is rendered:

1. React Query looks for `["products"]` in the cache.
2. Because the data does not exist yet, it executes `fetchProducts`.
3. The component enters its initial loading state.
4. The API responds.
5. The data is stored in the cache.
6. Components subscribed to that query receive the result.

If the user leaves the page and returns later, React Query can immediately display the cached data.

Depending on the configuration, the library may also execute a new request in the background to check whether more recent information is available.

---

## The difference between fresh and stale data

The data stored in the React Query cache can be considered **fresh** or **stale**.

**Fresh** data is still considered recent enough.

While the data remains fresh, it does not need to be fetched again automatically.

**Stale** data can still be displayed, but React Query understands that it may need to be updated.

This distinction is important because it allows the application to display cached data immediately while updating it in the background.

---

## Controlling updates with staleTime

The `staleTime` option determines how long data remains **fresh** in the cache.

```jsx
const productsQuery = useQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
  staleTime: 30_000,
});
```

In this example, the products are considered fresh for _30 seconds_.

During this period, if the component is unmounted and mounted again, React Query can reuse the data without immediately executing another request.

After 30 seconds, the data becomes **stale**. It is not deleted; it simply becomes eligible for revalidation.

We could also use `staleTime: 5 * 60 * 1000` to keep the data fresh for five minutes.

For data that changes very rarely, we can use `staleTime: Infinity`.

In this case, the query never becomes stale automatically. An update will depend on manual invalidation or another explicit action.

A common mistake is to interpret `staleTime` as the amount of time before the data is removed.

It does not control removal. The `staleTime` option only controls when data stops being considered fresh.

The amount of time an unused query remains in the cache is controlled by `gcTime`:

```jsx
useQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
  staleTime: 30_000, // The data is considered fresh for 30 seconds
  gcTime: 5 * 60 * 1000, // The inactive query can be removed from the cache after 5 minutes without observers
});
```

---

## The difference between isPending, isLoading, and isFetching

The loading states `isPending`, `isLoading`, and `isFetching` should be used differently.

When the query is still in the `pending` state, we can display a loader using `isPending`:

```jsx
if (isPending) {
  return <ProductListSkeleton />;
}
```

Until version 4 of TanStack Query, `isLoading` represented the initial state of the query. In version 5, the previous `loading` status was renamed to `pending`, and the previous `isLoading` property was renamed to `isPending`.

`isLoading` still exists in version 5, but it is now a derived state based on `isPending && isFetching`. In practice, it indicates that the query is pending and that its first request is currently in progress.

The `isFetching` property indicates that a request is being executed, including when data is already available in the cache:

```jsx
return (
  <div>
    {isFetching && <small>Updating...</small>}
    <ProductTable products={products} />
  </div>
);
```

The conceptual difference is:

- `isPending` → The query does not have data available yet.
- `isLoading` → The query is pending and its first request is in progress.
- `isFetching` → A request is in progress, regardless of whether data already exists in the cache.

It is not recommended to replace the entire interface with a spinner whenever `isFetching` is `true`, because that would remove one of the main benefits of caching.

A better experience is to keep the data visible and display only a subtle indicator:

```jsx
export function ProductList() {
  const {
    data = [],
    isPending,
    isFetching,
    error,
  } = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
    staleTime: 30_000,
  });

  if (isPending) {
    return <ProductListSkeleton />;
  }

  if (error) {
    return <ErrorMessage message={error.message} />;
  }

  return (
    <section>
      <header>
        <h1>Products</h1>

        {isFetching && (
          <span aria-live="polite">
            Syncing…
          </span>
        )}
      </header>

      <ProductTable products={data} />
    </section>
  );
}
```

---

## Synchronizing cached data

Caching becomes more complex when the user modifies data.

Consider a mutation that changes the price of a product.

The mutation may successfully update the server, but the list stored in the `["products"]` cache will still contain the old data.

The frontend needs to decide how to synchronize the cache. There are three main strategies for doing this.

## Strategy 1: invalidate the query

The simplest and safest option is usually to invalidate the related queries inside the mutation's `onSuccess` callback.

```jsx
import {
  useMutation,
  useQueryClient,
} from "@tanstack/react-query";

export function useUpdateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateProduct,

    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["products"],
      });
    },
  });
}
```

When the mutation finishes, the server saves the change, React Query marks `["products"]` as **stale**, active queries can execute another fetch, and the interface receives the updated data from the server.

### Advantages

- Simple implementation
- Uses the server as the source of truth
- Reduces the risk of incorrectly building the new state
- Works well when several pieces of information may have been affected

### Disadvantages

- Creates an additional request
- The visual update may take slightly longer
- It may be excessive for very small changes

### When to use it

- Correctness is more important than avoiding an additional request
- The server performs additional calculations or business rules
- Several queries may have been affected
- Updating the cache manually would be complex

---

## Strategy 2: update the cache directly

When the API returns the updated product in the response to an update request, we can replace that product directly in the React Query cache:

```jsx
export function useUpdateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateProduct,

    onSuccess: (updatedProduct) => {
      // Update the individual product cache
      queryClient.setQueryData(
        ["product", updatedProduct.id],
        updatedProduct,
      );

      // Update the products list cache
      queryClient.setQueryData<Product[]>(
        ["products"],
        (products) =>
          products?.map((product) =>
            product.id === updatedProduct.id
              ? updatedProduct
              : product,
          ) ?? [],
      );
    },
  });
}
```

### Advantages

- Does not require an additional request
- The interface is updated immediately after the response
- Reuses the data returned by the API

### Disadvantages

- You need to know every cache entry that was affected
- Filters and pagination make the update more complex
- Different cache entries may become inconsistent

### When to use it

- The API response contains the complete updated resource
- The affected cache entries are known
- You can update the cache reliably

---

## Strategy 3: optimistic update

An optimistic update changes the interface before the server confirms the operation.

The application temporarily assumes that the mutation will succeed. If an error occurs during the request, the value is reverted.

```jsx
export function useUpdateProductPrice() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateProduct,

    onMutate: async (updatedProduct) => {
      await queryClient.cancelQueries({
        queryKey: ["products"],
      });

      const previousProducts =
        queryClient.getQueryData<Product[]>(["products"]);

      queryClient.setQueryData<Product[]>(
        ["products"],
        (currentProducts) =>
          currentProducts?.map((product) =>
            product.id === updatedProduct.id
              ? {
                  ...product,
                  price: updatedProduct.price,
                }
              : product,
          ) ?? [],
      );

      return {
        previousProducts,
      };
    },

    onError: (_error, _variables, context) => {
      if (context?.previousProducts) {
        queryClient.setQueryData(
          ["products"],
          context.previousProducts,
        );
      }
    },

    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["products"],
      });
    },
  });
}
```

### Advantages

- Provides an almost immediate visual response
- Improves frequent interactions
- Works well for simple and predictable actions, such as liking a post, completing a task, favoriting an item, or reorganizing a list

### Disadvantages

- Rollbacks are more complex
- Concurrent operations may create conflicts
- Business rules may prevent the change
- It is not ideal when failures are frequent or highly significant

### When to use it

- The interaction needs to feel instant
- The operation usually succeeds
- The rollback is simple
- The impact of a temporary failure is small

### When not to use it

- When handling payments
- For critical changes

---

## Other strategies: refetching, polling, and prefetching

React Query also provides other ways to execute requests and update the cache in useful scenarios, including manual refetching, polling, and prefetching.

### Manual refetching

The `useQuery` hook returns a method called `refetch`, which we can call to fetch the data and update the cache immediately.

```jsx
export function ProductList() {
  const {
    data = [],
    isPending,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
    staleTime: 30_000,
  });

  if (isPending) {
    return <ProductListSkeleton />;
  }

  return (
    <section>
      <button
        type="button"
        onClick={() => refetch()}
        disabled={isFetching}
      >
        {isFetching ? "Updating..." : "Update"}
      </button>

      <ProductTable products={data} />
    </section>
  );
}
```

---

### Polling

See the [documentation](https://tanstack.com/query/v5/docs/framework/react/guides/polling).

For information that needs to be updated frequently, we can execute requests at regular intervals:

```jsx
useQuery({
  queryKey: ["order-status", orderId],
  queryFn: () => fetchOrderStatus(orderId),
  refetchInterval: 10_000,
});
```

In this example, the order status is updated every ten seconds.

Polling is simple, but it has some costs:

- It increases the number of requests
- It may fetch data even when nothing has changed
- It consumes server resources
- It may be unsuitable at a large scale

Depending on the use case, WebSockets or Server-Sent Events may be more efficient.

---

### Prefetching

See the [documentation](https://tanstack.com/query/v4/docs/framework/react/guides/prefetching).

The cache can also be populated before the user opens a page.

```jsx
import { useQueryClient } from "@tanstack/react-query";

export function ProductLink({
  productId,
  children,
}: {
  productId: number;
  children: React.ReactNode;
}) {
  const queryClient = useQueryClient();

  function prefetchProduct() {
    queryClient.prefetchQuery({
      queryKey: ["product", productId],
      queryFn: () => fetchProduct(productId),
      staleTime: 30_000,
    });
  }

  return (
    <a
      href={`/products/${productId}`}
      onMouseEnter={prefetchProduct}
      onFocus={prefetchProduct}
    >
      {children}
    </a>
  );
}
```

When the user hovers over or focuses on the link, the application fetches the product details and stores the result in the cache. When the user opens the page, the data may already be available.

`Prefetching` improves perceived performance, but it should be used carefully to avoid loading information that will probably not be used.

---

## Conclusion

Frontend caching goes far beyond avoiding repeated requests. It helps balance different application requirements, such as:

- Performance
- Perceived speed
- Network usage
- Data freshness
- Consistency

React Query simplifies this process by providing features for controlling the lifecycle of server data, including caching, revalidation, invalidation, and synchronization after changes.

However, using cache does not mean keeping all information stored indefinitely. The longer data remains in the cache, the greater the risk of displaying outdated information.

Caching also has costs:

- Memory consumption
- Invalidation complexity
- Possible inconsistencies between the client and the server
- Greater debugging difficulty
- The need to define update strategies

For this reason, cache configuration should not be treated only as a technical decision. It should also consider the needs of the product and the impact that outdated information may have on the user.

The greater the risk of displaying incorrect information, the shorter the period during which the application should rely exclusively on cached data.

The best strategy is not to store everything for as long as possible, but to consciously answer the following question:

**How long can this data remain outdated without harming the user or the application?**

React Query in Practice: Caching, Synchronization and Performance


It's common to see developers trying to solve performance issues by adding `useMemo`, `useCallback`, and `memo` to almost every component.

The problem is that, in most React applications, these hooks are not the primary source of performance improvements.

Before optimizing components, there are usually much larger bottlenecks, such as oversized bundles, heavy images, unnecessary re-renders, and repeated API requests.

Pages that take too long to load, interfaces that freeze during user interactions, and unnecessary re-renders can frustrate users and even reduce a product's conversion rate.

Additionally, performance also impacts metrics such as **Core Web Vitals**, which Google uses as a ranking factor in search results.

[Read more about Core Web Vitals here.](https://www.sergiojunior.com.br/en/web-core-vitals-the-definitive-guide-for-web-developers)

In practice, **performance optimization is a process**, not just a collection of hooks.

In this article, we'll explore the main techniques for improving the performance of React applications, understand when each optimization makes sense, and, most importantly, learn how to identify bottlenecks before writing any optimization code.

<Summary />

---

## Where Should You Start Optimizing?

One of the most common questions is knowing what to optimize. In medium to large applications, it's common to think about starting with the largest component, the biggest page, or the one with the most API requests. However, all of these only reflect the application's structure, not necessarily its biggest bottlenecks.

Several tools can help identify where these bottlenecks are and what can be improved, including:

- Chrome DevTools Performance
- React DevTools Profiler
- Lighthouse
- Web Vitals Extension
- Bundle Analyzer

These tools help us understand which components are rendering most frequently, how long each render takes, and what the page's LCP time is.

With this information, we can focus on reducing the bundle size or improving the Core Web Vitals LCP metric.

---

## Reduce the Final Bundle Size

In a Single Page Application (SPA), all JavaScript, CSS, and HTML are transformed and bundled into the final output—a `.js` file that contains all the application's logic and must be executed by the browser.

The larger the final bundle, the heavier it becomes.

We can use tools such as [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) or [Vite Bundle Analyzer](https://www.npmjs.com/package/vite-bundle-analyzer) to analyze the size of the final bundle, its largest dependencies, assets, and components.

![Bundle Analizer](./../images/webpack.png)

In many cases, reducing the bundle size provides a much greater performance improvement than optimizing component renders.

## Lazy Load Components

We can load heavy and/or non-critical components only when they're actually needed, such as modals, charts, maps, or dashboards, using React's `lazy`.

```jsx
import { lazy, Suspense } from "react";

const Modal = lazy(() => import("./Modal"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Modal />
    </Suspense>
  );
}
```

This way, the JavaScript for `Modal` is loaded only when the user clicks the button that opens it.

---

## Code Splitting

Another benefit of Lazy Loading is splitting the final bundle into smaller files that are loaded on demand.

Frameworks and routing libraries such as [React Router](https://reactrouter.com/) allow each route to be loaded independently.

```jsx
const Settings = lazy(() => import("./pages/Settings"));
```

This way, users only download the code required for the page they're currently visiting.

---

## Remove Unnecessary Dependencies

Many applications import large libraries while only using a small portion of them.

For example, instead of importing the entire library:

```jsx
import _ from "lodash"; // 71.5k imported

// _.debounce() Only debounce is used
```

Prefer importing only the function you need.

```jsx
import debounce from "lodash/debounce"; // 3.4k imported
```

Or, whenever possible, use native JavaScript APIs.

VS Code extensions such as [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) display the size of imported libraries.

![Import Cost](./../images/import-cost.png)

---

## Avoid Unnecessary Re-renders

Whenever a state or prop changes, React re-renders the affected components. In most cases, this is the expected behavior.

The problem arises when components re-render repeatedly even though their visual output hasn't changed. In large applications, this can have a significant performance cost.

React provides several APIs and hooks that help mitigate this issue, such as `memo`, `useMemo`, and `useCallback`.

---

### React.memo

React's `memo` API prevents a component from re-rendering if its props haven't changed.

```jsx
import { memo } from "react";

function UserCard(props) {
  return <p>{props.name}</p>;
}

export const MemorizedUserCard = memo(UserCard);
```

Without `memo`, the component re-renders every time its parent re-renders. With it, React compares the props and reuses the previous rendered result if nothing has changed.

This strategy is particularly useful for:

- Large components;
- Components that are reused multiple times;
- Components that receive stable props.

---

### React.useMemo

The `React.useMemo` hook caches the result of an expensive computation to avoid recalculating it on every render. The function is only executed again when one of its dependencies changes.

```jsx
const sortedUsers = useMemo(() => {
  return [...users].sort(compareUsers);
}, [users]);
```

Without it, the sorting operation would run on every render.

**However**, avoid using `React.useMemo` for simple operations, as its own overhead may outweigh the benefits, as shown below.

```jsx
const isAdmin = useMemo(() => role === "admin", [role]); // useMemo is unnecessary here.
```

---

### React.useCallback

Functions are recreated on every render, and in most cases, this isn't a problem. However, when a function is passed to child components via props, a new function reference may trigger unnecessary re-renders.

```jsx
const handleClick = useCallback((user) => {
  saveUser(user);
}, [saveUser]);

<ChildComponent handleClick={handleClick} />
```

`useCallback` preserves the same function reference as long as its dependencies don't change.

Like `useMemo`, `useCallback` should only be used when it provides a measurable performance benefit.

---

### React Compiler

To reduce the excessive use of `useMemo`, `useCallback`, and `memo`, recent versions of React introduced the [React Compiler](https://react.dev/learn/react-compiler/introduction).

In practice, the compiler can automatically identify and apply optimizations during compilation, reducing the need for manual memoization.

Although it's still being adopted across the ecosystem, it's expected to significantly simplify React performance optimization in the future.

---

## Use Stable Keys

When rendering lists with `map`, React uses the `key` prop to identify each element between renders. This allows React's reconciliation algorithm to determine which items were added, removed, or updated, avoiding unnecessary re-creation of the entire list.

A common mistake is using the array index as the `key`:

```jsx
{users.map((user, index) => (
  <UserCard key={index} user={user} />
))}
```

Although this works for static lists, it can lead to incorrect rendering when items are inserted, removed, or reordered. It can also cause React to reuse components incorrectly.

Whenever possible, use a unique and stable identifier, such as the object's ID:

```jsx
{users.map((user) => (
  <UserCard key={user.id} user={user} />
))}
```

With a stable `key`, React can reuse existing components more efficiently, reducing the amount of work performed during reconciliation while correctly preserving each item's state.

---

## Virtualize Large Lists

Rendering hundreds or thousands of elements simultaneously can significantly impact performance. One solution is to use list virtualization.

Libraries such as [react-window](https://www.npmjs.com/package/react-window) and [TanStack Virtual](https://tanstack.com/virtual/latest) render only the elements currently visible on the screen—typically around 20 or 30—instead of rendering thousands.

Here's an example using TanStack Virtual.

<VirtualizedList />

---

## Optimize Images

In many applications, images account for the largest amount of data downloaded by the browser.

Some best practices include:

- Using modern formats such as WebP or AVIF.
- Compressing and resizing large images.
- Serving different image sizes based on the user's device.
- Using a CDN for static assets.
- Lazy loading images (loading them only when they enter the viewport).

Example:

```html
<img
  src="hero.webp"
  loading="lazy"
  alt="Hero image"
/>
```

---

## Cache API Requests

Making repeated API requests increases response times and network usage, even though the data often doesn't change frequently.

Libraries such as **React Query** and **SWR** provide features like:

- Automatic caching.
- Request deduplication.
- Background updates.
- Data synchronization.
- Automatic request cancellation.

Example using React Query:

```jsx
const { data } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
  staleTime: 1000 * 60 * 5, // Data is considered fresh for 5 minutes (it won't be refetched during this period)
  gcTime: 1000 * 60 * 10, // Unused cached data remains in memory for 10 minutes
});
```

---

## Cancel Outdated Requests (Debounce & AbortController)

A good practice is to add debounce to functions that interact with an API multiple times in response to user actions.

A classic example is a search input. Instead of sending a request on every keystroke, we can wait a few milliseconds for the user to finish typing before sending the request to the server.

Besides making the interface more responsive, this also reduces the number of requests processed by the API.

You can implement this using `setTimeout` with `clearTimeout` or the [`debounce`](https://lodash.com/docs/4.18.1#debounce) function from Lodash.

Another good practice is to use **AbortController** to cancel requests that are no longer needed. By using `AbortController`, only the most recent request remains active, preventing race conditions and avoiding outdated data from being rendered in the UI.

```jsx
import { useEffect, useRef, useState, startTransition } from "react";

export default function Search() {
  const [search, setSearch] = useState("");
  const [users, setUsers] = useState([]);

  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(async () => {
      const response = await fetch(
        `/api/users?search=${encodeURIComponent(search)}`,
        {
          signal: controller.signal,
        }
      );

      const data = await response.json();

      startTransition(() => {
        setUsers(data);
      });
    }, 500);

    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      controller.abort();
    };
  }, [search]);

  return (
    <>
      <input
        type="text"
        placeholder="Search users..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}
```

---

## Mark State Updates as Non-Urgent

In the previous search example, updating the input value should happen immediately to keep typing smooth, while rendering the list of users is a more expensive operation that can wait.

In these situations, React provides the `startTransition` API, which allows you to mark state updates as non-urgent. This enables React to prioritize critical updates, such as user interactions, while scheduling less important updates to run when resources are available.

The result is a more responsive interface, especially in applications with large lists, complex filters, or expensive rendering.

[Read more about the `startTransition` hook here.](https://www.sergiojunior.com.br/en/react-hook-use-transition)

---

## Keep State Close to Where It's Used

Another common mistake is storing state too high in the component tree while only using it in child components through prop drilling.

Consider the following structure:

```
App
├── Header
├── Sidebar
└── Dashboard
```

If a state stored in `App` is updated, the entire component tree may re-render.

Whenever possible, keep state as close as possible to the components that actually need it.

### Global State

Global state solutions such as Context, Redux, and Zustand are excellent for storing, organizing, and sharing data across an application. However, the same principle applies: only subscribe to the state you actually use to avoid unnecessary re-renders.

---

## Use the React Profiler

The [React DevTools](https://react.dev/learn/react-developer-tools) browser extension includes a tool called **Profiler**, which can be used in React applications to visualize:

- Which components rendered.
- How long each render took.
- How many times they rendered.
- Why they rendered.

![React Profiler](./../images/ReactProfiler.gif)

Instead of optimizing through trial and error, use the Profiler to make data-driven decisions.

---

## Consider Server-Side Rendering (SSR)

Not every performance issue should be solved on the client side. Modern frameworks such as [Next.js](https://nextjs.org/), [Remix](https://remix.run/), and [TanStack Start](https://tanstack.com/start/latest) allow you to fetch data and render pages on the server before sending them to the browser.

This improves the LCP (Largest Contentful Paint) metric, reduces the amount of JavaScript executed in the browser, and delivers pages instantly to users, avoiding loading states and providing a better user experience.

---

## Conclusion

React already provides excellent performance out of the box. However, building truly fast applications requires understanding how the rendering process works and knowing how to identify the real bottlenecks.

Before adding `useMemo`, `useCallback`, or `memo`, measure your application using tools such as React Profiler and Lighthouse. In many cases, reducing the bundle size, optimizing images, caching API requests, and avoiding unnecessary re-renders provide much greater improvements than adding memoization to every component.

Improving performance is a continuous process. New features, dependencies, and components can introduce regressions over time, so a good optimization workflow consists of:

- Measure.
- Identify the bottleneck.
- Apply the appropriate optimization.
- Measure again.

This process ensures that every optimization delivers real results. Ultimately, performance isn't about adding more hooks—it's about making the browser do less work.

How to Optimize React Application Performance


JavaScript is one of the most widely used programming languages in the world. Its simple syntax makes it relatively easy to get started, but beneath that simplicity lie many concepts and behaviors that aren't always intuitive.

Topics such as **hoisting**, **closures**, **the event loop**, **this**, **type coercion**, **the prototype chain**, and **arrow functions** often confuse even experienced developers. 

These topics also appear frequently in technical interviews, especially for mid-level and senior positions.

In this article, I've compiled **30 of the most common JavaScript interview questions**, along with clear explanations, practical examples, and answers to help you review the most important concepts and prepare for your next technical interview.

Don't forget to take the [quiz](#test-your-javascript-knowledge) at the end of the article to test your understanding.

<Summary />

## 1. What is the difference between `var`, `let`, and `const`?


| Feature | var | let | const |
|---------|-----|-----|------|
| Scope | Function | Block | Block |
| Hoisted | Yes | Yes | Yes |
| Initial Value | Undefined | None (Uninitialized) | None (Uninitialized) |
| Temporal Dead Zone | No | Yes | Yes |
| Access Before Line | Allowed | Throws ReferenceError | Throws ReferenceError |
| Can redeclare | ✅ | ❌ | ❌ |
| Can reassign | ✅ | ✅ | ❌ |




```js
if (true) {
  var a = 1;
  let b = 2;
  const c = 3;
}

console.log(a); // 1
console.log(b); // ReferenceError
console.log(c); // ReferenceError
```

---

## 2. What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

```jsx
console.log(a);
var a = 5;
```

Equivalent to:

```js
var a;

console.log(a); // undefined

a = 5;
```

With `let`:

```js
console.log(a);

let a = 5;
```

Throws:

```
ReferenceError
```

because of the **Temporal Dead Zone (TDZ)**.

---

## 3. What is the Temporal Dead Zone?

The period between entering a scope and declaring a `let` or `const` variable.

```js
{
    console.log(name);

    let name = "John";
}
```

Output:

```
ReferenceError
```

---

## 4. Explain `this`

`this` depends on **how a function is called**, not where it is defined (except arrow functions).

### Regular method

```js
const person = {
    name: "John",

    say() {
        console.log(this.name);
    }
};

person.say();
```

Output

```
John
```

### Detached function

```js
const fn = person.say;

fn();
```

Output (strict mode)

```
undefined
```

### Arrow function

```js
const person = {
    name: "John",

    say: () => {
        console.log(this.name);
    }
};

person.say();
```

Output

```
undefined
```

Arrow functions don't create their own `this`.

---

## 5. Arrow Functions vs Regular Functions

| Feature | Regular Function | Arrow Function |
|----------|------------------|----------------|
| Own `this` | ✅ Yes | ❌ No (inherits from outer scope) |
| Own `arguments` | ✅ Yes | ❌ No |
| Can be used as constructor (`new`) | ✅ Yes | ❌ No |
| Has `prototype` | ✅ Yes | ❌ No |
| Best for object methods | ✅ Yes | ⚠️ Usually No |
| Best for callbacks | ✅ Yes | ✅ Yes |

Arrow functions inherit `this` from the surrounding (lexical) scope instead of creating their own.

## 6. What is a Closure?

A closure is created when an inner function remembers variables from its outer (lexical) scope, even after the outer function has finished executing.

Closures are commonly used for:

- Private variables
- Data encapsulation
- Event handlers
- Callbacks
- React Hooks

```js
function counter() {
    let count = 0;

    return function () {
        count++;
        return count;
    };
}

const increment = counter();

increment(); // 1
increment(); // 2
increment(); // 3
```

Even though `counter()` has already finished executing, the inner function still has access to the `count` variable because of the closure.

---

## 7. Explain the Event Loop

JavaScript is **single-threaded**, meaning it executes one piece of JavaScript code at a time.

To handle asynchronous operations, JavaScript relies on the **Event Loop**.

The execution flow is:

```
Call Stack
      ↓
Web APIs (Browser / Node.js)
      ↓
Microtask Queue
      ↓
Macrotask Queue
```

### Call Stack

Where synchronous code executes.

```js
console.log("A");
console.log("B");
```

Runs immediately.

---

### Web APIs

Operations like:

- `setTimeout`
- `fetch`
- DOM events

are handled outside the Call Stack by the browser or Node.js runtime.

---

### Microtask Queue

Contains:

- Promise callbacks (`.then()`)
- `await`
- `queueMicrotask()`

Microtasks always have **higher priority** than macrotasks.

---

### Macrotask Queue

Contains:

- `setTimeout`
- `setInterval`
- `setImmediate` (Node.js)
- MessageChannel

---

Example:

```js
console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

console.log(4);
```

Output

```
1
4
3
2
```

Execution:

1. `console.log(1)`
2. `setTimeout` is sent to the Web APIs
3. Promise callback goes to the Microtask Queue
4. `console.log(4)`
5. Call Stack becomes empty
6. Execute all Microtasks
7. Execute the first Macrotask

This is why Promise callbacks always execute before `setTimeout`, even if the timeout is `0`.

---

## 8. What's the difference between `==` and `===`?

`==` performs type coercion.

```js
1 == "1"
```

Output

```
true
```

`===` compares value and type.

```js
1 === "1"
```

Output

```
false
```

---

## 9. Explain Type Coercion

**Type coercion** is the process by which JavaScript automatically converts a value from one type to another when evaluating an expression.

This conversion happens implicitly, and the rules depend on the operator being used.

For example, the subtraction operator (`-`) expects numbers. If it receives strings that represent numeric values, it automatically converts them to numbers.

```js
"5" - 1
```

Output:

```js
4
```

JavaScript converts `"5"` to the number `5` before performing the subtraction.

The addition operator (`+`) behaves differently. If one of the operands is a string, it performs string concatenation.

```js
"5" + 1
```

Output:

```js
"51"
```

In this case, the number `1` is converted to a string and concatenated with `"5"`.

Another common example:

```js
true + 1
```

Output:

```js
2
```

The value `true` is converted to `1`.

Similarly:

```js
false + 1
```

Output:

```js
1
```

Because `false` is converted to `0`.

For this reason, it's generally recommended to use `===` instead of `==`, since `===` compares both value and type without performing automatic type coercion.

---

## 10. What are Truthy and Falsy values?

Whenever JavaScript evaluates a condition (`if`, `while`, logical operators, etc.), it automatically converts the value to a boolean.

Values that become `false` are called **Falsy**.

Everything else is **Truthy**.

Falsy values:

```js
false
0
-0
0n
""
null
undefined
NaN
```

Everything else is Truthy.

Examples:

```js
if ("Hello") {
    console.log("Runs");
}
```

Output

```
Runs
```

Because non-empty strings are truthy.

---

```js
if ([]) {
    console.log("Runs");
}
```

Output

```
Runs
```

Even an empty array is truthy.

---

```js
if ({}) {
    console.log("Runs");
}
```

Output

```
Runs
```

An empty object is also truthy.

This is a common interview question because many developers expect empty arrays or objects to be falsy.

---

## 11. What is the Prototype Chain?

JavaScript uses **prototypal inheritance**.

When you access a property or method on an object, JavaScript first looks on the object itself.

If it doesn't exist, it looks on the object's prototype.

If it still doesn't find it, it continues walking up the prototype chain until it reaches `null`.

```js
const obj = {};

obj.toString();
```

Even though `obj` doesn't define `toString()`, JavaScript finds it in:

```
Object.prototype
```

The lookup process looks like this:

```
obj
  ↓
Object.prototype
  ↓
null
```


This mechanism allows objects to inherit methods without copying them into every object.

---

## 12. Difference between `null` and `undefined`

`undefined`

```js
let value;

console.log(value);
```

Output

```
undefined
```

`null`

```js
const user = {
    age: null
};
```

Means: Intentionally empty.


---

## 13. Why does `typeof null` return `"object"`?

```js
typeof null;
```

Output

```
"object"
```

This is a historical bug kept for backward compatibility.

---

## 14. Pass by Value vs Pass by Reference

Primitive values (`number`, `string`, `boolean`, `null`, `undefined`, `symbol`, `bigint`) are passed **by value**.

```js
let a = 5;
let b = a;

b = 10;

console.log(a);
```

Output

```
5
```

Changing `b` doesn't affect `a` because they store independent values.

---

Objects and arrays behave differently.

```js
const a = {
    x: 1
};

const b = a;

b.x = 2;

console.log(a.x);
```

Output

```
2
```

Both variables point to the same object in memory.

Technically, JavaScript is **always pass-by-value**.

For objects, the value being copied is the object's **reference**, so both variables reference the same object.

This distinction is a common senior-level interview question.

---

## 15. Can you modify a `const` object?

Yes.

```js
const person = {
    age: 20
};

person.age = 30;
```

Works.

But:

```js
person = {};
```

Throws

```
TypeError
```

`const` prevents reassignment, not mutation.

---

## 16. Explain Destructuring

Object destructuring:

```js
const person = {
    name: "John",
    age: 30
};

const { name } = person;
```

Array destructuring:

```js
const [a, b] = [1, 2];
```

---

## 17. Spread vs Rest Operator

Spread:

```js
const arr = [1, 2];

const copy = [...arr];
```

Rest:

```js
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}
```

---

## 18. Debounce vs Throttle

### Debounce

Executes only after the user stops triggering an event.

Common use:

- Search input
- Autocomplete

### Throttle

Executes at most once every X milliseconds.

Common use:

- Scroll
- Resize
- Mouse move

---

## 19. What is a Promise?

A Promise represents a value that will be available in the future.

States:

- Pending
- Fulfilled
- Rejected

---

## 20. Promise vs Async/Await

Promise:

```js
fetchData()
    .then(data => console.log(data))
    .catch(console.error);
```

Async/Await:

```js
try {
    const data = await fetchData();
} catch (error) {
    console.error(error);
}
```

---

## 21. `map()` vs `forEach()`

### map()

- Returns a new array.
- Used for transformations.

```js
const doubled = numbers.map(n => n * 2);
```

### forEach()

- Returns `undefined`.
- Used for side effects.

---

## 22. `filter()` vs `find()`

```js
filter()
```

Returns all matching elements.

```js
find()
```

Returns only the first matching element.

---

## 23. Shallow Copy vs Deep Copy

Shallow copy:

```js
const copy = {
    ...obj
};
```

Nested objects are still shared.

Deep copy:

```js
const copy = structuredClone(obj);
```

---

## 24. Optional Chaining (`?.`)

```js
user?.address?.city
```

Avoids:

```
Cannot read property...
```

---

## 25. Nullish Coalescing (`??`)

```js
const value = input ?? "default";
```

Only replaces:

- `null`
- `undefined`

Unlike:

```js
input || "default"
```

Which also replaces:

- `0`
- `false`
- `""`

---

## 26. What is Lexical Scope?

Variables are resolved based on where functions are **defined**, not where they are called.

```js
const name = "global";

function outer() {
    const name = "local";

    function inner() {
        console.log(name);
    }

    return inner;
}

outer()();
```

Output

```
local
```

---

## 27. What is an IIFE?

Immediately Invoked Function Expression.

```js
(function () {
    console.log("Runs immediately");
})();
```

Before `let` and `const`, IIFEs were commonly used to create private scope.

---

## 28. Difference between `call`, `apply`, and `bind`

```js
function greet() {
    console.log(this.name);
}

const person = {
    name: "Alice"
};
```

### call

```js
greet.call(person);
```

Invokes immediately.

### apply

```js
Math.max.apply(null, [1, 2, 3]);
```

Invokes immediately using an array of arguments.

### bind

```js
const bound = greet.bind(person);

bound();
```

Returns a new function.

---

## 29. Why is `[] == false` true?

```js
[] == false;
```

Output

```
true
```

Reason:

```
[] -> ""
"" -> 0
false -> 0

0 == 0
```

Loose equality performs type coercion.

---

## 30. Function Declaration vs Function Expression

Function declaration:

```js
sayHello();

function sayHello() {
    console.log("Hello");
}
```

Works because the function is hoisted.

Function expression:

```js
sayHello();

const sayHello = function () {};
```

Throws:

```
ReferenceError
```

because `sayHello` is in the Temporal Dead Zone until its declaration executes.

---

## Test Your Javascript Knowledge

<Quiz />


30 JavaScript Interview Questions Every Developer Should Know


In today's web development landscape, user experience (UX) and performance are no longer just competitive advantages—they determine the success of a digital product. A fast and stable website retains more users, converts better, and earns valuable ranking signals from search engines. This is where **Core Web Vitals** come in.

## Summary

- [What are Core Web Vitals?](#what-are-core-web-vitals?)
- [The Main Metrics](#the-main-metrics)
- [1. LCP (Largest Contentful Paint) — Loading Performance](#1.-lcp-(largest-contentful-paint)-—-loading-performance)
- [Tips to Improve LCP](#tips-to-improve-lcp:)
- [2. INP (Interaction to Next Paint) — Responsiveness in Interaction](#2.-inp-(interaction-to-next-paint)-—-responsiveness-in-interaction)  
- [Tips to Improve INP](#tips-to-improve-inp:)
- [3. CLS (Cumulative Layout Shift) — Visual Stability](#3.-cls-(cumulative-layout-shift)-—-visual-stability)
- [Tips to Improve CLS](#tips-to-improve-cls:)
- [How to Measure Core Web Vitals](#how-to-measure-core-web-vitals)
- [Core Web Vitals and Modern Frameworks](#core-web-vitals-and-modern-frameworks)
- [Benefits of Optimization](#benefits-of-optimization)
- [Conclusion](#conclusion) 

## What are Core Web Vitals?

The **Core Web Vitals** is a Google initiative that establishes a set of unified metrics to evaluate the quality of the user experience on the web.

Instead of focusing only on abstract technical metrics, the emphasis is on _human perception_: how fast the page loads visually (LCP), how fast it responds to interactions (INP), and how stable it remains while rendering (CLS).

## The Main Metrics

Currently, the Core Web Vitals is composed of three fundamental pillars:

### 1. LCP (Largest Contentful Paint) — Loading Performance

The LCP measures the time it takes for the largest content element visible in the viewport to be fully rendered, typically a featured image, a banner, or a large text block, from the moment the page starts loading.

![LCP Web Vitals](./../images/lcp.svg)

- **Good:** Up to 2.5 seconds.
- **Needs Improvement:** Between 2.5 and 4.0 seconds.
- **Poor:** Above 4.0 seconds.

Remembering the steps of the browser to render a page:

**1** - The browser receives the HTML of the page.

**2** - It builds the DOM tree (Document Object Model).

**3** - It downloads the CSS and JS files referenced in the HTML.

**4** - It builds the CSSOM tree (CSS Object Model).

**5** - Finally, it combines the DOM and CSSOM to render the page on screen.

As you can see, the browser has certain work to do until it renders the page, and all of this affects the loading time and consequently the LCP.

### Tips to Improve LCP:

- **Image Optimization:** Use modern formats (WebP, AVIF), implement `srcset` for responsive sizes, reduce very large images, and use compression tools.
- **Resource Prioritization:** Add the `fetchpriority="high"` attribute to your main image (LCP) and use `<link rel="preload">` for critical files. Avoid lazy-loading the featured image.
- **Reduce TTFB (Time to First Byte):** Optimize server response time, implement effective caching strategies, and use a CDN (Content Delivery Network).
- **Minify Code:** Reduce the size of CSS and JS files to speed up download times.
- **Avoid Render Blocking:** Scripts and styles that block rendering should be loaded asynchronously or deferred.
- **Use Optimized Fonts:** Prefer system fonts or use techniques like `font-display: swap` to avoid render blocking.


### 2. INP (Interaction to Next Paint) — Responsiveness in Interaction

The INP officially replaced the FID (First Input Delay) in March 2024. While the FID only measured the delay of the first click, the INP evaluates the latency of _all_ user interactions (clicks, touches, and keypresses) throughout the entire page visit, identifying how long it takes for the browser to update the screen (the next frame) after the action.

![INP Web Vitals](./../images/inp.svg)

- **Good:** Up to 200 milliseconds.
- **Needs Improvement:** Between 200 and 500 milliseconds.
- **Poor:** Above 500 milliseconds.

### Tips to Improve INP:
- **Break Long Tasks (Long Tasks):** Any JavaScript execution that exceeds 50ms blocks the main thread. Use patterns like `setTimeout` or `requestIdleCallback` to break heavy executions.
- **Optimize JavaScript Execution:** Remove unused code (tree-shaking), defer non-essential scripts with `defer` or `async`, and re-evaluate the weight of third-party libraries.
- **Avoid Layout Thrashing:** Avoid reading and writing style properties intermittently that force the browser to recalculate the layout multiple times in the same task.
- **Use Web Workers:** For heavy tasks, consider moving execution to a Web Worker, freeing the main thread to respond quickly to user interactions.
- **Prefer CSS for Animations:** Whenever possible, use CSS-based animations, which are more efficient and less likely to block the main thread.

### 3. CLS (Cumulative Layout Shift) — Visual Stability

Do you remember when you were about to click a button and, suddenly, an ad or image loaded, pushed the content down, and you ended up clicking the wrong place?

![CLS Web Vitals](./../images/cls-gif.gif)
<figcaption>Bad example of CLS</figcaption>


 The CLS measures exactly this. It calculates the total sum of all unexpected layout shifts that occur during the page's lifetime.

![CLS Web Vitals](./../images/cls.svg)

- **Good:** Less than 0.1.
- **Needs Improvement:** Between 0.1 and 0.25.
- **Poor:** Above 0.25.

### Tips to Improve CLS:
- **Explicit Dimensions:** Always define width and height attributes (`width` and `height`) in `<img>`, `<video>` and `<iframe>` tags, or use the CSS property `aspect-ratio`.
- **Reserved Space for Dynamic Elements:** Reserve styled space (like loading skeletons or min-height) for ad banners, modals or asynchronously injected content.
- **Safe Animations:** Prefer properties like `transform` (for translation and scaling) over animating layout properties like `top`, `left`, `width` or `height`.
- **Avoid Asynchronous Content Injection:** Whenever possible, load ads, images and other content synchronously or reserve space for them before they are loaded.

---

## How to Measure Core Web Vitals

To optimize, we first need to measure. The main tools for measurement are:

- **PageSpeed Insights:** Combines field data (CrUX) and lab data (Lighthouse) into a single detailed report. Link: [PageSpeed Insights](https://pagespeed.web.dev/)
- **Chrome DevTools (Performance and Lighthouse tabs):** Ideal for inspecting bottlenecks locally while you develop.
- **Google Search Console:** Provides a consolidated report of Core Web Vitals for all indexed pages of your site, grouping issues by metric. Link: [Search Console](https://search.google.com/search-console)
- **Library Web-Vitals (JS):** A lightweight library you can install directly in your project to capture user metrics and send them to Analytics tools (Google Analytics, Vercel Analytics, Datadog, etc.). Link: [web-vitals package](https://www.npmjs.com/package/web-vitals)

---

## Core Web Vitals and Modern Frameworks

As we've seen, the Core Web Vitals metrics are essential for user experience and Google ranking, but how do they apply to modern frameworks like React, Vue, and Angular?

By default, these libraries render page content dynamically on the client side with JavaScript, which can negatively impact LCP and CLS.

To mitigate this, it is recommended to use techniques of Server-Side Rendering (SSR) or Static Site Generation (SSG) to deliver pre-rendered HTML to the browser, reducing load times, the size of required JavaScript, and avoiding unexpected layout shifts.

Tools like [Next.js](https://nextjs.org/), [Remix](https://remix.run/), [Astro](https://astro.build/) and [Nuxt](https://nuxt.com/) offer native support for SSR and SSG, allowing you to deliver pages optimized for Core Web Vitals with minimal additional effort.

---

## Benefits of Optimization

Investing time in improving Core Web Vitals brings clear returns across different areas:

- **SEO Improvement:** Pages that meet the recommended limits of Core Web Vitals gain an advantage in Google's ranking for both mobile and desktop searches.
- **Increase in Conversions:** Lower loading times and greater stability create a smooth shopping or navigation experience, reducing bounce rates.
- **Cost Efficiency:** Optimized code and compressed images reduce network traffic, lowering costs with servers and CDN.

---

## Conclusion

Mastering the Core Web Vitals is about understanding that web software engineering goes far beyond just making the code work. It's about how that code impacts the experience of those on the other end of the screen.

By aligning good front-end development practices with the advanced features provided by frameworks like Next.js, Remix and Astro, we can deliver robust applications that are, at the same time, extremely fast and pleasant to use.

Core Web Vitals: The Definitive Guide for Web Developers


### Understanding Big O Notation

Recently, I was practicing some exercises on [LeetCode](https://leetcode.com/) and one detail in the instructions caught my attention: _"The solution must have a time complexity of O(1), O(n), O(log n) to be considered correct"_.

In our day-to-day work, we are usually only concerned with solving a problem but rarely think about the complexity and performance of the algorithm.

A loop over an array takes milliseconds to execute, which is almost imperceptible. But as we build large applications with huge amounts of data, this can become a performance bottleneck.

That's why we use Big O Notation to measure the performance of an algorithm.

<figure>

![Big O Graph](./../images/big-o-graph.jpeg)

<figcaption>Big O Graph</figcaption>
</figure>

Big O Notation is, essentially, the tool we use to measure the performance of an algorithm. It doesn't measure time in seconds, but rather the growth in the number of operations as the amount of input data _(n)_ increases.

In short, it answers the question: _"How much slower will my code become if my user base or data volume grows 1000x?"_.

Ideally, we want to keep our code at _O(1)_ (Index Lookup), _O(log n)_ (Binary Search), or _O(n)_ (Linear Search), in that order. Let's understand each one of them.

### 1. O(1) Notation - Constant Complexity

It doesn't matter whether your array has 1 item or 1 million items, the execution time will be exactly the same, _O(1)_.

A classic example is accessing an element directly by its index in an array (_O(1)_) or looking up a key in an object (_O(1)_).

```js
function getFirstItem(arr) {
  return arr[0]; // Always makes only 1 operation
}

const fruits = ['apple', 'banana', 'orange', 'strawberry'];
console.log(getFirstItem(fruits)); // 'apple'
```

### 2. O(log n) Notation - Logarithmic Complexity

Logarithmic complexity may sound scary because of its name, but the logic behind it is beautiful: at every step, the algorithm cuts the problem in half. The perfect example here is Binary Search.

Imagine you're looking for a word in a physical dictionary; you don't read page by page, you open it in the middle and discard the half that doesn't matter. The same applies to binary search.

_Important note: for binary search to work, the list must be sorted._

```js
function binarySearch(arr, target) {
  let start = 0;
  let end = arr.length - 1;

  while (start <= end) {
    let middle = Math.floor((start + end) / 2);

    if (arr[middle] === target) return middle; // Found!

    if (arr[middle] < target) {
      start = middle + 1; // Discard the left half
    } else {
      end = middle - 1; // Discard the right half
    }
  }
  return -1; // Not found
}

const sortedNumbers = [10, 20, 30, 40, 50, 60, 70, 80];
console.log(binarySearch(sortedNumbers, 60)); // Index 5
```

With each loop, it gets closer to the target, which makes the algorithm traverse fewer items. That's why its complexity is _O(log n)_.

### 3. O(n) Notation - Linear Complexity

Here, the execution time grows proportionally to the input data. If you have 10 items, you perform 10 operations. If you have 10,000 items, you perform 10,000 operations.

The most common case in our day-to-day work is the good old loop (_for_, _forEach_, _map_, _find_) iterating through an array to search for or transform data.

```js
function containsItem(arr, target) {
  return arr.find(item => item === target);
}

const numbers = [1, 4, 6, 8, 10];
console.log(containsItem(numbers, 6)); // Runs proportionally to the size of the array
```

### 4. O(n log n) Notation - Linearithmic Complexity

This complexity usually appears in efficient sorting algorithms such as _Merge Sort_ or _Quick Sort_. JavaScript uses this approach under the hood in the native _Array.prototype.sort()_ method.

The logic consists of repeatedly dividing the array in half _(log n)_ and then merging and sorting the elements _(n)_.

```js
// Conceptual example using the native sorting method of JS
function ordenarLista(arr) {
  return arr.sort((a, b) => a - b); // The V8 engine optimizes this to O(n log n)
}

const shuffledNumbers = [5, 1, 4, 2, 8];
console.log(sortList(shuffledNumbers)); // [1, 2, 4, 5, 8]
```

### 5. O(n²) Notation - Quadratic Complexity

Quadratic complexity occurs when the execution time grows with the square of the number of elements.

The classic trigger for turning code into O(n²) is having a loop inside another loop (nested loops). For every item in the outer array, you iterate through the entire inner array again. If your list grows even a little, your application will start to struggle.

```js
function findDuplicates(arr) {
  let duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i]);
      }
    }
  }
  return duplicados;
}

console.log(findDuplicates([1, 2, 3, 2, 4, 1])); // [1, 2]
```

### 6. O(2^n) Notation - Exponential Complexity

In exponential growth, every new element added to the input doubles the algorithm's workload. A well-known example is the naive recursive implementation of the Fibonacci sequence. Since the function calls itself twice at every level, it generates a huge and redundant call tree.

```js
function fibonacciRecursive(n) {
  if (n <= 1) return n;

  // Two recursive calls for each execution. Avoid this for large numbers!
  return fibonacciRecursive(n - 1) + fibonacciRecursive(n - 2);
}

console.log(fibonacciRecursive(6)); // 8
```

### Combining Complexities

Sometimes we can see a function that combines two complexities, such as _O(n) + O(1)_.

```js
function myFunction(arr) {
  arr[0]; // O(1)
  return arr.map(...); // O(n)
}
```

In this case, the dominant complexity is _O(n)_, because it takes longer to execute the _map_ than the _arr[0]_ access.

<strong>
  Remember: the complexity with the highest growth rate will always be the
  dominant one.
</strong>

### Summing Complexities

We can have a function with _N_ loops, for example _O(n) + O(n) + O(n)_. You might think the complexity is _O(3n)_, but in this case we ignore the constant and consider it simply _O(n)_.

```js
function myFunction(arr) {
  // O(n)
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }

  // O(n)
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }

  // O(n)
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}
```

### Complexity Time X Space

Besides measuring execution time, we also use Big O Notation to analyze space complexity, which represents the additional memory required by an algorithm in relation to the size of the input.

```js
function sum(arr) {
  let total = 0;

  for (const num of arr) {
    total += num;
  }

  return total;
}
```

While the size of the input array can grow, the algorithm continues to use only a fixed amount of additional memory. Therefore, its space complexity is O(1). And its time complexity is O(n), because each element of the array needs to be visited once.

### Conclusion

Understanding Big O Notation is essential for creating efficient and scalable algorithms in large applications and for identifying performance bottlenecks that can be improved.

Many large companies ask about Big O Notation during technical interviews, and this can be a differentiator for you.

In the next posts, we'll start breaking down algorithm and data structure patterns such as _Two Pointers_, _Sliding Window_, and _HashMaps_.

Knowing the Big O of each one will help you perfectly understand why you would choose one approach over another.


Understanding Big O Notation: how to measure the efficiency of an algorithm


The `useTransition` hook was introduced in React 18 and allows you to mark state updates as non-urgent, helping React prioritize more important interactions and keep the interface more responsive.

By default, all state updates in React (setState) are treated as urgent and executed as soon as they are called. But there are situations where a `setState` depends on user interaction or doesn't need to be executed immediately, such as:

- Redirecting.
- Switching tabs.
- Fetching and listing items.
- Performing expensive computations.

In many cases, multiple consecutive interactions can generate unnecessary renders, unresponsive interfaces, and even race condition problems if asynchronous responses arrive out of order.

Strategies like temporarily disabling user interactions or adding delays—waiting a few milliseconds after user interaction—are used but end up hurting the experience for the user who has to wait for the action to happen before performing a new one.

In these cases, we can use the `useTransition` hook to mark state updates as non-urgent, including in asynchronous flows, so that React can prioritize more important user interactions and keep the interface more responsive.

### Usage

```jsx
const [isPending, startTransition] = useTransition();
```

Documentation: https://react.dev/reference/react/useTransition

### Example

As an example, let's use a component to simulate a shopping cart calculation.

To keep the code looking cleaner, I've removed classes and accessibility attributes. The _fetchTotalPrice_ function is just a promise that resolves 2 seconds later. You can see the full code [here](https://github.com/Sergioamjr/my-website-v2/blob/main/src/posts/pt/react-hook-use-transition/UsingUseTransition/index.tsx).

<NotUsingUseTransition
  title="Without UseTransition"
  quantityLabel="Quantity:"
  calculatingLabel="Calculating..."
  errorLabel="Ops, something went wrong"
  totalPriceTitle="Total Price:"
/>

```jsx
import { useState } from 'react';

export default function WithoutStartTransitionUsage() {
  const [isPending, setIsPending] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [totalPrice, setTotalPrice] = useState(quantity * price);

  const onChangeQuantityHandler = async (quantity) => {
    setIsPending(true);
    const newPrice = await fetchTotalPrice(quantity);
    setTotalPrice(newPrice);
    setIsPending(false);
  };

  const onIncreaseQuantity = () => {
    setQuantity((prev) => prev + 1);
    onChangeQuantityHandler(quantity + 1);
  };

  const onDecreaseQuantity = () => {
    setQuantity((prev) => prev - 1);
    onChangeQuantityHandler(quantity - 1);
  };

  return (
    <>
      <p>Quantity:</p>
      <div>
        <button onClick={onDecreaseQuantity}>-</button>
        <span>{quantity}</span>
        <button onClick={onIncreaseQuantity}>+</button>
      </div>

      <p>Total Price:</p>
      <p>{isPending ? 'Calculating...' : totalPrice}</p>
    </>
  );
}
```

When changing the quantity several times in a row, notice that the total value is updated after the loading period, causing an inconsistency in the interface, as well as unnecessary excessive rendering.

We could use the _isPending_ flag to block the buttons, but that doesn't offer very good usability for the user.

<NotUsingUseTransition
  disableOnPending
  title="Without useTransition & Blocking Action"
  quantityLabel="Quantity:"
  calculatingLabel="Calculating..."
  errorLabel="Ops, something went wrong"
  totalPriceTitle="Total Price:"
/>

### Using the useTransition hook

Now let's see the same example using the `useTransition` hook.

<UsingUseTransition
  title="Using useTransition"
  quantityLabel="Quantity:"
  calculatingLabel="Calculating..."
  errorLabel="Ops, something went wrong"
  totalPriceTitle="Total Price:"
/>

```jsx
import { useTransition, useState } from 'react';

export default function StartTransitionUsage() {
  const [quantity, setQuantity] = useState(1);
  const [totalPrice, setTotalPrice] = useState(quantity * price);
  const [isPending, startTransition] = useTransition();

  const onChangeQuantityHandler = (value) => {
    startTransition(async () => {
      const newPrice = await fetchTotalPrice(value);
      startTransition(() => {
        setTotalPrice(newPrice);
      });
    });
  };

  const onIncreaseQuantity = () => {
    setQuantity((prev) => prev + 1);
    onChangeQuantityHandler(quantity + 1);
  };

  const onDecreaseQuantity = () => {
    setQuantity((prev) => prev - 1);
    onChangeQuantityHandler(quantity - 1);
  };

  return (
    <>
      <p>Quantity:</p>
      <div>
        <button onClick={onDecreaseQuantity}>-</button>
        <span>{quantity}</span>
        <button onClick={onIncreaseQuantity}>+</button>
      </div>

      <p>Total:</p>
      <p>{isPending ? 'Calculating...' : totalPrice}</p>
    </>
  );
}
```

Now the interface feels more responsive because React prioritizes updating the quantity while the calculation and display of the total price are treated as non-urgent updates.

Furthermore, the buttons remain available to the user and we don't need an extra setState (setIsPending) to control when an action is occurring.

### Asynchronous Transitions

You may also have noticed that inside the `onChangeQuantityHandler` function there are two `startTransition`'s calls. One with the asynchronous request to `fetchTotalPrice` and another for the `setTotalPrice` setState.

```jsx
const onChangeQuantityHandler = (quantity) => {
  startTransition(async () => {
    const newPrice = await fetchTotalPrice(quantity);
    startTransition(() => {
      setTotalPrice(newPrice);
    });
  });
};
```

This is necessary because React currently loses the transition context after an `await`. This way we ensure that the transition is still happening until `setTotalPrice` is called.

For synchronous calls, only one `startTransition` is necessary:

```jsx
startTransition(() => {
  setUser(null);
  setSession(null);
});
```

### Handling Errors

As with any asynchronous request, we can handle an error within a startTransition using a `try/catch` to treat the error and show a message to the user.

<UsingUseTransitionWithErrorHandler
  title="Using useTransition & Error Handler"
  quantityLabel="Quantity:"
  calculatingLabel="Calculating..."
  errorLabel="Ops, something went wrong"
  totalPriceTitle="Total Price:"
/>

```jsx
export default function StartTransitionUsage() {
  const [hasError, setHasError] = useState(false);
  //...
  const onChangeQuantityHandler = (value) => {
    setHasError(false);
    startTransition(async () => {
      try {
        const newPrice = await fetchTotalPrice(value);
        startTransition(() => {
          setTotalPrice(newPrice);
        });
      } catch {
        setHasError(true);
      }
    });
  };
}
```

In this case, the error state was intentionally kept outside the transition, as error feedback should normally be an urgent update for the user.

### Conclusion

The `useTransition` hook was created to solve the small problem of excessive and unnecessary rendering which, in an application, ends up harming page performance and user experience. With it, it is possible to make the interface more responsive without the need to add extra complexity to the code.

The next time you notice a performance bottleneck on the page or are creating a state to indicate that an action is occurring, consider using the `useTransition` hook; this should significantly improve the user experience.


Optimizing React Applications with the useTransition Hook


The development field has always evolved rapidly, but nothing compares to the era of artificial intelligence we are living in now. It’s becoming hard to stay up to date with so many new things to learn: agents, subagents, MCP, skills. How and when do I use all of this?

I was having this difficulty. I didn’t know how and where to start, I bought courses, watched videos, read articles but what really taught me was getting hands-on. I paid for the Claude Code subscription and started using AI to program.

A lot of things started to make sense to me, and I’d like to share what I’m learning on my journey to stay up to date in the era of artificial intelligence here on my blog. And before anything else, I think it’s important to explain the most common concepts and terms related to AI development.

## Table of Contents
- [LLM](#llm-(large-language-model))
- [Tokens](#tokens)
- [Prompt](#prompt)
- [Embeddings](#embeddings)
- [RAG](#rag-(retrieval-augmented-generation))
- [MCP](#mcp-(model-context-protocol))
- [AI Agent](#ai-agent)
- [Skills](#skills)
- [Subagents](#subagents)
- [Spec Driven Development](#sdd-(spec-driven-development))
- [Conclusion](#conclusion)

### LLM (Large Language Model)
The LLM is the "big brain" behind AI. It is trained on a massive amount of data, allowing it to process information and return a result.

Each trained model has its own name and version, such as Claude 2.0, GPT-4, Claude Opus 4.6, Gemini 3.1 Pro, etc. Each has its own characteristics, capabilities, and limitations. Some are better at understanding conversational context, while others are faster or have a larger token limit.

When we use an AI service like ChatGPT, Claude, or Gemini, we are actually using a user-friendly interface that interacts with an LLM behind the scenes. The LLM is what truly processes the information and generates the response, while the interface makes it accessible and easy for us to use.

Although we often treat everything as "AI," it’s important to differentiate:

- **LLMs** → focused on text
- **Image Models** → image generation (Text-to-Image)
- **Audio Models** → voice synthesis (TTS)
- **Multimodal Models** → combine text, image, audio, etc.

It is also possible to chain several LLMs to create a more complex system where each model is responsible for a specific part of the process. For example, one LLM can be used to understand the context of a question, while another is specialized in generating the response.

```md
Text -> LLM (interpretation) -> LLM (generation) -> TTS (Audio Model) -> Audio
```

Tools like [LangChain](https://www.langchain.com/) help structure this type of workflow.

### Tokens
Tokens are the basic units AI uses to read and respond. Instead of whole letters or words, the AI breaks text into chunks (like syllables or parts of words) through a process called tokenization.

For example, the word "house" might be split into tokens, and each token is converted into numbers so the AI can understand, process, and respond.

```md
house -> [hou, se] -> [123, 456]
```

Most LLMs have a token limit they can process at once. If the prompt or response exceeds this limit, the AI may fail to process everything, leading to incomplete answers or errors. Paid plans often allow you to increase this limit.

### Prompt
A prompt is the instruction, question, input, or command you send to the AI. This step is crucial because the quality of the response depends heavily on how the prompt is formulated. If you want a shorter, clearer, and more objective answer, it’s important to be specific in your prompt.

It is also vital to provide any relevant information so the AI understands the context and can respond appropriately.

Example: _"Give me a list of 5 Brazilian cities with over 1 million inhabitants, formatted in JSON, following this example: `{ 'city': 'São Paulo', 'population': 12300000 }`."_

Response:
```md
[
  { "city": "São Paulo", "population": 12300000 },
  { "city": "Rio de Janeiro", "population": 6748000 },
  { "city": "Brasília", "population": 3055000 },
  { "city": "Salvador", "population": 2887000 },
  { "city": "Fortaleza", "population": 2687000 }
]
```

Providing adequate context is key. Recently, I asked an AI to investigate a problem in my application; it started reading thousands of files in the node_modules folder, took several minutes, and consumed all my available [tokens](#tokens). When my tokens refreshed, I asked it to investigate the problem while specifically consulting the documentation of the tool I was using. Result: it solved the problem in a few seconds.

### Embeddings
Embeddings are numerical representations of the meaning of words or texts. This allows the AI to understand that "house" and "home" are similar concepts, even if they are written differently. Words with similar meanings (like "dog" and "pet") stay numerically close, helping the AI understand context within a sentence.

An AI doesn't "know" everything before responding; it identifies patterns and predicts the next word based on what has been said and what it learned during training.

If a question is about a subject it doesn't know, it might invent an answer (called "hallucination"). To avoid this, techniques like RAG can be used to provide real information and ensure more accurate answers.

### RAG (Retrieval-Augmented Generation)
As explained in [LLM](#llm-(large-language-model)), AI is trained on a vast amount of data, but this knowledge has an expiration date. It's as if the LLM is frozen in time. It doesn't have access to information that happened after data collection or data that wasn't present during training.

To solve this, the RAG technique is used. It allows the AI to consult external sources — like your documents or company manuals—before responding. This prevents it from making things up and ensures responses are based on real facts.

### MCP (Model Context Protocol)
Just as RAG is a technique to improve accuracy, MCP is a protocol that standardizes how AI connects to and interacts with different data sources and apps.

It acts as a bridge between the AI and the outside world, allowing it to access real-time information like database records, web search results, or even interact with other apps, such as a calendar to schedule a meeting or an email system to send a message.

Check out the list of [popular MCP servers for Claude](https://code.claude.com/docs/en/mcp#popular-mcp-servers).

### AI Agent
In a standard conversation, the AI receives a question (input) and returns an answer (output). But it can't do much beyond that. An AI Agent, however, is a more advanced system capable of performing specific tasks autonomously.

For example, if you ask an AI agent to _"Schedule a meeting with John tomorrow at 10 AM,"_ it can access your calendar, check John's availability, send an invite, and confirm the meeting—all without you doing anything else.

Examples of AI Agents: [Claude Code](https://www.claude.com/), [OpenCode](https://opencode.ai/), [Copilot](https://azure.microsoft.com/en-us/products/github/copilot), [AutoGPT](https://agpt.co/), [BabyAGI](https://babyagi.org/), [AgentGPT](https://agentgpt.reworkd.ai/), etc.

### Skills
Skills are reusable instructions or capabilities we give to an agent so it becomes an expert at a certain task. We can specify how and when an agent should search the web, perform math, generate images, or follow a specific pattern.

```md
.skills/
  /summarize-text/
    SKILL.md
```

Skill format (skill.md):
```md
---
name: summarize-text
description: Summarize any given text in a clear and concise way. Use when the user asks for summaries or when dealing with long content.
---

# Summarize Text Skill

## Instructions

- Always generate a concise summary
- Keep the main ideas only
- Avoid unnecessary details
- Use bullet points when appropriate
- Maintain the original meaning

## Output format

- Short paragraph OR
- Bullet points (if content is complex)
```

### Subagents
Like skills, subagents are instructions to be followed when performing a task via the main agent. By default, a main agent handles small tasks one at a time. With subagents, it can delegate these tasks to be executed in parallel or combined.

#### Subagent Example
```md
---
name: RestaurantsFinder
description: Look for specific restaurants considering reviews and popularity given a location.
---
```

```md
---
name: PlacesCloseToMe
description: Return only a list of places near a location and a range. Return the place name, popularity, and distance.
---
```

Command: 

_Give me a list of 10 Japanese restaurants near me. I am located at Praça da Sé in São Paulo. The maximum distance is 30 kilometers. Use the RestaurantsFinder and PlacesCloseToMe subagents._

Answer:
```md
Here are the 10 Japanese restaurants closest to you at Praça da Sé, within 30km:

  ┌─────┬────────────────────────┬──────────────────────────┬───────────┐
  │  #  │      Restaurants       │        Rating            │ Distance  │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 1   │ Izakaya Issa           │ 4.5/5                    │ ~1.5 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 2   │ Lamen Kazu             │ 4.4/5 (1.043 reviews)    │ ~1.8 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 3   │ Momo Lamen House       │ 4.3/5 (518 reviews)      │ ~1.8 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 4   │ Mugui                  │ 4.5/5 (294 reviews)      │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 5   │ Restaurante Porque Sim │ 4.5/5 (701 reviews)      │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 6   │ Sushi Kenzo            │ 4.4/5                    │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 7   │ Sushi Isao             │ 4.5/5 (649 reviews)      │ ~2.0 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 8   │ Tanka Restaurante      │ 4.5/5 (1.171 reviews)    │ ~2.0 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 9   │ Jojo Ramen             │ 4.4/5                    │ ~3.5 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 10  │ Djapa Moema            │ 4.8/5 (7.212 reviews) │ ~8.0 km   │
  └─────┴────────────────────────┴──────────────────────────┴───────────┘

The first 8 are located in the Liberdade neighborhood (SP's Japanese district), just a few minutes' walk away. The highlight by rating is Djapa Moema (4.8/5 with over 7,000 reviews), despite being the furthest on the list.
  
```

### SDD (Spec Driven Development)
SDD is a document containing all the details, rules, and specifications of your project. It is usually the first thing done before starting. Much like the [Prompt](#prompt), it’s important to spend time here to guide the AI toward the expected result. In an SDD, you specify the motivation, goal, technologies, business rules, and entities. You can even use AI to help write a good Spec, using tools like [kiro.dev](https://kiro.dev).

## Conclusion

AI is not the future; it is already among us today. There is a fear it might take our jobs, and there are reasons for that concern. But at the same time, AI can be a great ally in our daily lives—automating tasks, scouring files, and acting as a powerful pair programming partner.


AI Development: Concepts Every Dev Needs to Understand


Nowadays, it's hard to imagine an activity we do that doesn't rely on the Internet. It allows us to shop at the market, pay bills, easily watch TV shows with just a few clicks. But, you see, when I say "allows us," I'm thinking about my situation, without any difficulty or restriction in using the internet. Unfortunately, the reality for millions of people is not the same.

On this blog post I will be covering the following topics.

- [WAI-ARIA](#wai-aria)
- [Semantic HTML](#semantic-html)
- [Images](#images)
- [Colors](#colors)
- [How to Start Developing with Accessibility?](#how-to-start-developing-with-accessibility?)
- [Other Best Practices](#other-best-practices)

A recent survey published by the [Web For All Movement](https://mwpt.com.br/) and the [BigDataCorp](https://bigdatacorp.com.br/) platform indicates that [only 0.74% of Brazilian websites are accessible to people with disabilities](https://revistagalileu.globo.com/Tecnologia/noticia/2020/05/apenas-074-dos-sites-brasileiros-sao-acessiveis-pessoas-com-deficiencia.html).

And this number is not likely to improve anytime soon, as Brazilian legislation does not define the accessibility criteria that a website should meet, while in Israel [you can be sued](https://www.haaretz.com/.premium-annoying-web-accessibility-rules-1.5290156) if your site is not accessible.

But where can we start thinking about accessibility?

## WAI-ARIA
To talk about web accessibility, we need to talk about WAI-ARIA, guidelines created by the [W3C](https://www.w3.org/), the international organization that oversees Internet standards. According to the [official documentation](https://www.w3.org/WAI/standards-guidelines/aria/), WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) defines ways to make website content more accessible to people with disabilities or those using assistive navigation tools, such as screen readers and keyboards.

They should be able to interact with page elements like buttons, forms, drag-and-drop, calendars, dropdown lists, submenus, etc.

In short, ARIA has three categories: *roles, states, and properties*.

### Roles
We can use roles to define the nature of an element, as well as to inform a group of elements, regions, page structure, or alerts.

If you use the semantically correct HTML tags, you might not need to define the roles. Div and span tags are the only ones that are generic and have no semantic meaning. Therefore, you might need to define a role when using them for something important.

For example, you can create a valid link using the span tag and role with HTML, CSS, and JS:

```html
<span
  data-href="https://medium.com"
  tabindex="0"
  role="link">
  Link with span
</span>
```

```css
span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
```

```js
const spanElem = document.querySelector('span');
const navigateLink = (e) => {
  if (e.type === 'click' || e.key === 'Enter') {
    const ref = e.target != null ? e.target : e.srcElement;
    if (ref) {
      window.open(ref.getAttribute('data-href'), '_blank');
    }
  }
}

spanElem.addEventListener('click', navigateLink);
spanElem.addEventListener('keydown', navigateLink);
```

Or, simply use the a tag:

```html
<a href="https://medium.com" target="_blank">Link with a</a>
```

### States and Properties
Through states and properties, you can indicate the state of an element—whether it's checked, selected, disabled, collapsed, hidden, open, draggable, clickable, or the action of a button without text, etc.

To define a modal:
```html
<div role="dialog" aria-modal="true">
  // Content
</div>
```

To indicate the action of a button without text:
```html
<button aria-label="Close">x</button>
```

To define a slider:

```html
<div
  role="slider"
  aria-valuenow="4"
  aria-valuemin="1"
  aria-valuemax="10" />
```

It's important to note that ARIA only provides information to the browser's accessibility API and does not affect the content of the page.

There are numerous other options, all of which can be consulted in the [official documentation](https://www.w3.org/WAI/standards-guidelines/aria/) or summarized on the [Mozilla website](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques).

## Semantic HTML
The purpose of HTML (Hypertext Markup Language) is to give meaning to the content of a page through tags. Currently, there are almost 100 tags. I know it's a lot, but you should know at least the most commonly used ones.

- `a` for links.
- `p` for paragraphs.
- `button` for buttons.
- `ul`, `ol`, `li` for lists.
- `h1`, `h2`, `h3`, `h4`, `h5`, `h6` for headings.
- `form`, `label`, `input` for forms.
- `table`, `thead`, `tbody`, `td`, `tr` for tables.
- `header` for the header.
- `nav` for navigation.
- `footer` for the footer.

As mentioned above, div and span are generic tags and have no semantic meaning in HTML. If something is important, you should use ARIA to give them meaning.

A table similar to the periodic table with all HTML tags and their categories.

<figure>

![Table with all HTML tags](./images/periodic-tags.webp)
<figcaption>Table with all HTML tags</figcaption>
</figure>

## Images
A large part of the internet nowadays consists of images, be it advertisements, memes, selfies, and without the alt property defined, they all become meaningless to a screen reader.

The alt property in the img tag should receive text describing the content of the image. The more descriptive it is, the better for accessibility and even for SEO.

The alt description is also displayed if the image link is broken.

### Example of alt property usage

See the photo of this delicious hot dog:

![Hot dog on a plate with mustard and mashed potatoes](./images/hotdog.webp)

It's okay to describe it like this:

```html
<img src="hotdog.png" alt="hot dog" />
```

Even better would be to describe it with more detail:

```html 
<img src="hotdog.png" alt="Hot dog on a plate with mustard and mashed potatoes"/>
```

A poor use of the alt property would be like this, as spam. Imagine a screen reader reading this:

```html
<img src="hotdog.png" alt="hot dog hotdog food fastfood recipe lunch junk food" />
```

## Colors
Designers often rely on colors to indicate states: green for everything's okay, red for errors, orange for alerts, etc. However, for color-blind individuals, it's difficult to distinguish these colors. Labels, icons, and textures should also be used in these cases.

<figure>

![Trello's solution for color-blind users](./images/trello.gif)
<figcaption>Trello's solution for color-blind users</figcaption>
</figure>

## How to Start Developing with Accessibility?

Developing with accessibility in mind might seem initially complicated, but over time, it becomes more natural. As you learn to use semantically correct HTML tags, discover the utility of others, or navigate your site using a keyboard.

Testing accessibility during development should be as important as testing support in different browsers. Therefore, here are some links that can help.

### ChromeVox
[ChromeVox](http://www.chromevox.com/) is a free screen reader available through a Chrome extension that you can install [here](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=pt-BR). It reads the content of your site as you navigate with the keyboard. (To enable/disable it, press cmd + ctrl + A + A on iOS).

### Lighthouse
You can audit your site's accessibility with Google's [Lighthouse tool](https://developers.google.com/web/tools/lighthouse). It's part of Chrome's Developer Tools and gives you a score from 0 to 100 for performance, accessibility, best practices, and SEO.

### React + ESLint
For those who validate React code with ESLint, there's the [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) plugin, which also checks for accessibility issues in JSX.

### WCAG Checklist
The [a11yproject](https://www.a11yproject.com/) website has a checklist following the [WCAG](https://guia-wcag.com/) (The Web Content Accessibility Guidelines), which is a shared accessibility standard among individuals, organizations, and governments. It's well-organized by content categories. You can access it [here](https://www.a11yproject.com/checklist/).

## Other Best Practices

### Zoom
Do not disable zooming on the page using the viewport meta tag in HTML. There are many reasons why users might want to zoom in, such as seeing a detail in an image or reading small font.

### Focus
Do not disable the outline of focused elements using the `outline: none` property in CSS. This is how keyboard users can know where the mouse pointer would be.

### Conclusion
Accessibility is not an extra feature in an app. As developers, we must build a better and more inclusive internet for anyone, regardless of region, device, region and/or disabilities.

Accessibility should not be the sole concern of developers. Designers, product managers, advertisers, and everyone involved in creating a page should also consider the importance of web accessibility.

Only together can we create a better, accessible, inclusive internet without barriers for everyone.

Making the Internet Accessible

Tailwind emerged in 2017, survived the hype of new technologies and it is now present in many projects and in the standard installation of frameworks, such as NextJS. Tailwind makes styling much simpler, faster, and enjoyable.

![distracted boyfriend meme](https://pbs.twimg.com/media/ELYsGXAW4AIsTRk.jpg)

I've become a Tailwind evangelist, so I'd like to share its key features and how I use it in my daily work.

In this blog post, I'll be covering the following topics:

- [How it works](#how-tailwind-css-works)
- [Utility Classes](#utility-classes)
- [Custom Theme](#custom-theme)
- [Custom Properties](#custom-properties)
- [Using Media Queries](#using-media-queries)
- [Hover, actived, disabled and other states](#hover-actived-disabled-and-other-states)
- [Using !important](#using-important)
- [Using negative values](#using-negative-values)
- [Targeting first and last element](#targeting-first-and-last-element)
- [Peer](#peer)
- [Nested Elements](#nested-elements)
- [Improving readability with @apply](#improving-readability-with-apply)
- [Using prefix](#using-prefix)
- [Playground](#playground)

For more information on installation and configuration, please refer to the [official Tailwind documentation](https://tailwindcss.com/).

### How Tailwind CSS works
Tailwind utilizes HTML classes to apply CSS styles. For example, we can define the color, size and line-height of a text as follows with Tailwind.

```html
<p class="text-red-500 text-base">Hello, World!</p>
```

In contrast, with pure CSS, we would have to create a class and use it in the element.

```css
.text {
    color: red;
    font-size: 12px;
    line-height: 18px;
}
```

```html
<p class="text">Hello, World!</p>
```

And with styled-components, we would need to export a component, import it, and use it. Typically, this element would be in a separate file.

```js
export const Text = styled.p`
    color: red;
    font-size: 12px;
    line-height: 18px;
`;
```

```jsx
import * as Styles from './styles.js';
// ...
<Styles.Text>Hello, World!</Styles.Text>
```

As you can see, we can achieve the same result by writing much less code with Tailwind.

### Utility Classes
At first, it may take some time to memorize the classes, but they follow a pattern, and over time, it becomes natural. The official documentation provides a list of all classes, but the most commonly used ones are:

- `w-x` - Width
- `h-x` - Height
- `p-x` - Padding
- `m-x` - Margin
- `mb-x` - Margin-bottom
- `mt-x` - Margin-top
- `ml-x` - Margin-left
- `mr-x` - Margin-right
- `px-x` - Padding-left & padding-right
- `my-x` - Margin-top & margin-bottom
- `text-x` - Font-size & color
- `leading-x` - Line-height
- `bg-x` - Background-color
- `rounded` - Border-radius
- `flex | block | hidden | grid` - display: flex | block | none | grid

[Read more in the official documentation](https://tailwindcss.com/docs/utility-first)

I highly recommend using the [VSCode Tailwind CSS IntelliSense extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), which suggests and shows the values of all classes as you type.

![VSCode Tailwind CSS IntelliSense extension](/images/autocomplete.png)

### Custom Theme
Tailwind comes with a default theme, but you can customize it to meet your project's needs.

To do this, simply create a `tailwind.config.js` file at the root of your project and define the properties you want to customize.

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue': '#1fb6ff',
        'green': '#13ce66',
        'gray-dark': '#273444',
      },
      spacing: {
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

[Read more in the official documentation](https://tailwindcss.com/docs/theme)

### Custom Properties
The Tailwind theme has a wide range of properties and styles that probably cover your design specifications.

However, if you happen to need a property that does not exist in your theme, you can define a different value using `-[x]`, for example.

```html
<p class="text-[red] text-[100px] w-[50%]">Hello, World!</p>
```

For properties with spaces, you can use an underscore `_` to separate the values.

```html
<p class="w-[calc(100%_+_10px)] shadow-[0_35px_60px_-15px_#333]">Hello, World!</p>
```

[Read more in the official documentation](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values)

### Using Media Queries
To use breakpoints, you can use the prefixes `sm:`, `md:`, `lg:`, and `xl:`.

```html
<p class="text-red-500 sm:text-blue-500 md:text-green-500 lg:text-purple-500 xl:text-yellow-500">Hello, World!</p>
```

To change the sizes of the breakpoints, simply modify the `screens` property in the `tailwind.config.js` file.

```js
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}
```

[Read more in the official documentation](https://tailwindcss.com/docs/screens)

### Hover, actived, disabled and other states
Tailwind also uses prefixes to style an element depending on its state, such as `hover:`, `focus:`, `active:`, and `disabled:`.

```html
<button class="bg-blue-500 hover:bg-green-500 disabled:bg-slate-600">Click here</button>
```

[Read more in the official documentation](https://tailwindcss.com/docs/hover-focus-and-other-states)

### Using !important
To use the `!important` property in CSS, simply add the `!` prefix before the class.

```html
<p class="!mb-0">Hello, World</p> 
```

[Read more in the official documentation](https://tailwindcss.com/docs/configuration#important-modifier)

### Using Negative Values
To use negative values, simply use the `-` prefix before the class.

```html
<p class="-mb-4">Hello, World</p> 
```

[Read more in the official documentation](https://tailwindcss.com/docs/margin#using-negative-values)

### Nested Elements
To style a child element, simply use the `&>` prefix inside brackets.

```html
<div class="text-blue-700 hover:[&>.text]:text-red-700 ">
    <p>I'll not be red on hover.</p>
    <p class="text">I'll be red on hover.</p>
</div>
```

[Read more in the official documentation](https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants)

### Targeting first and last element
Instead of using `:not`, `:last-of-type`, `:first-of-type` selectors to customize the first or last element of a group of sibling elements, simply use the `first:` and `last:` prefixes.

```html
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
```

This is very useful in loops.

```html
<ul>
    {#each people as person}
       <li class="mb-10 last:mb-0">...<li>
    {/each}
<ul>
```

[Read more in the official documentation](https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even)

### Peer
To style an element depending on the state of its hierarchical sibling, use the `peer` class and prefix.

```html
<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible text-pink-600">
    Please provide a valid email address.
</p>
```

[Read more in the official documentation](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state)

### Improving readability with @apply

Some argue that a disadvantage of Tailwind is that it makes the code less readable by adding so many classes in the HTML.

```html
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 1</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 2</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 3</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 4</p>
```

While this may be valid, you can use `@apply` to group classes, reuse them, and make the code more legible.

```css
.my-text-base {
    @apply text-base text-gray-800 mb-3 last:mb-0;
}
```

```html
<p class="my-text-base">Text 1</p>
<p class="my-text-base">Text 2</p>
<p class="my-text-base">Text 3</p>
<p class="my-text-base">Text 4</p>
```

[Read more in the official documentation](https://tailwindcss.com/docs/reusing-styles)

### Using Prefix
If you want to add Tailwind to a project and avoid conflicts with other classes, you can add a `tw-` prefix to the Tailwind classes.

```js
module.exports = {
  prefix: 'tw-',
}
```

```html
<p class="tw-text-blue-400">Hello, World!</p>
```

[Read more in the official documentation](https://tailwindcss.com/docs/configuration#prefix)

### Playground

Tailwind has a playground where you can test all these features and more online. Just visit the link.

https://play.tailwindcss.com/

### Conclusion

Since I started working with Tailwind CSS, I rarely needed to create a new CSS file or rewrite properties to add style to a project.

In case I haven't convinced you to start using TailwindCSS yet, there are another points that I consider important to highlight.

- TailwindCSS is light and only adds to the final bundle the classes that you used during the development.
- TailwindCSS is easy to set up, customize and start working on any web project, weather using React, Angular, Vue or just HTML.
- TailwindCSS can be used with other UI solutions, such as UI libraries, preprocessors and CSS-in-JS.

I hope you enjoyed this my blog post. If you have any questions, feel free to ask in the comments section below.

Styling faster with Tailwind CSS 🍃


React Hooks were released two years ago on React version 16.8. It's not so common to see the usage of all of them but they might be very useful to simplify a feature or improve the performance in our application, so, I'd like to explain and give some examples of usage of all React Hooks.

In this post I'll cover all React Hooks:

- useState.
- useEffect.
- useRef.
- useContext.
- useReducer.
- useMemo.
- useCallback.
- useDebug.
- useLayoutEffect.

## useState

The simplest and most used of React Hooks, _useState_ allows you to store any value in a function component, like _string, object, array, boolean, number, null_.

It has the same functionality of _this.state_ in a React Class Component.

You can define its value by passing a value directly or calling a method that accesses the previous value and returns the new value.

```javascript
import { useState } from 'react';

export default function Component() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <p>Clicks: {counter}</p>
      <button onClick={() => setCounter((prev) => ++prev)}>Increase 1</button>
    </>
  );
}
```

## useEffect

_useEffect_ allows you to call a method during some moments in the component lifecycle:

- On the first render.
- When a watched value is updated.
- When the component is unmounted.

It's similar to the methods _componentDidMount, componentDidUpdate and componentWillUnmount_ in a Class Component.

```javascript
import { useEffect } from 'react';

export default function Component() {
  const fetchSomething = (params) => {};
  const onResizeScreenHandler = () => {};

  useEffect(() => {
    fetchSomething(filters);
  }, [filters]);

  useEffect(() => {
    document.addEventlistener('resize', onResizeScreenHandler);
    return () => document.removeEventlistener('resize', onResizeScreenHandler);
  }, []);
}
```

To call the function inside _useEffect_ once, let the second parameter, an array, empty.

```javascript
useEffect(fn, []);
```

To observe a value, add it in the second parameter.

```javascript
useEffect(() {
  // Do something with updated x
}, [x]);
```

The function that you return will be called when the component is unmounted.

```javascript
useEffect(() => {
  return () => doSomething();
}, []);
```

## useRef

The _useRef_ hook lets you:

- Access an element on the DOM.
- Store an immutable value during the component's lifecycle.

Its value is accessed by _.current_:

```javascript
const time = useRef(0);
console.log(time.current); // 0;
```

### Accessing an element on the DOM.

```javascript
import { useRef, useEffect } from 'react';

export default function Component() {
  const textRef = useRef(null);
  useEffect(() => {
    if (textRef) {
      const elementWidth = textRef.current.offsetWidth;
    }
  }, [textRef]);

  return <p ref={textRef}>Hello, React Hooks</p>;
}
```

### Delay effect

You can use _useRef_ to create a delay to call a method. For instance, wait x seconds to request something as soon the user finishes typing and not overload your API every time he types on deletes a letter.

```javascript
import { useRef, useEffect, useRef, useState } from 'react';

export default function Form() {
  const [text, setText] = useState('');
  const timeToCallSomething = useRef(null);

  const fetchSomething = () => {
    if (text) {
      // Fetch an API.
    }
  };

  useEffect(() => {
    if (timeToCallSomething.current) {
      clearInterval(timeToCallSomething.current);
    }
    timeToCallSomething.current = setTimeout(fetchSomething, 1000);
    return () => clearInterval(timeToCallSomething.current);
  }, [text]);

  const onChangeHandler = ({ target: { value } }) => {
    setText(value);
  };

  return <input value={text} onChange={onChangeHandler} />;
}
```

### Passing a ref by props

If you want to pass a ref to use in a child component, you need to use the method _React.forwardRef_ in the child component and receive the ref as the second parameter.

```javascript
import { useRef, useEffect, forwardRef } from 'react';

export default function Parent() {
  const childRef = useRef(null);

  return <Text ref={childRef} />;
}

const Text = forwardRef((props, ref) => {
  return <p ref={ref}>Exemplo de texto</p>;
});
```

## useReducer

It's an alternative to the _useState_ hook and works like the _reducer_ in Redux. It watches a pre-defined _type_ and returns a new state depending on that _type_.

```javascript
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <>
      Count: {state}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}
```

## useContext

The _useContext_ hook allows you to store and access a value anywhere within its hierarchy. It works like Redux, by the way, I already wrote an article showing [how to replace Redux by React Hooks](https://www.sergiojunior.com.br/posts_en/replacing-redux-with-react-hooks).

It's useful when you often use a value and don't want to pass it to the children components by props.

```javascript
// hooks/useUserContext.js
import { useContext, createContext } from 'react';

// Our context
const UserContext = createContext({ name: '' });

// The main component that receives a value and updates our context.
export function UserContextProvider({ name, children }) {
  return <UserContext.Provider value={name}>{children}</UserContext.Provider>;
}

// A custom hook to get the current value.
export default function useUserContext() {
  return useContext(UserContext);
}
```

```javascript
// App.js
import { UserContextProvider } from '~hooks/useUserContext';

export default function App() {
  return (
    <UserContextProvider value="John">
      <YourAppTree />
    </UserContextProvider>
  );
}
```

```javascript
// YourAppTree.js
import useUserContext from '~hooks/useUserContext';

export default function YourAppTree() {
  const userName = useUserContext(); // Initially the value will be "" and then John.
  return <p>Hi, {userName}</p>;
}
```

The next React Hooks, _useMemo_ and _useCallback_, are commonly used to solve performance issues or improve them in our application.

## useMemo

You can use _useMemo_ to save time and processing on the execution of a complex function.

Imagine that you have a function that receives some parameters and does count with them that's expensive to process. What the _useMemo_ hook does is memorize these parameters and the returned value and whenever these parameters are equal again, it will return the previous value, without calculating it.

```javascript
import { useMemo } from 'react';

export default function Component() {
  const value = useMemo(() => {
    // Do something complex with x and y.
  }, [x, y]);
}
```

## useCallback

Before explaining what the _useCallback_ does, I'd like to explain an advanced and important concept in React.

React uses [Strict Equality Comparison](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) to compare the props or the observable values in a React Hook. If any of these values are different, it will update our component or call the method inside the React Hook.

And you should know like Patrick does that things aren't so obvious in javascript with non-primitive values.

![alt](https://dkrn4sk0rn31v.cloudfront.net/2020/03/31110910/4skcofasa1p01.png)

Primitive values are _string, number and boolean_. _Array, object_ and _function_ aren't primitives, so, if you compare them, you'll get _false_:

```javascript
1 === 1; // true;
"batman" === "batman"; // true;
false === false; // true;

{} === {}; // false;
[] === []; // false;
() => {} === () => {}; //false;
```

It will only return _true_ if it has the same reference, like a variable:

```javascript
const fn = () => {};
fn === fn; // true;
```

So if you pass a function by props, React will update the component every time, even if the props haven't changed, because a function is different from a function.

Therefore we use _useCallback_ to create a unique reference to a function and React knows that it's the same and avoids unnecessary updates.

Its reference only will be different in case the parameters change.

```javascript
import { useCallback } from 'react';

export default function Parent() {
  const onFetchAlwaysHandler = useCallback(() => {
    // Its reference will change when a and b change.
  }, [a, b]);

  const onFetchOnceHandler = useCallback(() => {
    // It will have the same reference.
  }, []);

  return <Approvad onFetchHandler={onFetchHandler} />;
}
```

### Watch out

If you use a function with _useCallback_ as a dependency of _useEffect_ that updates the _useCallback_ parameters, you can cause an infinite loop.

### Improving our performance with React.memo

You can use _useCallback_ and _React.memo_ to improve the performance in your application and avoid that the children components update whenever that's an update on the parent component.

```javascript
function List({ item, onSelect }) {
  return (
    <li>
      <button onClick={() => onSelect(item)}>Select {item}</button>
    </li>
  );
}

const MemorizedList = React.memo(List);

function App() {
  const onSelectHandler = useCallback((selectedItem) => {
    // Do something with selectedItem.
  }, []);

  return (
    <ul>
      {array.map((e) => (
        <MemorizedList item={e} onSelect={onSelectHandler} />
      ))}
    </ul>
  );
}
```

## useLayoutEffect

The hook _useLayoutEffect_ has the same functionality as _useEffect_, however, it will execute its function as soon the browser finishes mounting the dom.

You can use this hook to read an element in the DOM or do something when the page loads.

```javascript
import { useState, useLayoutEffect } from 'react';

function Component() {
  const [loadedDOM, setLoadedDOM] = useState(false);

  useLayoutEffect(() => {
    setLoadedDOM(true);
    window.localstorage.getItem('...');
  }, []);
}
```

### SSR

If you're using Server Side Render (NextJS), the React Hooks _useLayoutEffect_ and _useEffect_ won't work because they only run on the client-side. If you try, React will show you a warning on the console.

You can use them to interact with the _localstorage_ which's a feature only in the client, for example.

## useDebugValue

The hook _useDebugValue_ can be used to show a label on the [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) extension inside a custom hook. It works like a console.log.

```javascript
import { useDebugValue, useState } from 'react';

function useUserStatus() {
  const [isLogged, setIsLogged] = useState(false);

  //...

  useDebugValue(isLogged ? 'Logged' : 'Not logged');

  return isLogged;
}
```

## useImperativeHandle

The _useImperativeHandle_ hook allows you to customize the ref value in a parent component through its child component. You can pass a DOM element, method, anything and be able to call it from the parent component. It must be used with the _React.forwardRef_ in the child component to receive the ref from the parent component.

```javascript
import { useImperativeHandle, forwardRef, useEffect, useRef } from 'react';

const Input = forwardRef((props, parentRef) => {
  const childRef = useRef();
  const someMethod = () => 1;

  useImperativeHandle(parentRef, () => ({
    focusOnChildInput: () => childRef.current.focus(),
    callChildMethod: someMethod,
  }));
  return <input ref={childRef} />;
});

const Form = () => {
  const ref = useRef();
  useEffect(() => {
    if (ref) {
      ref.current?.callChildMethod?.(); // 1
      ref.current?.focusOnChildInput?.();
    }
  }, []);

  return (
    <form>
      <Input ref={ref} />
    </form>
  );
};
```

## Documentation

That's all, if you want to see more details or read about these React Hooks, please, take a look at the [official React documentation](https://pt-br.reactjs.org/docs/hooks-reference.html).


Explaining all React Hooks with examples


In 2019 I was learning how to use [React Hooks](https://pt-br.reactjs.org/docs/hooks-intro.html) and decided to replace the Redux library with React Hooks to manage the state of a simple application that I was building at that time. I didn’t know how I would do that, however, in the end, it worked pretty well.

I kept the concepts of reducer, actions, types, middleware, mapStateToProps and I wrote [um artigo no Medium](https://medium.com/reactbrasil/substituindo-o-redux-pelo-context-api-react-hooks-a70e995daa1d) on Medium showing up how I had done it. And it was published at [React Brasil](https://medium.com/reactbrasil) on Medium.

I was really happy with the community’s feedback but I felt that I could refactor that code which I wrote one year ago and make it cleaner and organized, so, I ended up rewriting my code example and my article, that became this that you’re reading right now.

I’m using the same example of a simple counter and authentication. If you want, you can already check [a demo](https://replacing-redux-with-react-hooks.netlify.app/) and [repositório](https://github.com/Sergioamjr/replacing-redux-with-react-hooks) with the final code.

### Let's code

First of all, let’s create the state of our counter and authentication and also its reducers, types and actions. They follow basically the same structure of Redux. I’m just using the pattern Ducks to keep everything related in the same file.

You can read more about this pattern in [nesse link](https://github.com/erikras/ducks-modular-redux).

```js
//src/store/reducers/auth.js
export const authDefault = {
  auth: {
    isLogged: false,
    user: {},
  },
};

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

const authReducer = (state = authDefault, action) => {
  switch (action.type) {
    case LOGIN:
      return {
        auth: {
          ...state.auth,
          isLogged: true,
          user: action.payload,
        },
      };
    case LOGOUT:
      return {
        auth: {
          ...state.auth,
          isLogged: false,
          user: {},
        },
      };
    default:
      return state;
  }
};

export const loginAction = (user) => {
  return {
    type: LOGIN,
    payload: user,
  };
};

export const logoutAction = () => {
  return {
    type: LOGOUT,
  };
};

export default authReducer;
```

```js
//src/store/reducers/counter.js
export const counterDefault = {
  counter: 0,
};

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const counterReducer = (state = counterDefault, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        counter: state.counter + 1,
      };
    case DECREMENT:
      return {
        ...state,
        counter: state.counter - 1,
      };
    case RESET:
      return {
        counter: 0,
      };
    default:
      return state;
  }
};

export const incrementAction = () => {
  return {
    type: INCREMENT,
  };
};

export const decrementAction = () => {
  return {
    type: DECREMENT,
  };
};

export const resetAction = () => {
  return {
    type: RESET,
  };
};

export default counterReducer;
```

Now we will create our custom hooks, the first one is the useCombinedReducers, it will be responsible to return an array with all reducers and our store object. We will only use the React hook useReducer to create it.

```js
//src/store/hooks/useCombinedReducers.js
import { useReducer } from 'react';
import counterReducer, { counterDefault } from './../reducers/counter';
import authReducer, { authDefault } from './../reducers/auth';

const useCombinedReducers = () => {
  const [counterStore, counter] = useReducer(counterReducer, counterDefault);
  const [authStore, auth] = useReducer(authReducer, authDefault);

  return {
    store: { ...counterStore, ...authStore },
    reducers: [counter, auth],
  };
};

export default useCombinedReducers;
```

When we add a new object in our store, we will need to edit this file, importing the reducer and default value, passing both to the hook useReducer and returning them in our main function.

This was the only change that I made compared to Redux, in order to keep our Provider component more dynamic and do not need to edit it again.

Our second custom hook is the useStore, it will create and provide the context of our application through useContext hook.

```js
//src/store/hooks/useStore.js
import { useContext, createContext } from 'react';
import { authDefault } from '../reducers/auth';
import { counterDefault } from '../reducers/counter';

export const defaultStore = {
  store: { ...authDefault, ...counterDefault },
  dispatch: () => {},
};

export const StoreContext = createContext(defaultStore);
export default () => {
  return useContext(storeContext);
};
```

With this custom hook will be possible to access directly our store and its dispatch method, besides the component Connect that we will create right now.

The Connect component will inject the store and the dispatch method in our components. We will use the component StoreContext returned from our custom hook useStore.

```js
//src/store/connect.js
import React from 'react';
import { StoreContext } from './hooks/useStore';

const returnPropsAsDefault = (store, props) => props;

const Connect =
  (mapStateToProps = returnPropsAsDefault) =>
  (Component) => {
    return function WrapConnect(props) {
      return (
        <StoreContext.Consumer>
          {({ dispatch, store }) => {
            const storeProps = mapStateToProps(store, props);
            return <Component {...storeProps} dispatch={dispatch} />;
          }}
        </StoreContext.Consumer>
      );
    };
  };

export default Connect;
```

It will work like Redux receiving our component and the mapStateToProps, which is a function that receives the store and the originals props. It is up to you to return the entire store or pick up the objects that you need, like this.

```js
function mapStateToProps(store, props) {
  return {
    ...store,
    ...props,
  };
}

export default Connect(mapStateToProps)(Component);
```

In case of mapStateToProps is not provided, its default function returnPropsAsDefault will return only the original props and the dispatch method.

The next component will be our Provider, it will wrap our application and make our store available within it. We will use the custom hook useCombinedReducers to receive the store object and an array with all our reducers.

```js
//src/store/index.js
import React from 'react';
import useCombinedReducers from './hooks/useCombinedReducers';
import { StoreContext } from './hooks/useStore';

const Provider = ({ children }) => {
  const { store, reducers } = useCombinedReducers();

  const triggerDispatchs = (action) => {
    for (let i = 0; i < reducers.length; i++) {
      reducers[i](action);
    }
  };

  return (
    <StoreContext.Provider
      value={{
        store,
        dispatch: triggerDispatchs,
      }}
    >
      {children}
    </StoreContext.Provider>
  );
};

export default Provider;
```

The method triggerDispatchs do a loop in our reducers, passing the action through as a parameter to each one of them.

We can also add a middleware here, it will intercept our dispatch and we can check its value to trigger a new action or anything.

It will be basically like this.

```js
//src/store/middleware.js
import { LOGOUT } from './reducers/auth';
import { resetAction } from './reducers/counter';

export default (action) => (dispatch) => {
  if (action.type === LOGOUT) {
    dispatch(resetAction());
  }

  dispatch(action);
};
```

It is a closure that receives an action and the dispatch method, in this case, I am triggering the resetAction action if the type is equal LOGOUT, in order to reset our counter on logout.

To use this middleware we need to edit our Provider component, importing the middleware function, creating the method withMiddleware and replacing the dispatch’s attribution.

```js
//src/store/index.js
import React from 'react';
import useCombinedReducers from './hooks/useCombinedReducers';
import { StoreContext } from './hooks/useStore';
import middleware from './middleware';

const Provider = ({ children }) => {
  const { store, reducers } = useCombinedReducers();

  const triggerDispatchs = (action) => {
    for (let i = 0; i < reducers.length; i++) {
      reducers[i](action);
    }
  };

  const withMiddleware = (action) => {
    middleware(action)(triggerDispatchs);
  };

  return (
    <StoreContext.Provider
      value={{
        store,
        dispatch: withMiddleware,
      }}
    >
      {children}
    </StoreContext.Provider>
  );
};

export default Provider;
```

Now we just need to wrap your application with our Provider, like this.

```js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Provider from './store';

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

### Connecting our components

At this point, we have everything set up to use the store in our application. Let’s connect our store in our Counter, Login and Header components.

```js
//src/container/counter.js
import React from 'react';
import ConnectTo from '../store/connect';
import { decrementAction, incrementAction } from '../store/reducers/counter';

const Counter = ({ dispatch, counter }) => {
  const decrementHandler = () => dispatch(decrementAction());
  const incrementHandler = () => dispatch(incrementAction());

  return (
    <div>
      <p>{counter}</p>
      <div>
        <button aria-label="Menos 1" onClick={decrementHandler}>
          -
        </button>
        <button aria-label="Mais 1" onClick={incrementHandler}>
          +
        </button>
      </div>
    </div>
  );
};

const mapStateToProps = ({ counter }, props) => {
  return {
    counter,
    ...props,
  };
};

export default ConnectTo(mapStateToProps)(Counter);
```

```js
//src/container/login.js
import React, { useState } from 'react';
import Connect from '../store/connect';
import { loginAction } from '../store/reducers/auth';

const Login = ({ dispatch }) => {
  const [name, setName] = useState('');
  const changeNameHandler = ({ target: { value } }) => setName(value);
  const onSubmitHandler = () => dispatch(loginAction(name));
  return (
    <div>
      <form>
        <p>
          Context + useState ={' '}
          <span role="img" aria-label="Coração">
            ❤️
          </span>
        </p>
        <input
          value={name}
          onChange={changeNameHandler}
          type="text"
          placeholder="Nome"
        />
        <button onClick={onSubmitHandler} disabled={!name}>
          Entrar
        </button>
      </form>
    </div>
  );
};

export default Connect()(Login);
```

```js
//src/container/header.js
import React from 'react';
import { logoutAction } from '../store/reducers/auth';
import useStore from '../store/hooks/useStore';

const Header = () => {
  const {
    dispatch,
    store: { auth },
  } = useStore();
  const logoutHandler = () => dispatch(logoutAction());
  return (
    <div>
      <div>
        <div>
          <p>
            Context + useState ={' '}
            <span role="img" aria-label="Coração">
              ❤️
            </span>
          </p>
          <div>
            <p>Olá, {auth.user}</p>
            <button onClick={logoutHandler}>Sair</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
```

If you already used Redux before, you must be familiar with what we have here; the Connect inject the dispatch method and our store. We also import the actions to pass them as the dispatch’s parameter.

In our Header component, I am using our custom hook useStore to access the store and the dispatch method, instead of Connect. You can use which one you would rather.

Now let’s put all those components together and add a conditional to show them, using the authentication object from our store.

```js
//src/app.js
import React from 'react';
import Counter from './container/counter';
import Login from './container/login';
import Connect from './store/connect';
import Header from './container/header';

const App = ({ auth }) => {
  return (
    <div>
      <div>
        {auth.isLogged ? (
          <>
            <Header />
            <Counter />
          </>
        ) : (
          <Login />
        )}
      </div>
    </div>
  );
};

const mapStateToProps = ({ auth }, props) => {
  return {
    auth,
    ...props,
  };
};

export default Connect(mapStateToProps)(App);
```

And we’re done. Your app should be working with a store created with React Hooks.

You can see a demo of our application clicking here.

I need to say, we have two drawbacks, comparing with Redux; we don’t have an browser extension, like Redux DevTools, which allow us to debug it, and we don’t support async actions, like Redux Thunk.

And depending on the size and complexity of your application, using Redux might be more performatic then React Hooks.

I hope you’re not upset with me because of these points.

Remembering, all this code is in this repository, feel free to download it, use it, share it and let it a star.

Any suggestion, comment, a critic is well welcome, let me know through the comment’s box below.


Replacing Redux with React Hooks


Mocking your back-end's requests on front-end side might by very useful on development and I'll show you two ways you can do this.

### Advantages to mock your requests

- Navigate and develop without rely on back-end.
- Write E2E tests on your application.
- Save time without await async requests.
- Save requests when you use a public API with limited requests.
- Develop faster with the data that your need.

In my job we saved money setting up a demo enviroment of your project using mocks on front-end without infrastruture to back-end.

### Disadvantage

I also have to say the only drawback that I see, it might be hard to keep your mocks updated if you have too much requests and your backend changes frequently.

For this example I'll create a listing page. How I'm just talking about requests, you can use it with _React, Angular, Vue, Vanilla_ or whatever framework you want.

First all, let's create our mock file.

```json
{
  "users": [
    {
      "name": "John"
    },
    {
      "name": "Mike"
    }
  ]
}
```

Now let's create our service methods to fetch that data.

```javascript
import userMocks from './userMocks.json';
const mockRequests = true;
const BASE_URL = 'https://www.you-api.com';

const returnAsPromise = (mock) => {
  return new Promise((resolve) => resolve(mock));
};

export const fetchAllUsers = () => {
  if (mockRequests) {
    return returnAsPromise(userMocks);
  }

  return fetch(`${BASE_URL}/all-users`);
};

export const fetchSingleUser = (id) => {
  if (mockRequests) {
    return returnAsPromise(userMocks.users[0]);
  }

  return fetch(`${BASE_URL}/single-user?id=${id}`);
};
```

This way we just need to change the variable _mockRequests_ to mock our requests or not.

### Using axios-mock-adapter

A better alternative might be use the npm package _axios-mock-adapter_. It must be used with _axios_, which is a very known npm package to HTTP requests.

#### Installing our dependencies.

```bash
npm install axios axios-mock-adapter
```

#### Setting up our mock file like this:

```javascript
import MockAdapter from 'axios-mock-adapter';
import userMock from './mock';

const useMock = (axios) => {
  const mock = new MockAdapter(axios);

  mock.onGet(/all-users/).reply(200, userMock);
  mock.onGet(/single-user/).reply(200, userMock.users[0]);
};

export default useMock;
```

If you read the _axios-mock-adapter_ documentation, it has some methods like `onGet`, `onPost`, `onPut`, `onDelete` which receive the endpoint to mock and with `reply` is possible return the status code and the response.

#### Import it and use it in our service file.

```javascript
import axios from 'axios';
import useMock from './useMock';

const mockRequests = true;
const baseURL = 'https://api.themoviedb.org';

const client = axios.create({
  baseURL,
});

if (mockRequests) {
  useMock(client);
}

export const fetchAllUsers = () => {
  return client.get('/all-users');
};

export const fetchSingleUser = (id) => {
  return client.get(`/single-user?id=${id}`);
};
```

### Tips

It would be better put the **mockRequests** variable in the .env file, with this we can enable/disable the mock responses very quickly.

```bash
MOCK_REQUESTS=ALL
```

```javascript
const mockRequests = process.env.MOCK_REQUESTS === 'ALL';
```

You can import your mock config inside your condition to check the mockRequests and NODE_ENV to avoid putting your mock files on your final bundle.

```javascript
if (process.env.NODE_ENV !== 'production' && mockRequests) {
  const useMock = require('./mockConfig');
  useMock(client);
}
```

Cheers 🍻


Mocking your requests like a pro


Infinite scroll is not usual to see on websites nowadays but it may be very useful to show a list without pagination or too many user interactions.

Recently I decided to try to build a project using infinite scroll only using React Hooks and the IntersectionObserver Browser API, and it worked very well so I'd like to share with you all how I did.

It will be very simple, I'll use:

- The useState hook to show a loading icon and store our list.
- The useEffect hook to fetch our list on our component mount.
- The useRef hook to get a reference from a element above our list.
- The IntersectionObserver API method to check wheter this element is visible or not.

I can see all code on [this repository](https://github.com/Sergioamjr/react-infinite-scroll-example) already.

### Building our component

First of all, let's create our component that will show our list.

We will only show the element above our list if there're itens and the current page is smaller than the total page.

```js
import React, { useState, useRef } from 'react';

export default function App() {
  const lastRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const [todos, setTodos] = useState({
    itens: [],
    page: 0,
    totalPages: 1,
  });

  return (
    <div>
      <h2>Lorem ipsum's list</h2>
      {todos.itens.map(({ title }, index) => {
        return (
          <div key={index}>
            <p>{title}</p>
          </div>
        );
      })}
      {!!todos.itens.length && todos.page < todos.totalPages && (
        <div ref={lastRef} />
      )}
      {isLoading && <p>Loading...</p>}
    </div>
  );
}
```

### Fetching some data from an API

We also need a method to fetch some data from an API. I created a method called `fetchTodos` that receives the page number that I want as parameter. For this example I mocked the returning of this method. If you want to know how I mocked these data, you can see [right here](https://github.com/Sergioamjr/react-infinite-scroll-example/blob/master/src/services/index.js), the only thing you need to know is that I expect this data format:

```js
{
  itens: [{...}],
  totalPages: number,
  page: number,
}
```

### Writing our Custom Hooks useIsElementVisible.

Now we will create our custom hook that check wheter an element is visible on our screen or not, using the browser method IntersectionObserver API.

```js
import { useEffect, useState } from 'react';

export default (el) => {
  const [isVisible, setIsVisible] = useState(false);
  const callback = ([entry]) => {
    setIsVisible(entry.isIntersecting);
  };

  useEffect(() => {
    const watch = new IntersectionObserver(callback);
    if (el) {
      watch.observe(el);
      return () => watch.unobserve(el);
    }
  }, [el]);

  return isVisible && !!el;
};
```

Our goal it's pass a element reference to see wheter the element above list is visible on our screen or not. If so, we'll call the method to fetch more data.

### Updating our component

Everything is settled so far, now let's create our method to fetch the data. We'll use the hook useEffetch twice; on the page mount and whenever the element above our list is visible.

```js{1, 13-38}
import React, { useState, useEffect, useRef } from "react";
import useIsElementVisible from "./hooks/useIsElementVisible";
import { fetchTodos } from "./services";

export default function App() {
  const lastRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const [todos, setTodos] = useState({
    itens: [],
    page: 0,
    totalPages: 1,
  });

  const isLastVisible = useIsElementVisible(lastRef.current);

  useEffect(() => {
    // Fetch on page mount.
    getMoreTodos(todos.page + 1);
  }, []);

  useEffect(() => {
    // Fetch when the the div above our list is visible on screen
    if (isLastVisible) {
      getMoreTodos(todos.page + 1);
    }
  }, [isLastVisible]);

  const getMoreTodos = async (page) => {
    try {
      setIsLoading(true);
      const newTodos = await fetchTodos(page);
      setTodos((prev) => ({
        ...newTodos,
        itens: prev.itens.concat(newTodos.itens),
      }));
      setIsLoading(false);
    } catch (err) {}
  };

  return (
    <div>
      <h2>Lorem ipsum's list</h2>
      {todos.itens.map(({ title }, index) => {
        return (
          <div key={index}>
            <p>{title}</p>
          </div>
        );
      })}
      {!!todos.itens.length && todos.page < todos.totalPages && (
        <div ref={lastRef} />
      )}
      {isLoading && <p>Loading...</p>}
    </div>
  );
}
```

### Conclusion

Now we're done. I created a simple example to fetch the data and show a loading, in the real world you also need to handle with the fetch exception using catch on your async method.

You can see [the demo](https://react-hooks-infinite-scroll.netlify.app/) right here or [the repository](https://github.com/Sergioamjr/react-infinite-scroll-example).


Latest posts