DEV Community: Andres Castro

From JS to React: Why do I need useState()?

Andres Castro — Fri, 07 Apr 2023 20:20:48 +0000

When I started learning React I was completely blown away by the idea of Components and JSX. Not only was React my first JS framework, but I was also practicing a lot of DOM manipulation in Vanilla JS. I'm sure you understand what I mean if you have gone through this. For those who do not: Dom manipulation is a painful, verbose, and traumatizing experience. Well, at least if you desire to build a fully interactive page with great UX.

I actually overlooked the idea of State when I began, it just didn't seem as important. Of course, that happens if you don't quite understand why you need such a new concept. And so, my React Journey began. Pretty soon, I ran into trouble and my logic was making no sense. After quite a few hours of reading and a good dose of trial and error, I really understood my mistake and got a good grasp of what State is and, most importantly, why it is needed.

To understand state easily, let's first understand why using React components is different from JS DOM Manipulation or, for that matter, regular JS code, even without messing around with the DOM.

Regular JS:

In JavaScript, we can define variables and mutate/reassign these variables throughout our scripting. Regarding the differences with React, there are 3 key points:
1) We can change any variable's value at anytime(as long as it is defined with 'let' and you use the correct scope).
2) DOM manipulation simply adds, eliminates, or modifies the HTML that is being displayed.
3) Whenever we reload the page, all of our variables go back to the original value they had when defined.

React:

When using React, you render components with JSX (which seems like a combination of HTML and JS). Whenever you make a change to those components, React makes a new rendering. Whether it is an update to the component, swapping components or even just eliminating them. In any case, you are rendering again. Let's compare our 3 key points from JS:
1) We can still define variables and change them.
2) Now, we are not directly manipulating the DOM but rather rerendering our components.
3) Our variables will reset when we reload or when we re-render.

So, what does that mean? Quite simple: you cannot make changes to what is seen on the screen without losing your current variable values. That is a problem.... but it has a solution: useState

What is State?

In simple words, State, in the context of React, is the memory of a component. Thanks to it, our variable's values can perdure throughout the lifecycle of our apps' components (mount -> update -> unmount). So, whenever we want a variable to keep its current value even if the component is rerendered, we need to convert that variable into a state variable.

What is useState()?

useState() is what we call a "Hook". But let's not get into hooks right now. In practice, useState() is what we use to define state variables. Most of our variables in React will be defined this way.

How to useState()?

Using state seems a little bit awkward at the beginning, but it's actually pretty simple. Before showing you, be aware I'm assuming you do understand the basics of React Functional Components. Let's look at this code, which I separated into 3 main sections:


import React, { useState } from 'react';

function StateExample() {

 //State Variable:
  const [randomNumber, setRandomNumber] = useState(0);

  //Modifying Function:
  const generateNumber = () => {
    let newNumber = Math.floor(Math.random() * 1000); //Regular Variable
    setRandomNumber(newNumber);
  };

  //JSX to be Rendered:
  return (
    <div>
      <button onClick={generateNumber}> Generate Number</button>
      <div> {randomNumber} </div>
    </div>
  );
}

The component above generates a RandomNumber whenever you click the button and displays it in the div. Let's go through it.

- State Variable: This is how we define our state variables. It's an array with 2 elements. The first element defines the variable itself. The second element defines a function for modifying the variable, which we can call setFunction (I'll expand on this soon). Lastly, we call useState(), which was previously imported. Whatever you place inside this method will be the initial value when the component is mounted (initial value = 0 in this example).

- Modifying Function: There are several things going on here. First of all, let's talk about setRandomNumber. What you need to keep in mind is this: state variables cant be reassigned as regular variables. The second argument in the useState assignment is a function made especially for this and it will basically reassign the variable to whatever argument you pass through it. It is common to name it 'set + Variablename' just for readability. In this particular example, we are reassigning randomNumber with the value newNumber. The next thing we want to look into is: why have our setFuncion inside another function? Basically, whenever you call a function into your JSX, it will automatically run indefinitely. To avoid this, we attach our function to a variable (generateNumber) through arrow function notation. This way, we will only modify the state when we call upon it.

- JSX: Nothing fancy, just our button attached to an onClick event listener that triggers our state update (generateNumber) and thus updates the value on the div.

Note on setFunction: Sometimes, you want your new state variable to depend on its last value. In these situations, the usage is a little bit more complicated. For example, let's say we don't want to display a random number, but rather add a new random number to our last number and display the result. That would look like this:

  const generateNumber = () => {
    let newNumber = Math.Floor(Math.Random()*1000)  //Regular Variable
    setRandoNumber( randomNumber => randumNumber + newNumber )
}

So basically, what you do is pass an arrow function as the argument of the setFunction. This arrow function will receive the state variable as its argument and return whatever value we need for reassignment (in this case, the addition).

Wrapping Up.

Reacts nature is not compatible with the assignment logic we have in vanilla JS. Instead, we need to use state variables that can make our values perdure. This is, in my opinion, the starting point for "thinking in React". Now that you understand the basic idea of state, I would highly suggest moving forward to understanding how this works in conjunction with props within the components Hierarchy of any app and learning how to decide where to define state and where to pass it as a prop. Also, there is a lot going on behind the curtain when managing state. It certainly is a good idea to learn about state asynchronicity and how to deal with it. Let me know if you would like posts on these topics.

