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.
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. …
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
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.
So the first thing you need is an Auth0 account. You can sign up for free at https://auth0.com/signup.
Once you have your account setup, on the application settings dashboard create a new application with the Regular Web…
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.
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…
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
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.
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.
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.
Until now, many React applications have been relying on global state as a way to share data between components and avoid prop drilling.
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.
At the time it seemed a controversial decision. …
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.
It would be to expect that the output would be
hello from this. But instead, the output was the following:
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:
randomStorewhere we create two state variables and an effect that when the
somethingvariable content changes…