How to add validations to React Hook Form

Photo by Esther Jiao on Unsplash

Hey everyone, recently I’ve using React Hook Form a lot to manage my form state. While it’s quite useful, one question that I’ve heard for quite a while is — “How can I validate stuff in there?”

In this blog post, I’ll show you how to add validations to your forms created using React Hook Form by using Yup.

Validating our form

Here we have a very simple form with an uncontrolled input component being wrapped by a Controller and assigned to the username value by the name prop. …

Photo by Robin Jonathan Deutsch on Unsplash

Hey everyone, recently I’ve seen a couple of questions regarding testing in the JavaScript ecosystem. Some of the questions are:

  • How to test API calls?
  • How to test axios?
  • How to test API calls fired from a useEffect hook?
  • How to test API calls from React Query?

During this blog post, I’ll give you all the ways that I know off about how to test API calls. For learning purposes, I’ll be using axios for my examples.


Let’s imagine that we have a component that will fire an API request either being through the useEffect hook or a useQuery custom…

Photo by Amol Tyagi on Unsplash

Setting authentication in Next.js apps can be stressful and confusing. To make your life easier, Auth0 created an SDK that makes this process simpler and fast.

In this blog post, I’ll show you how to add authentication to your Next.js application using the Auth0 SDK, how to display the authenticated user information, how to authenticate with a social provider, and protecting a route.

Auth0 dashboard

So the first thing you need is an Auth0 account. You can sign up for free at

Once you have your account setup, on the application settings dashboard create a new application with the Regular Web…

Improving your Git experience

Photo by Peppy Toad on Unsplash

Are you constantly repeating the same Git command or sequence of commands? Do you wish that it would be faster and easier to type those commands? With Git Aliases you can do it.

In this short blog post, I’ll introduce Git Aliases, show you how to configure them, and give you a list of my commonly used aliases.

What are Git Aliases?

Git aliases allow you to reduce the amount of text you write when trying to execute certain commands or a chain of commands. For example, imagine you are doing you are running the push — force-with-lease command. This can get really repetitive…

Photo by Christopher Gower on Unsplash

Are you building an app where you don’t have your backend implementation yet? Are you tired of maintaining a dedicated mock server? Do you find that mocking fetch or axios causes more problems in your tests than it fixes? Then you should probably consider starting using Mock Service Worker (MSW).

Recently, I’ve configured MSW in a couple of projects. Despite MSW being simple to configure there were some scenarios where I had issues. This blog post will do a small introduction to MSW, followed by the base steps while configuring it, and end with some issues I had.

What is MSW?

Mock Service…

Photo by Micah Williams on Unsplash

Authentication is hard! Nowadays, to create a simple login or logout feature, we require a considerable amount of boilerplate code. Now picture we want to add authentication with Google or Facebook? More boilerplate, right?

What if I told you that in React you can do that just by wrapping your code with a context provider and by using a custom react hook?

In this blog post, I’ll show you how to add authentication to your React application using the Auth0 useAuth0 custom hook, how to display the authenticated user information, and how to authenticate with a social provider like GitHub.


It is that simple to manage server state.

Hey everyone, I’m making this post to share with you a library that made managing server state on React applications easy and fun — React Query.

In this blog post, I’ll do a small introduction by explaining what led to its creation followed by an introduction to how the useQuery hook works. I’ll end this post by showing some custom configurations we can do, and how we can do cache invalidation, data refetching, and optimistic updates.

Photo by Fachy Marín on Unsplash

Until now, many React applications have been relying on global state as a way to share data between components and avoid prop drilling.


Lessons learned: are React hooks ready for the real world?

(Photo by Dawid Zawiła on Unsplash)

More than a year has passed since the release of React Hooks. By now, we know all the basics and perhaps have our apps using one or two of them.

This post consists of an agglomerate of tips and pains suffered while trying to migrate from a full-fledged pre Hooks app to a Hooks using one.

Some context

At Talkdesk, in the past year, the WFM Frontend Team decided to migrate their React application to functional components and start using React Hooks.

At the time it seemed a controversial decision. …

Are they really the same?

Hey everyone!

Very often I’ve heard “arrow functions and functions in JavaScript are the same and just have a different syntax”. To clear this up, I’m going to refer to some use cases where they behave differently, including some whys and notes.

Photo by Hello I’m Nik 🇬🇧 on Unsplash

this and arguments

Let’s look at the following anonymous function example called by setTimeout after 1000 milliseconds. Inside of it, we log the hello variable value and the hello property assigned to this.

A function using this

It would be to expect that the output would be helloand hello from this. But instead, the output was the following:

Photo by Tim Dennert on Unsplash

Hey everyone, the past week, I struggled with understating some of the insides of React Context. What I wanted to know was — why every time a context variable updates, I get a re-render on my component?

This article consists of the results of my research, as well as the recommended ways to avoid that issue.

For a better understanding of the issue, we will use the following example:


Here, we create a couple of things:

  • randomContext
  • A useRandomContext custom hook
  • A randomStore where we create two state variables and an effect that when the something variable content changes…

Daniel Afonso

Giving back to the community while coding | Senior Frontend Engineer @cera_care | Prev. @talkdesk and @farfetch | @Auth0Ambassador

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store