Eloquent ORM: First Steps.

Andres Castro — Thu, 16 Mar 2023 05:11:29 +0000

When I started working I had no knowledge of backend development. Even though I was hired as a Front End Dev, I was soon required to work on backend tasks using Laravel. The first days were quite daunting. It was only after grasping how to actually interact with the database that I started feeling like I was not lost. No2, I want to share my understanding on the most basic usage of Laravel's Eloquent Model, hoping to help you have a better starting point than I had.

What is Eloquent?

Eloquent is Laravel's Object Relational Mapping (ORM). We can understand this as a bridge between object-oriented programming and relational databases. The whole idea behind an ORM is to use your knowledge in OOP to manipulate your database, which should be easier and more enjoyable than doing so directly without the ORM.

Now, let's see the basic functionality of Eloquent. For this, I'll use some examples of a Shipping App I've been working on.

Eloquent Basics

Models

The basic element in Eloquent is a "model". Models are like blueprints for database tables. Let's see an example with a "Parcel" table containing dimensions and other relevant parcel info:

As seen in the picture, the model shows a list of the columns we are going to have in our DataBase Table. Also, by making them "fillable" we are telling Laravel that those fields can be edited by us.

Below the listing of columns, we can find some public functions. These functions allow us to relate this model (table) to other models. In this example, we are determining that any Parcel we create belongs to a specific customer and a specific shipment that was bought. This will allow us to later retrieve parcel information as if it was part of the shipments table, even when the information is not actually on the shipment table. This is the magic of a relational database.

Migrations

As said before, the model determines the fields and relations of a certain table. On the other hand, a migration is an actual representation of said table. Let's see the corresponding migration for our parcel model:

Here, we can define certain constraints for our columns. First and most importantly, we define the type of data that can be stored in each field. Besides that, we can also define some properties like a default value if no data is added and if a field can be null or has to be filled.

Within the migration we must also pay special attention to a new concept: table ids.

As seen in the first line, we find the id of the current table. This is an integer that would increment +1 automatically, giving every row a unique id. Furthermore, we can see (on lines 28 and 29) 2 foreign ids. These ids belong to the 2 tables we previously related in the model: Customer and Shipments. In this way, whenever we save a parcel we can pass in the ids of the Customer and the Shipment it belongs to. This is what will finally be used by our Database to connect (relate) the corresponding series of data between tables.

Controllers

Finally, the last piece of the puzzle are controllers. These are basically classes where we define all the logic to be executed in our program. It is most common to create all 3 components: Model, Migration, and Controller. Depending on the requirements of your app, you might not always need a controller. In the current example, there is no "ParcelController" but rather a "ShipmentController", because everything related to a parcel will be dependent on a shipment.

So, what can we do with a controller? In a Laravel app, we can see controllers as the core of our backend, which means there's much we can do. Let's then focus again on our database. There are two main actions we want to achieve regarding our data: storing and retrieving.

Storaging data

Storing data is pretty straightforward. My preferred way of doing this is to create an associative array with all the corresponding data to be saved:

As we can see from the picture, this is just a regular PHP function. Also, note it doesn't matter where the data is coming from (variables, Session, or even from the DataBase).

Be aware, that named keys must match what we defined on our model and migration. However, the order doesn't matter, just the names. Also, be careful about not passing data. If you miss a field that has no default value or is not nullable this will cause your app to crash.

Once you create your array, it is as easy as using the Eloquent Method ::Create().

Retrieving Data:

Retrieving data can be as easy as storing it, but it is also quite tricky depending on how complex your relations are. To achieve this we always need to do some sort of query, in order to let the DB know what is it that we want. Let's imagine a certain scenario where we want to return information about a certain Shipment and all data associated with it.

Let's walk through this example. First, we can see there is a tracking code parameter being received. In the body of the function, we define the $shipment variable and assign it to our query. The first part is using Eloquent to fetch our Shipment model (Shipment::) and the rest of the expression is the actual query. Here we see three different methods.
where() which allows us to compare. In this case, it means "retrieve only shipments where its tracking code column equals our tracking code variable". Then we have with() which allows us to access the relations that live in the model like the carrier and customer. We could even load Parcel data if we wished. Lastly the first() method allows us to only retrieve one row of the Database and not the whole model (which we actually retrieved with the other two methods).

The result of this query is an associative array with all the data we requested.

Wrapping UP

Eloquent ORM allows us to manipulate database data within the realms of OOP. In Laravel, we need a model (defines fields and relations), a migration (actual table to be created), and a controller (where our logic is placed for actually manipulating the data).

What next?

Hope you now have a good understanding of the fundamentals of manipulating a relational database through Eloquent. From here, I would highly recommend studying queries and the many possibilities for building them. Also, there are many details about migrations outside the scope of this lecture so it's a great idea for you to read about migration manipulation. Lastly, consider there is no need to code all these components from scratch. I suggest you look at creating controllers with migration and model through Laravel's Artisan CLI.