
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

Making the Internet Accessible

Styling faster with Tailwind CSS 🍃

Explaining all React Hooks with examples

Replacing Redux with React Hooks