How to use prevState of React.useState()

Gabriel Neto — Fri, 29 Jul 2022 19:16:00 +0000

What is "prevState"?

The "prevState" as the name already says (Previous State), get the previous state of your useState hook, this can be used when you have an array in initial state and want to inherit the existing values to add some new values, for example.

How to use?

For this tutorial i created a simple react checkboxes project in CodeSandbox.io to demonstrate, click here to see.

Basically we have a data mock with an array of objects

After this we have our App component which have a simple useState hook initializing with an empty array

This state hook basically will store an array with the values which we will select in the checkboxes below, inside the app component.

This will render the app component like this:

Realize that in the checkbox input we have a function called "toggleOption"

This function is responsible to add the item inside our selected state array.

Understanding the function

Let's understand deeper this function...
At the App component in input element of our checkboxes, we are using the function passing the name as parameter

Let's go to the function

We are just receiving the previous state of our selected state and assigning the new values, we have also a filter wich remove the items that are equals.

Testing it

To test this i'm using a simple React.useEffect passing our selected state array as dependency.

Testing it in CodeSandBox

Checking Example 1

Checking Example 3

Unchecking Example 1

Done!

Feel free to check out this code in CodeSandBox clicking here

React authentication with Context API and React Router v6 (Typescript)

Gabriel Neto — Mon, 25 Jul 2022 19:58:00 +0000

Creating a new project

Firstly we'll create a new React project with Vite, but you can choose the best option for you.
To start a new project we'll use the command below:



#npm
npm create vite@latest my-auth-app --template react-ts

#yarn
yarn create vite my-auth-app --template react-ts

After this we need to install all dependencies generated by Vite.
To do this we'll run:



#npm
npm install

#yarn
yarn

Well, now we have started our project and have all dependencies installed right.
You will have a folder structure like this in your project:

Before we start to code we'll delete some files from our project to make it cleaner like this:

Do not forget to delete all lines of code that depended of this deleted files

Now, lets install react-router-dom to create our routes.



#npm
npm install react-router-dom
npm install @types/react-router-dom -D

#yarn
yarn add react-router-dom
yarn add @types/react-router-dom

Done! Now we can start coding our components and context.

Creating our project pages

Basicly in this example we'll need a login page and a homepage that can only be accessed if you are loged in.

I'll start creating a simple homepage like this:

And my login page like this:

Creating our Routes

I started creating our login route like this

Passing the Routes component inside our App.tsx

If you run your app you will get this in /login route:

Creating context

Setting up our Private Routes

Using context inside Login page

Done! Now when you click on the Authenticate button in Login page you will set up the authenticated state to true and will be redirected to Homepage.

This simple project can be find out in github:
https://github.com/GabrielDNeto/React-Authentication-ContextAPI---react-router-dom

DEV Community: Gabriel Neto